Angularjs教程步骤7；看不到动态创建的列表
Angularjs教程步骤7；看不到动态创建的列表
提问于 2013-10-24 00:54:35
您好，我正在学习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>controller.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;
}]);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'
});
}]);phone-list.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 有什么想法吗？
EDIT2：
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回答 2
Stack Overflow用户
发布于 2013-10-24 01:06:37
您正在定义phonecatControllers模块上的控制器。但是，该模块并未定义。因此，当angular应用程序试图注入模块时，它无法找到它。
尝试将以下行更改为以下行。
var phonecatApp = angular.module('phonecatControllers', []);到这个
var phonecatControllers = angular.module('phonecatControllers', []);除了它看起来angular也无法加载ngRoute依赖。脚本引用似乎存在。您可能需要检查并确保lib/angular/angular-route.js没有返回404。
更新**
我认为现在的问题是angular和angular-route的版本不匹配。路由提供商正在查找的服务不可用。
我能够使用该教程演示中的相同脚本使其正常工作。
Working Plunker Example
<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>这绝对不是一个理想的解决方案，但应该可以帮助您继续学习本教程。当然，您可以将这些文件的内容下载到本地计算机。
Stack Overflow用户
发布于 2013-10-24 01:22:33
phonecatControllers.controller，将此更改为
phonecatApp.controller
祝好运
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/19547764
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号