學習angular：ng-view無法加載，爲什麼？

這個應用程序的頁面只是加載空白。我搜索了幾個小時的問題，仍然無法找到問題。 Angular是1.3.5，Angular-route是v1.2.28。學習angular：ng-view無法加載，爲什麼？

這是index.html的：

<html ng-app="myApp"> 
 
\t <head> \t 
 
\t \t <script src="js/angulark.min.js"></script> \t 
 
\t \t <script src="js/angular-routek.js"></script> 
 
\t \t <script> 
 
\t \t \t var myApp = angular.module('myApp', ['ngRoute']); 
 
\t \t \t 
 
\t \t \t \t myApp.config(function ($routeProvider) { 
 
\t \t \t \t \t $routeProvider 
 
\t \t \t \t \t \t .when('/', 
 
\t \t \t \t \t \t \t { 
 
\t \t \t \t \t \t \t \t controller: 'MainController', 
 
\t \t \t \t \t \t \t \t templateUrl: 'views/nameView.html'; \t \t \t \t \t \t 
 
\t \t \t \t \t \t \t }) \t 
 
\t \t \t \t \t \t .when('/cityView', 
 
\t \t \t \t \t \t \t { 
 
\t \t \t \t \t \t \t \t controller: 'MainController', 
 
\t \t \t \t \t \t \t \t templateUrl: 'views/cityView.html'; \t \t \t \t \t \t 
 
\t \t \t \t \t \t \t }) 
 
\t \t \t \t \t \t .otherwise({ redirectTo: '/' }); 
 
\t \t \t \t }); \t 
 
\t \t \t 
 
\t \t \t \t myApp.controller('MainController', ['$scope', function($scope) { 
 
\t \t \t \t \t $scope.customers = [ 
 
\t \t \t \t \t \t { name: 'Andre Queiroz', city: 'Rio de Janeiro' }, 
 
\t \t \t \t \t \t { name: 'Fulano', city: 'Sao Paulo'}, 
 
\t \t \t \t \t \t { name: 'Beltrano', city: 'Curitiba' } 
 
\t \t \t \t \t ]; 
 
\t \t \t \t 
 
\t \t \t \t \t $scope.addCustomer() = function() { 
 
\t \t \t \t \t \t $scope.customers.push( 
 
\t \t \t \t \t \t \t { name: $scope.newCustomer.name, city: $scope.newCustomer.city } 
 
\t \t \t \t \t \t); 
 
\t \t \t \t \t }; \t \t \t 
 
\t \t \t \t }]); \t \t 
 
\t \t </script> 
 
\t \t <title>Meu Aplicativo</title> 
 
\t </head> \t 
 
\t <body> \t 
 
\t \t <div> 
 
\t \t \t <!-- Placeholder for views --> 
 
\t \t \t <div ng-view> </div> \t \t \t \t 
 
\t \t </div> 
 
\t </body> 
 
</html>

這是nameView.html

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

的cityView.html是相同的，但沒有addCustomer東西。我正在分成模塊文件等，但我把它放在一個文件，看它是否工作。

來源

2015-06-02 André Queiroz

什麼是'filter：filter.name'，你可以嘗試從'ng-repeat'中刪除它嗎？ –

首先解決你的語法錯誤，然後非常多地工作 –

好。大部分的錯誤都是語法。

Error 1: Remove ; from templateUrl inside $routeProvider.when()

Eq。 templateUrl： '意見/ cityView.html'

Error 2: Can't have parentheses to create a method with this sintaxe $scope: Eq. $scope.newfunction = function() {...}

<html ng-app="myApp"> 
    <head> 
     <script src="js/angulark.min.js"></script> 
     <script src="js/angular-routek.js"></script> 
     <script> 
      var myApp = angular.module('myApp', ['ngRoute']); 

       myApp.config(function ($routeProvider) { 
        $routeProvider 
         .when('/', 
          { 
           controller: 'MainController', 
           templateUrl: 'views/nameView.html'      
          }) 
         .when('/cityView', 
          { 
           controller: 'MainController', 
           templateUrl: 'views/cityView.html'      
          }) 
         .otherwise({ redirectTo: '/' }); 
       }); 

       myApp.controller('MainController', ['$scope', function($scope) { 
        $scope.customers = [ 
         { name: 'Andre Queiroz', city: 'Rio de Janeiro' }, 
         { name: 'Fulano', city: 'Sao Paulo'}, 
         { name: 'Beltrano', city: 'Curitiba' } 
        ]; 

        $scope.addCustomer = function() { 
         $scope.customers.push( 
          { name: $scope.newCustomer.name, city: $scope.newCustomer.city } 
         ); 
        };   
       }]);   
     </script> 
     <title>Meu Aplicativo</title> 
    </head> 
    <body> 
     <div> 
      <!-- Placeholder for views --> 
      <div ng-view> </div>     
     </div> 
    </body> 
</html>

還有就是在你看來一些HTML錯誤。確保驗證您的HTML。

Error: In the line 11, you must fix from </div to </div>

另外，您不需要添加控制器。你對你的配置已經添加：

Remove it from your view: From <div ng-controller="MainController"> to <div>

不是必需的，但最好的做法

在你的最後一行，還有一個備用</div>，擺脫它：

<div class="container"> 
    <div ng-controller="MainController"> 
     <div> 
      <h2>View 1</h2> 
      Name: <input type="text" ng-model="filter.name"/> 
     </div> 
     <br /> 
     <ul> 
      <li ng-repeat="cust in customers | filter:filter.name | orderBy:'city'">{{cust.name | uppercase}} - {{cust.city}}</li> 
     </ul> 
    </div> 

    <div> 
     <p>Customer name:</p> 
     <input type="text" ng-model="newCustomer.name" /> 
     <p>Customer city:</p> 
     <input type="text" ng-model="newCustomer.city" /> 
     <button ng-click="addCustomer()">Add customer </button> 
     <a href="#/view2">View 2</a> 
    </div> 
</div>

PS：確保你檢查你的語法錯誤。使用jshint，jslint甚至Chrome開發工具/ Firebug都可以提供幫助。你可以設置你的編輯器（Sublimelinter for Sublime）來使用jshint。或者使用隨附的Webstorm之類的IDE。

來源

2015-06-02 06:09:24

非常，幫了我很多。我現在在使用WebStorm。問題在於代碼通過WebStorm運行正常，但當我點擊index.html時加載空白。你知道它會是什麼嗎？ –

檢查您的瀏覽器控制檯。 AngularJS有一個很好的調試器例外。您也可以激活[jshint]（https://www.jetbrains.com/webstorm/help/jshint.html）或[jslint]（https://www.jetbrains.com/webstorm/help/jslint.html）在Webstorm。通過Webstorm燈泡（燈泡）上的鼠標並閱讀警告消息。他們會幫助你進行調試。 –

index.html javascript中存在錯誤。裏面MainController代碼

$scope.addCustomer() = function() { 
    $scope.customers.push( 
     { name: $scope.newCustomer.name, city: $scope.newCustomer.city } 
    ); 
};

改變

$scope.addCustomer= function() { 
    $scope.customers.push( 
     { name: $scope.newCustomer.name, city: $scope.newCustomer.city } 
    ); 
};

應該你實際做的$scope.addCustomer=代替$scope.addCustomer()=

來源

2015-06-02 05:46:00 San

ty。幫了很多忙。 –

學習angular：ng-view無法加載，爲什麼？

回答

相關問題