Question

这是我第一次询问有关stackoverflow的问题，因为到目前为止，我能够找到所需的所有答案。这一次，我不能。我的问题是每次我尝试使用ngRoute我在控制台中出现错误说“错误：

[$ injector：modulerr]由于以下原因导致无法实例化模块demoApp： $ routeProvider。$未定义“。

这是我的HTML代码：

<!DOCTYPE html>
<html ng-app="demoApp">
<head>
    <title>AngularJS</title>
    <meta charset='UTF-8'>
    <script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-route.js"></script>
    <script src='/home/martin4o29/Documents/WebSites/angular practice/first steps/Controller.js'></script>
</head>
<body>
<article>
    <div ng-view>

    </div>
</article>

</body>
</html>

这是我的Angular代码：

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

demoApp.controller('Ctrl', ['$scope', function($scope){
    $scope.customers = [
        {firstName: 'Fostata', lastName: 'Boklik'},
        {firstName: 'John', lastName: 'Hoe'},
        {firstName: 'Jane', lastName: 'Doe'}
    ];

    $scope.addCustomer = function(){
        $scope.customers.push({firstName: $scope.newCustFirstName, lastName: $scope.newCustLastName});
    };
}]);

demoApp.config(function($routeProvider) {
        $routeProvider
            .$.when('/', {
                templateURL: '/home/martin4o29/Documents/WebSites/angular practice/first steps/Partials/View1.html',
                controller: 'Ctrl'
            })
            .$.when('.view2', {
                templateURL: '/home/martin4o29/Documents/WebSites/angular practice/first steps/Partials/view2.html',
                controller: 'Ctrl'
            })          
            .otherwise({
                redirectTo: '/'
            });

    });

View1.html：

<!DOCTYPE html>
<html>
<head>
    <title>AngularJS</title>
    <meta charset='UTF-8'>
    <script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-route.js"></script>
    <script src='/home/martin4o29/Documents/WebSites/angular practice/first steps/Controller.js'></script>
</head>
<body data-ng-app='demoApp'>

    <article data-ng-controller="Ctrl">
        <input type="text" data-ng-model='name'>
        <br>
            <div>
                <ul>
                    <li data-ng-repeat="cust in customers | filter: name"> {{cust.firstName + " " + cust.lastName }}</li>
                </ul>
            </div>  

        <input type="text" data-ng-model='newCustFirstName'>
        <br>
        <input type="text" data-ng-model='newCustLastName'>
        <br>

        <button data-ng-click="addCustomer()">AddCustomer</button>

    </article>

    <a href="#/view2">View2</a>

</body>
</html>

view2.html

<!DOCTYPE html>
<html>
<head>
    <title>AngularJS</title>
    <meta charset='UTF-8'>
    <script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-route.js"></script>
    <script type="text/javascript" src='/home/martin4o29/Documents/WebSites/angular practice/first steps/Controller.js'></script>
</head>
<body data-ng-app='demoApp'>

    <article data-ng-controller="Ctrl">
        <input type="text" data-ng-model='name'>
        <br>
    <div>
        <ul>
            <li data-ng-repeat="cust in customers | filter: name"> {{cust.firstName + " " + cust.lastName }}</li>
        </ul>
    </div>  

    </article>

</body>
</html>

Answer 1

首先修复模板

删除头部脚本
远程ng-app
删除控制器

示例视图：

<!DOCTYPE html>
<html>
    <body>
        <article>
            <input type="text" data-ng-model='name'>
            <br>
            <div>
                <ul>
                    <li data-ng-repeat="cust in customers | filter: name"> {{cust.firstName + " " + cust.lastName }}</li>
                </ul>
            </div>  
        </article>
    </body>
</html>

视图只定义了应该更改的部分，而不是整个应用程序。

将$routeProvider.$.when替换为$routeProvider.when

当我尝试使用ngRoute时，没有定义错误$ routeProvider

1 个答案: