我在努力使工作变得片面，而不是成功。
我在控制台有错误，告诉我一些事情:
1/$routeProvider说没有在todolist.js中定义，而ngRoute在module中声明，并请求angular-route.js2/它在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>
inbox.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>
当显式命名依赖项时(正如您正在做的那样)，您需要首先将实际命名的依赖项作为字符串传递，然后将命名参数传递给函数。
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');