当我尝试使用 ngRoute 时出现错误 $routeProvider not defined

Question

这是我第一次在 Whosebug 上提问，因为到目前为止我能够找到我需要的所有答案。这一次，我不能。我的问题是每次我尝试使用 ngRoute 我都会在控制台中收到错误 说“错误：

[$injector:modulerr] Failed to instantiate module demoApp due to: $routeProvider.$ is undefined".

这是我的 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 not defined

Getting Error $routeProvider not defined when i try to use ngRoute

routing

angularjs