1

嗨，我正在关注 Angularjs 教程，直到第 7 步是教程停止为我工作的地方。我的 index.html 刚刚变成空白，我不知道为什么。

这是代码
index.html

<!doctype html>
<html lang="en" ng-app="phonecatApp">
<head>
<meta charset="utf-8">
<title>Google Phone Gallery</title>
<link rel="stylesheet" href="css/app.css">
<!--<link rel="stylesheet" href="css/bootstrap.css">-->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.js"></script>
<script src="lib/angular/angular-route.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>

 </head>
<body >
<div ng-view></div>

</body>
</html>

控制器.js

 'use strict';

 /* Controllers */

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

phonecatControllers.controller('PhoneListCtrl', ['$scope', '$http',
function PhoneListCtrl($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;
}]);

应用程序.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'
  });
 }]);

电话列表.html

<div class="container-fluid">
<div class="row-fluid">
<div class="span2">
  <!--Sidebar content-->

  Search: <input ng-model="query">
  Sort by:
 <select ng-model="orderProp">
    <option value="name">Alphabetical</option>
    <option value="age">Newest</option>
  </select>

 </div>
 <div class="span10">
  <!--Body content-->

  <ul class="phones">
    <li ng-repeat="phone in phones | filter:query | orderBy:orderProp"  class="thumbnail">
      <a href="#/phones/{{phone.id}}" class="thumb"><img ng-src="{{phone.imageUrl}}">  </a>
      <a href="#/phones/{{phone.id}}">{{phone.name}}</a>
      <p>{{phone.snippet}}</p>
     </li>
     </ul>

    </div>
 </div>
 </div>

这也是我得到但不明白的控制台错误

  GET file:///C:/Users/John/Desktop/Angular-Family/app/lib/angular/angular-  route.js  index.html:9
  Uncaught ReferenceError: phonecatControllers is not defined controllers.js:7
  Uncaught Error: No module: ngRoute

有任何想法吗？

编辑2：

  Failed to load resource file:///C:/Users/John/Desktop/Angular-Family/app/app.js
  Failed to load resource file:///C:/Users/John/Desktop/Angular- Family/app/controllers.js
 Uncaught Error: [$injector:modulerr] Failed to instantiate module phonecatApp due to:
 Error: [$injector:nomod] Module 'phonecatApp' is not available! You either misspelled     the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
 http://errors.angularjs.org/1.2.0-rc.2/$injector/nomod?p0=phonecatApp
 at http://angular.github.io/angular-phonecat/step-7/app/lib/angular/angular.js:78:12
 at http://angular.github.io/angular-phonecat/step-7/app/lib/angular/angular.js:1330:36
 at ensure (http://angular.github.io/angular-phonecat/step- 7/app/lib/angular/angular.js:1268:38)
 at module (http://angular.github.io/angular-phonecat/step-7/app/lib/angular/angular.js:1328:14)
 at http://angular.github.io/angular-phonecat/step-7/app/lib/angular/angular.js:3071:26
 at Array.forEach (native)
 at forEach (http://angular.github.io/angular-phonecat/step- 7/app/lib/angular/angular.js:224:11)
 at loadModules (http://angular.github.io/angular-phonecat/step-7/app/lib/angular/angular.js:3065:5)
at createInjector (http://angular.github.io/angular-phonecat/step-7/app/lib/angular/angular.js:3007:11)
at doBootstrap (http://angular.github.io/angular-phonecat/step-7/app/lib/angular/angular.js:1152:20)
 http://errors.angularjs.org/1.2.0-rc.2/$injector/modulerr?p0=phonecatApp&p1…2Fangular- phonecat%2Fstep-7%2Fapp%2Flib%2Fangular%2Fangular.js%3A1152%3A20) angular.js:3097
4

2 回答 2

1

您正在定义phonecatControllers模块上的控制器。但是，该模块未定义。因此，当 Angular 应用程序尝试注入模块时，它无法找到它。

尝试从这里更改以下行。

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

对此

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

除了看起来 angular 也无法加载ngRoute依赖项。脚本参考似乎存在。您可能需要检查并确保lib/angular/angular-route.js没有返回 404。

更新**

我认为现在的问题是角度和角度路线的版本不匹配。路由提供者正在寻找一项不可用的服务。

我能够使用该教程演示中的相同脚本使其工作。

工作 Plunker 示例

<script src="http://angular.github.io/angular-phonecat/step-7/app/lib/angular/angular.js"></script>
<script src="http://angular.github.io/angular-phonecat/step-7/app/lib/angular/angular-route.js"></script>

这绝不是一个理想的解决方案，但应该可以帮助您继续学习本教程。您当然可以将这些文件的内容下载到本地计算机。

于 2013-10-23T17:06:36.957 回答
0

phonecatControllers.controller，将其更改为

phonecatApp.controller

祝你好运

于 2013-10-23T17:22:33.403 回答