使用 ngRoute 和 angular-route.js 也未定义错误 routeProvider答案

【问题标题】：error routeProvider not defined also with ngRoute used and angular-route.js included使用 ngRoute 和 angular-route.js 也未定义错误 routeProvider
【发布时间】：2015-07-31 15:25:27
【问题描述】：

我正在尝试使工作不完整和不成功。

我在控制台中遇到错误，告诉我几件事：

1/ $routeProvider 表示未在 todolist.js 中定义，而 ngRoute 在模块中声明且 angular-route.js 请求 2/ 它在 controller.js 中告诉我它错过了第 4 行（功能行）的形式参数

todolist.js

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

todoList.config([$routeProvider,function($routeProvider){
    $routeProvider
        .when('/inbox',{
            templateUrl:'partials/inbox.html',
            controller: 'todoCtrl'
        })
        .when('/today',{
            templateUrl:'partials/today.html',
            controller: 'todoCtrl'
        })
        .otherwhise({
            redirectTo: '/inbox'
        })
}])

controller.js

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

todoListController.controller('todoCtrl',['$scope',
    function ('$scope') {
        var todos = $scope.todos = [];
        $scope.addTodo = function () {
            var newTodo = $scope.newTodo.trim();
            if (!newTodo.length) {
                return;
            }
            todos.push({
                title: newTodo,
                completed: false
            });
            $scope.newTodo = '';
        };
        $scope.removeTodo = function (todo) {
            todos.splice(todos.indexOf(todo), 1);
        };
        $scope.markAll = function (completed) {
            todos.forEach(function (todo) {
                todo.completed = !completed;
            });
        };
        $scope.clearCompletedTodos = function () {
            $scope.todos = todos = todos.filter(function (todo) {
                return !todo.completed;
            });
        };
    }]);

index.html

<!DOCTYPE html>
<html lang="fr" ng-app="todoList">
    <head>
        <meta charset="utf-8" />
        <meta name="format-detection" content="telephone=no">
        <meta name="msapplication-tap-highlight" content="no">
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
        <link rel="stylesheet" type="text/css" href="css/bootstrap.css">
        <link rel="stylesheet" type="text/css" href="css/style.css">
    </head>
    <body>
       <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
              <div class="container-fluid" >
                <div class="navbar-header">
                  <a class="navbar-brand" href="#">Pense-bête</a>
                </div>
                 <div class="navbar navbar-right" id="myNavbar" >
                    <ul class="nav navbar-nav">
                        <li><button type="button" class="btn btn-default navbar-btn" ng-click="clearCompletedTodos()">
                            <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
                        </button></li>
                        <li><button type="button" class="btn btn-default navbar-btn" ng-click="clearCompletedTodos()">
                            <span class="glyphicon glyphicon-refresh" aria-hidden="true"></span>
                        </button></li>
                        <li><button type="button" class="btn btn-default navbar-btn" ng-click="clearCompletedTodos()">
                            <span class="glyphicon glyphicon-option-vertical" aria-hidden="true"></span>
                        </button></li>                            
                    </ul>
                </div>                    
            </div>
        </nav>
        <div class="row">

        </div>    
        <div class="row" id="menu">
            <div class="col-sm-3 cold-md-2" id="left-menu">
                <ul class="nav nav-pills nav-stacked">
                    <li class="active"><a href="#home" data-toggle="tab"><span class="glyphicon glyphicon-inbox">
                    </span> Boite de réception</a></li>
                    <li><a href="#"><span class="glyphicon glyphicon-calendar"></span> Aujourd'hui</a></li>               
                    <li><a href="#"><span class="glyphicon glyphicon-calendar"></span> Cette semaine</a></li>
                    <li><a href="#"><i class="glyphicon glyphicon-pushpin"></i> Important </a></li>
                    <li><a href="#profile" data-toggle="tab"><span class="glyphicon glyphicon-cutlery"></span>
                        Repas</a></li>
                    <li><a href="#messages" data-toggle="tab"><span class="glyphicon glyphicon-shopping-cart"></span>
                        Courses</a></li>
                    <li><a href="#messages" data-toggle="tab"><span class="glyphicon glyphicon-list"></span>
                        Perso</a></li>
                    <li><a href="#messages" data-toggle="tab"><span class="glyphicon glyphicon-plus"></span>
                        Nouvelle liste</a></li>
                </ul>

            </div>
            <div class="col-sm-9 cold-md-10" id='main-view' ng-controller="todoCtrl" >
                <form id="todo-form" ng-submit="addTodo()">
                    <input id="new-todo" placeholder="Que voulez-vous noter ?" ng-model="newTodo" />
                </form>
                <div class="view" ng-view>

                </div>


            </div>

        </div>
        <script src="js/jquery.js"></script>
        <script src="js/angular.js"></script>
        <script src="js/angular-route.js"></script>
        <script src="js/todolist.js"></script>
        <script src="js/controller.js"></script>

    </body>

</html>

收件箱.html

        <article ng-show="todos.length">
            <ul id="todo-list">
                <li ng-repeat="todo in todos" ng-class="{completed: todo.completed}">
                    <div class="view">
                        <input class="mark" type="checkbox" ng-model="todo.completed" />
                        <span>{{todo.title}}</span>

                        <span class="close" ng-click="removeTodo(todo)">x</span>
                    </div>
                </li>
            </ul>
            <div>
                <input id="mark-all" type="checkbox" ng-model="allChecked" ng-click="markAll(allChecked)" />
                <label class="btn btn-info" for="mark-all">Tout cocher</label>
                <button class="btn btn-danger" ng-click="clearCompletedTodos()">Supprimer les tâches cochées</button>
            </div>
        </article>

【问题讨论】：

标签： javascript angularjs ngroute

【解决方案1】：

当显式命名依赖项时（如您所做的那样），您需要首先将实际命名的依赖项作为字符串传递，然后将命名参数传递给您的函数。

todoList.config(['$routeProvider', function($routeProvider){}]);

这里$routeProvider 依赖必须显式命名为字符串，然后作为第一个参数传递给函数。使用这种方法可以在不中断的情况下缩小代码，因为 Angular 不再依赖于将参数命名为精确依赖项（以及其他好处）。

与上面类似，您的第二个错误是因为您有一个字符串作为函数参数，而它应该是一个变量名。

todoListController.controller('todoCtrl', ['$scope', function($scope){}]);

您还需要告诉您的 Angular 模块使用控制器，而不是创建一个新模块并将控制器放在上面。这样你的todoList 模块就知道todoListController

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

应该变成

var todoListController= angular.module('todoList');

【讨论】：

感谢您的解释，但是 todolist.config 行应该是什么？
我上面提供的配置行应该可以解决您的错误。