路由和多視圖單元不能以角度js顯示？

您好，我嘗試在我的anguar js代碼中顯示路由和多個視圖，但是沒有顯示可以請您幫我解決問題以及如何解決它。請幫幫我。路由和多視圖單元不能以角度js顯示？

我的代碼是這個

HTML index.html文件

<!doctype html> 
<html lang="en" ng-app="phonecatApp"> 
<head> 
    <title>New Page Angular</title> 
    <script type="text/javascript" src="angularjs-1_2_25-angular.min.js"></script> 
    <script src="app.js"></script> 
    <script src="controllers.js"></script> 
</head> 
<body> 

    <div ng-view></div> 

</body> 
</html>

App.js代碼

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


phonecatApp.config(['$routeProvider', 

    function($routeProvider){ 

     $routeProvider. 
      when('/phones', { 
       templateUrl: 'phone-list.html', 
       controller: 'PhoneListCtrl' 
      }). 
      when('/phone/:phoneId', { 
       templateUrl: 'phone-details.html', 
       controller: 'PhoneDetailCtrl' 
      }). 
      otherwise({ 
       redirectTo: '/phone' 
      }); 
    } 

    ]);

Contrller的.js代碼

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

phonecatControllers.controller('phoneListCtrl', ['$scope', '$http', function($scope, $http){ 

     $http.get('phones.json').success(function(data){ 
      $scope.computers = data; 
     }); 

}]); 


    phonecatControllers.controller('phoneDetailCtrl', ['$scope', '$routeParams', 
     function($scope, $routeParams){ 

      $scope.phoneId = $routeParams.phoneId; 

     }]);

To complete code is here Plunker

來源

2014-09-25 Rohit Azad

加載ng-route的腳本，你也有一個依賴於另一個的模塊，並且在加載d之後加載依賴獨立模塊。在app.js之前加載控制器文件。 – 2014-09-25 07:12:40

你錯過了在您的index.html 和你有幾個拼寫錯誤的手機，而不是手機......

請參閱固定的版本在這裏

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


    phonecatApp.config(['$routeProvider','$locationProvider', 

     function($routeProvider,$locationProvider){ 

      $routeProvider. 
       when('/phones', { 
        templateUrl: 'phone-list.html', 
        controller: 'phoneListCtrl' 
       }). 
       when('/phone/:phoneId', { 
        templateUrl: 'phone-detail.html', 
        controller: 'phoneDetailCtrl' 
       }). 
       otherwise({ 
        redirectTo: '/phones' 
       }); 
     } 

     ]); 

phonecatApp.controller('phoneListCtrl', ['$scope', '$http', function($scope, $http){ 

     $http.get('phones.json').success(function(data){ 
      $scope.computers = data; 
     }); 

}]); 


    phonecatApp.controller('phoneDetailCtrl', ['$scope', '$routeParams', 
     function($scope, $routeParams){ 


      $scope.phoneId = $routeParams.phoneId; 

     }]);

來源

2014-09-25 09:18:06 sylwester

@RohitAzad請看這裏http://www.thinkful.com/learn/angularjs-tutorial-build-a-gmail-clone/ – sylwester 2014-09-26 06:49:06

路由和多視圖單元不能以角度js顯示？

回答

相關問題