問題與設置簡單的AngularJS MVC

我已經建立了一個AngularJS MVC結構。不幸的是，腳本中沒有特定的錯誤或警告。但是，屏幕不顯示任何內容，並且視圖不會根據地址欄中提供的URL來顯示。問題與設置簡單的AngularJS MVC

請幫我解決這個問題。

請參閱下面的代碼sepearate

----------------- controller.js ---------------- -----

var demoApp = angular.module('demoApp', []); 
var controllers = {}; 
demoApp.controller('simpleController', function ($scope) { 
    $scope.customers = [{ 
     name: 'Rex', 
     city: 'Kensas' 
    }, { 
     name: 'Cyrin', 
     city: 'Texas' 
    }, { 
     name: 'Vijith', 
     city: 'Florida' 
    }]; 
    $scope.addCustomer = function() { 
     $scope.customers.push({ 
      name: $scope.newCustomer.name, 
      city: $scope.newCustomer.city 
     }); 
     $scope.newCustomer.name = ''; 
     $scope.newCustomer.city = ''; 
    }; 
}); 
demoApp.config(function ($routeProvider) { 
    $routeProvider 
     .when('/view1', { 
      controller: 'simpleController', 
      templateUrl: 'Partials/view1.html' 
     }) 
     .when('/view2', { 
      controller: 'simpleController', 
      templateUrl: 'Partials/view2.html' 
     }) 
     .otherwise({ 
      redirectTo: '/view1' 
     }); 
});

----------------------- index.html ------------ --------------

<!doctype html> 
<html ng-app="demoApp"> 
    <head> 
     <script src="angular.min.js"></script> 
     <script src="controller.js"></script> 
    </head> 
    <body> 
     <div> 
      <div ng-view=""></div> 
     </div> 
    </body> 
</html>

------------- Partials/view1.html ----------- -----------------

<div class="container"> 
    <h2>View 1</h2> 
    Name: 
    <br /> 
    <input type="text" ng-model="name" /> 
    <br /> 
    <ul> 
     <li ng-repeat="cust in customers | filter:name">{{ cust.name }}</li> 
    </ul> 
    <br /> 
    User Name:<br /> 
    <input type="text" ng-model="newCustomer.name" /> 
    <br /> 
    User Name:<br /> 
    <input type="text" ng-model="newCustomer.city" /> 
    <br /> 
    <button ng-click="addCustomer()">Add Customer</button> 
    <br /> 
    <a href="#view2">View 2</a> 
</div>

不包括view2.html，因爲它在這裏不太重要。

希望快速修復。 :)

感謝您的時間！雷克斯

來源

2014-07-22 user3613331

哪個角的版本，您正在使用？

如果您正在使用1.2 *，那麼你必須通過包括angular-route.js分別

見文檔明確注入ngRoute模塊到你的應用程序：https://docs.angularjs.org/guide/migration#ngroute-has-been-moved-into-its-own-module

導入ngRoute在你的代碼

var demoApp = angular.module('demoApp', ['ngRoute']);

此外，您還沒有將控制器定義到任何HTML元素秒。
```
<div ng-controller="simpleController"></div> 
```

DEMO PLUNKER

注：之前你問任何看到瀏覽器的控制檯中是否存在錯誤。如果您尚未包含ngRoute，則會引發錯誤，您可以在控制檯中看到它。

來源

2014-07-22 10:55:57 Raghavendra

完美的幫助我。這個問題真的是因爲ngRoute被納入該計劃。而且它沒有在頁面中定義控制器的情況下運行良好。我想知道，當我們點擊每個view1或view2鏈接時，頁面正在重新加載。 AngularJS是否正常？我對單個頁面應用程序的期望意味着頁面在點擊多個鏈接時不會刷新。請指教！非常感謝您的幫助！ – user3613331

是的，當您使用路由時，角度應用程序是單頁。頁面不會刷新，只有'ng-view'內的內容會根據您的路由器配置而變化 – Raghavendra

你必須定義你的NG-控制器

<div ng-controller="simpleController">

來源

2014-07-22 10:55:11 ThomasP1988

-1

您已經定義了您的應用程序（ng-app）..但您尚未在任何HTML文件中定義您的控制器。

很多情況下你需要使用控制器的HTML文件中，有把它通過：

<div ng-controller="simpleController"> 
    // The rest of your HTML 
</div>

來源

2014-07-22 11:11:43

問題與設置簡單的AngularJS MVC

回答

相關問題