AngularJS中的空視圖

我想通過以下this tutorial學習/刷新我的AngularJS知識。AngularJS中的空視圖

我現在正在嘗試完成視圖和路由部分。但是，當我加載main.html頁面時，不顯示任何視圖。我看到的只是：

Before view! After view!

chrome dev控制檯也完全是空的（沒有錯誤/警告等）。

那麼我錯過了什麼？

我在我的Win7 64bit電腦上通過本地「express」node.js服務器運行它。我正在訪問瀏覽器中的頁面使用http://localhost:9000/main.html

我下載了angular.js和angular-route.min.js的1.5.8版本，並將它們放置在與main.html相同的目錄中。

嘗試：http://localhost:9000/view1.html成功顯示視圖的內容。

這是main.html中：

<!DOCTYPE html> 
<html ng-app="demoApp"> 
    <body> 

     Before view! 

     <div ng-view></div> 

     After view! 

     <script src="angular.min.js"></script> 
     <script src="angular-route.min.js"></script> 

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

      demoApp.config(function($routeProvider) { 
       $routeProvider 
        .when('/view1', 
         { 
          controller: 'SimpleController', 
          templateURL: '/view1.html' 
         }) 
        .when('/view2', 
         { 
          controller: 'SimpleController', 
          templateURL: '/view2.html' 
         }) 
        .otherwise({ redirectTo: '/view1' });  

      }); 

      var controllers= {}; 

      controllers.SimpleController= function($scope) { 
         $scope.customers=[ 
          {name:'John Smith', city: 'New York'}, 
          {name: 'Bob Jones', city: 'London'}, 
          {name:'David Peters', city: 'Sydney'} 
         ]; 
         $scope.addCustomer=function() { 
          $scope.customers.push({ name: $scope.newCustomer.name, city: $scope.newCustomer.city }); 
         } 
        }; 

      demoApp.controller(controllers); 

     </script> 

    </body> 

</html>

這裏的view1.html：

<div class="container"> 
    <h2>View 1</h2> 
    Name: <input type="text" ng-model="filter.name" /> 

    <ul> 
     <li ng-repeat="cust in customers | filter:filter.name | orderBy:'name'">{{ cust.name | uppercase }} - {{ cust.city | lowercase}}</li> 
    </ul> 
    <br /> 
    Customer Name: <br/> 
    <input type="text" ng-model="newCustomer.name" /> 
    <br /> 
    Customer City: <br/> 
    <input type="text" ng-model="newCustomer.city" /> 
    <br/> 
    <button ng-click="addCustomer()">Add Customer</button> 

    <a href="#/view2">View 2</a> 

</div>

view2.html僅僅是一個簡單的view1.html版本

來源

2016-09-15 Ash

我認爲你的看法不是要求。確保你是正確的呼叫控制器。 – Developer

謝謝，我會仔細看看視圖。 – Ash

替換下面的代碼：

demoApp.config(function($routeProvider) { 
        $routeProvider 
         .when('/view1', 
          { 
           controller: 'SimpleController', 
           templateURL: '/view1.html' 
          }) 
         .when('/view2', 
          { 
           controller: 'SimpleController', 
           templateURL: '/view2.html' 
          }) 
         .otherwise({ redirectTo: '/view1' });  

       });

，代碼如下：

demoApp.config(function($routeProvider) { 
        $routeProvider 
         .when('/view1', 
          { 
           controller: 'SimpleController', 
           templateUrl: 'view1.html' 
          }) 
         .when('/view2', 
          { 
           controller: 'SimpleController', 
           templateUrl: 'view2.html' 
          }) 
         .otherwise({ redirectTo: 'view1' });  

    });

代碼中的「templateURL」替換爲「templateUrl」，因爲它區分大小寫。

來源

2016-09-15 05:46:43 UIPassion

這就是我錯過的！謝謝。當語言將首字母縮寫詞（例如URL）變成大寫字母（例如Url）時，我討厭它。非常煩人的是，它甚至沒有將「未知標識符」等內容記錄到控制檯。 – Ash

你知道是否有一個angular.js的調試版本記錄額外的信息和類似這樣的錯誤？學習時會非常有用。我試過了縮小版和非縮小版，並沒有將這個錯誤記錄到控制檯。 – Ash

我第二。但我不知道任何這樣的調試版本/工具。如果我得到任何東西，會讓你知道。 – UIPassion

AngularJS中的空視圖

回答

相關問題