AngularJS 1.3 - 错误:错误:modulerr 模块错误(使用 ng-view，$routeProvide

AngularJS 1.3 - Error: error:modulerr Module Error (using ng-view, $routeProvider)

本文关键字：错误 使用 ng-view routeProvide modulerr AngularJS 模块      更新时间：2023-09-26

我正在学习一个使用 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)

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

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

联系人.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;
}]);

索引.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>

编辑.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>

列表.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>

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

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

旧版本的angular曾经将路由器包含在相同的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)
相关文章：