AngularJS路線

我是AngularJS中的新人。我正試圖從這個網站學習AngularJS（https://docs.angularjs.org/tutorial/step_07）。我的代碼如下AngularJS路線

的index.html

<!doctype html> 
<html lang="en" ng-app="phonecatApp"> 
    <head> 
     <meta charset="utf-8"> 
     <title>Angular Project</title> 
     <link rel="stylesheet" href="css/bootstrap.css"> 
     <link rel="stylesheet" href="css/app.css">   
     <script src="js/angular.min.js"></script> 
     <script src="js/angular-route.js"></script> 
     <script src="js/app.js"></script> 
     <script src="js/controllers.js"></script> 
    </head> 
    <body> 
     <div ng-view></div> 
    </body> 
</html>

controllers.js

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

phonecatControllers.controller('PhoneListCtrl', ['$scope', '$http', function ($scope, $http) { 
      $http.get('phones/phones.json').success(function (data) { 
       $scope.phones = data; 
      }); 
      $scope.orderProp = 'age'; 
     }]); 

phonecatControllers.controller('PhoneDetailCtrl', ['$scope', '$routeParams', 
    function($scope, $routeParams) { 
    $scope.phoneId = $routeParams.phoneId; 
    }]);

app.js

'use strict'; 

/* App Module */ 

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

phonecatApp.config(['$routeProvider', 
    function($routeProvider) { 
    $routeProvider. 
     when('/phones', { 
     templateUrl: 'partials/phone-list.html', 
     controller: 'PhoneListCtrl' 
     }). 
     when('/phones/:phoneId', { 
     templateUrl: 'partials/phone-detail.html', 
     controller: 'PhoneDetailCtrl' 
     }). 
     otherwise({ 
     redirectTo: '/phones' 
     }); 
    }]);

我的代碼裏的我的電腦htdocsangu文件夾。我正在嘗試瀏覽以下URL

http://localhost/angu/#/phones

但是我得到白色的空白頁。任何人都可以說問題在哪裏？

來源

2015-09-01 abu abu

您controller.js應該有phonecatControllers模塊名稱而不是phonecatApp，那麼目前是什麼情況是你是在controller.js再次宣佈它沖洗phonecatApp模塊。

從技術上講，你應該使用phonecatControllers名有&您控制檯必須顯示錯誤$injector moduler錯誤你有沒有宣佈phonecatControllers模塊，在phonecatApp模塊已經注入。

Controller.js

var phonecatControllers = angular.module('phonecatControllers', []); //<=-change here 

phonecatControllers.controller('PhoneListCtrl', ['$scope', '$http', function ($scope, $http) { 
    $http.get('phones/phones.json').success(function (data) { 
     $scope.phones = data; 
    }); 
    $scope.orderProp = 'age'; 
}]); 

phonecatControllers.controller('PhoneDetailCtrl', ['$scope', '$routeParams', 
    function($scope, $routeParams) { 
    $scope.phoneId = $routeParams.phoneId; 
}]);

來源

2015-09-01 21:24:33

感謝@Pankaj。您的解決方案正在運行謝謝 –

@abuabu很高興幫助你..謝謝:) –

回答

相關問題