当我尝试使用 ngRoute 时出现错误 $routeProvider 未定义答案

【问题标题】：Getting Error $routeProvider not defined when i try to use ngRoute当我尝试使用 ngRoute 时出现错误 $routeProvider 未定义
【发布时间】：2015-06-27 20:01:27
【问题描述】：

这是我第一次在 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>

【问题讨论】：

能把tempURL中的第一个/去掉，看看能不能用？
我做了，还是不行

标签： angularjs routing

【解决方案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

【讨论】：

删除这些标签的理由是什么？
当您加载 index.html 时，应用程序正在被引导，从此时起，您可以开始使用路由器更改部分应用程序。每条路线都会更改应用程序的一部分，加载模板，编译它等等。您要做的是在工作中引导同一个应用程序。其次，您已经为片段 controller:Ctrl 定义了控制器，并且您应该使用 ng-controller 指令将其添加两次。
我在我的视图中摆脱了应用程序、脚本和控制器，但它仍然无法加载我的 demoApp 模块，仍然说 $routeProvider 未定义，我只是按照 angularjs 教程做所有事情与解释的完全相同，但由于某种原因无法正常工作...
不是$routeProvider.$.when，而是$routeProvider.when
那行得通，我不再收到那个错误了，愚蠢的 sublime angular js 包....哈哈，但现在我的主 html 页面没有加载我的任何视图，我只是得到一个空白页面:(