Question

我正在关注有角度的phonecatApp教程并坚持第2步。当我进入我的索引页面时：http://localhost:8000/app/

数据绑定似乎无法正常工作......这就是我的视图加载：

{{phone.name}}
{{phone.snippet}}

理论上它应该拉取数据并将其绑定到视图并显示表格吗？现在确定为什么它没有任何想法？我的代码如下：

这是我的index.html

<!doctype html>
<html lang="en" ng-app="phonecatApp">
<head>
  <meta charset="utf-8">
  <title>Google Phone Gallery</title>
  <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css">
  <link rel="stylesheet" href="css/app.css">
  <script src="bower_components/angular/angular.js"></script>
  <script src="js/controllers.js"></script>
</head>
<body ng-controller="PhoneListCtrl">

  <ul>
    <li ng-repeat="phone in phones">
      <span>{{phone.name}}</span>
      <p>{{phone.snippet}}</p>
    </li>
  </ul>

</body>
</html>

这是我的js / controllers / js

'use strict';

/* Controllers */

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

phonecatApp.controller('PhoneListCtrl', function ($scope) {
  $scope.phones = [
    {'name': 'Nexus S',
     'snippet': 'Fast just got faster with Nexus S.'},
    {'name': 'Motorola XOOM™ with Wi-Fi',
     'snippet': 'The Next, Next Generation tablet.'},
    {'name': 'MOTOROLA XOOM™',
     'snippet': 'The Next, Next Generation tablet.'}
  ];
});

我的console.log说：

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.3.8/$injector/nomod?p0=phonecatApp
    at http://localhost:8000/app/bower_components/angular/angular.js:63:12
    at http://localhost:8000/app/bower_components/angular/angular.js:1764:17
    at ensure (http://localhost:8000/app/bower_components/angular/angular.js:1688:38)
    at module (http://localhost:8000/app/bower_components/angular/angular.js:1762:14)
    at http://localhost:8000/app/bower_components/angular/angular.js:4094:22
    at forEach (http://localhost:8000/app/bower_components/angular/angular.js:323:20)
    at loadModules (http://localhost:8000/app/bower_components/angular/angular.js:4078:5)
    at createInjector (http://localhost:8000/app/bower_components/angular/angular.js:4004:11)
    at doBootstrap (http://localhost:8000/app/bower_components/angular/angular.js:1446:20)
    at bootstrap (http://localhost:8000/app/bower_components/angular/angular.js:1467:12)
http://errors.angularjs.org/1.3.8/$injector/modulerr?p0=phonecatApp&p1=Erro…calhost%3A8000%2Fapp%2Fbower_components%2Fangular%2Fangular.js%3A1467%3A12)

Answer 1

因为您的代码没有任何问题，所以问题必须是其中一个脚本没有被加载。

您可以轻松使用大多数浏览器的开发工具来检测此类问题。

检查脚本文件的路径是否正确。

AngularJS官方教程步骤2数据在刷新时不绑定

1 个答案: