Question

我正在阅读使用AngularJS 1.0和我使用1.3.8的教程。我遇到过一个问题，我无法弄清问题是什么。

我得到的错误是：

Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.3.8/$injector/modulerr?p0=contacts&p1=Error%3…ogleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.8%2Fangular.min.js%3A17%3A350)

我相信它已经弃用了从教程到1.3.8版本的AngularJS的代码。

有人可以指出代码有什么问题吗？

contacts.js

angular.module('contacts', ['ngRoute'])
.config(['$routeProvider', function($routeProvider){
    // Configure the routes
    $routeProvider
        .when('/contact/:index', {
            // Edit contact
            templateUrl: 'edit.html',
            controller: 'Edit'
        })
        .when('/', {
            // List all contacts
            templateUrl: 'list.html'
        });
}])
.controller('Contacts', ['$scope', function($scope){
    // Contacts is the parent controller, so  $scope.contacts is available to all children
    $scope.contacts= [
        { name: 'Tom',  number: '2345678888' },
        { name: 'Abe',  number: '4338995647' },
        { name: 'John', number: '9892668178' }
    ];
}])
.controller('Edit', ['$scope', function($scope, $routeParams){
    // Load in a contact from the route (/contact/:$index)
    $scope.contact = $scope.contacts[$routeParams.index];
    $scope.index = $routeParams.index;
}]);

的index.html

<html ng-app="contacts">
<head lang="en">
<meta charset="UTF-8">
<title>Contacts</title>
<meta name="viewport" content="width-device-width">

<style>
    * {
        box-sizing: border-box;
    }
    body {
        font: 14px/1.5 sans-serif;
        color: #222;
        margin: 3em;
    }
</style>
</head>
<body>
<div ng-controller="Contacts">
<h1>Contacts</h1>
<div ng-view></div>
</div>

<script   src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js "></script>
<script src="contacts.js"></script>
</body>
</html>

edit.html

<h2>Edit</h2>
<ul>
    <li>
        <label for="name">Name:</label>
        <input type="text" id="name" ng-model="contact.name">
    </li>
    <li>
        <label for="number">Number:</label>
        <input type="text" id="number" ng-model="contact.number">
    </li>
</ul>

<a href="/AngularJS/index.html">Back to the list</a>

list.html

<h2>List</h2>
<div>
    <label for="search">Search:</label>
        <input type="search" ng-model="search">
</div>

<ul>
    <li ng-repeat="contact in contacts | filter:search">
         <a href="#/contact/{{ $index }}">{{ contact.name }}</a>
        : {{ contact.number }}
    </li>
</ul>
<a href="/AngularJS/index.html">Back to the list</a>

Answer 1

你需要在angularjs之后包含angular-route脚本才能使用ngRoute

https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular-route.min.js

较旧版本的角度，用于将路由器包含在相同的angularjs核心脚本中。他们已经从1.2.x开始继续前进，角度路由器现在通过包含单独的脚本来选择。

执行：

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular-route.min.js"></script>

还要确保依赖项注释列表和构造函数参数列表按顺序匹配，并且在计数中，您在列表中缺少$routeParams。

.controller('Edit', ['$scope', '$routeParams', 
             function($scope, $routeParams)

AngularJS 1.3 - 错误：错误：modulerr模块错误（使用ng-view，$ routeProvider）

1 个答案: