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很高兴帮助你..谢谢:) –

回答

相关问题