个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-11-28 00:40:30 24 4
gpt4 key购买 nike

我正在学习使用 AngularJS 1.0 的教程，而我正在使用 1.3.8。我遇到了一个问题，我不知道问题出在哪里。

我收到的错误是:

未捕获错误:[$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 版本教程中已弃用的代码。

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

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>

编辑.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 以来，它们已经继续前进，现在可以通过包含单独的脚本来选择加入 Angular 路由器。

做:

<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)

关于javascript - AngularJS 1.3 - 错误 : error:modulerr Module Error (using ng-view, $routeProvider)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27995673/

24 4 0
文章推荐： javascript - createHTMLDocument() 未初始化
文章推荐： javascript - PouchDB/CouchDB 复制失败，方法不允许
文章推荐： javascript - "If"合并/避免嵌套
文章推荐： javascript - AngularJS "ng-repeat | filter:..."没有按我的预期工作(不显示任何数据)
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com