AngularJS 路线

Question

我是 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'
      });
  }]);

我的代码在我电脑 htdocs 的 angu 文件夹中。我正在尝试浏览下面 URL

http://localhost/angu/#/phones

但是我得到的是白色空白页。谁能说说是哪里出了问题？？

Answer 1

你 controller.js 应该有 phonecatControllers 模块名称而不是 phonecatApp，所以目前发生的事情是你通过在 [=14] 中声明来刷新 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;
}]);

AngularJS 路线

AngularJS Route

javascript

url-routing

angularjs

single-page-application

angularjs-routing