Question

我正在尝试在Angular.js中创建一个简单的待办事项列表应用程序，并且很难让路由和ng-view正常工作。我一直在主要通过Dan Wahlin编写的代码示例Modules, Routes and Factories

现在，当我运行此代码时，我知道Angular已经正常启动并且功能但是ng-view似乎不知道我的routes.js文件告诉它显示什么，（我的两个部分文件是只是随机文本，所以我会知道ng-view何时正常工作...）。我想我的routes.js中的所有内容都已正确编码，但无法弄清楚为什么ng-view仍然没有被Angular处理。有人可以向我解释为什么在我的代码中忽略了ng-view？

目前，这是我的文件：

的index.html

<!doctype html>
<html lang="en" ng-app="todoApp">
<head>
    <link rel="stylesheet" type="text/css" src="css/app.css">
    <title>Todo App</title>
</head>
<body>
<div ng-view></div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js">    </script>
<script src="js/routes.js"></script>
<script src="js/controllers.js"></script>
</body>

controller.js

var todoApp = angular.module('todoApp');

todoApp.controller('UsersCtrl', function($scope) {
    $scope.users = [];
});

todoApp.controller('TodoCtrl', function($scope) {
    $scope.todos = [];
});

routes.js

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

todoApp.config(['$routeProvider', function($routeProvider) {
    $routeProvider.when('/users', {templateURL: 'partials/users.html', controller: 'UsersCtrl'});
    $routeProvider.when('/todos', {templateURL: 'partials/todos.html', controller: 'TodoCtrl' });
    $routeProvider.otherwise({ redirectTo: '/users' });
}]);

Answer 1

你应该使用'templateUrl'＆amp;不是'templateURL'，您的样本的工作插件是@ http://plnkr.co/edit/peugMW8c0AmMO8YumhO7?p=preview

-Bhaskara

Answer 2

问题是你在controller.js和routes.js中创建了两次模块：

angular.module('todoApp', [])// creates the module 'todoApp'
// vs
angular.module('todoApp')// fetches the existing module 'todoApp'

Answer 3

通常的做法是将带有模块定义的控制器从文件中取出到单独的文件中。那么这个等式就是真的：1 file = 1 piece of application：

app.js

var todoApp = angular.module('todoApp', [])
    .config(['$routeProvider', function($routeProvider) {
        $routeProvider.when('/users', {templateURL: 'partials/users.html', controller: 'UsersCtrl'});
        $routeProvider.when('/todos', {templateURL: 'partials/todos.html', controller: 'TodoCtrl' });
        $routeProvider.otherwise({ redirectTo: '/users' });
    }]);

控制器/ UsersCtrl.js

todoApp.controller('UsersCtrl', function($scope) {
    $scope.users = [];
});

控制器/ TodoCtrl.js

todoApp.controller('TodoCtrl', function($scope) {
    $scope.todos = [];
});

不要忘记在index.html中包含所有文件。

如果您想查看此原则的实际应用，请调查angular-seed项目。

Answer 4

我只是遇到了同样的问题，我的一些路线被Angular忽略了，我想我会把我的两便士放在这里。我知道问题已得到解答，但我的解决方案有所不同，此处未提及。

要注意的其他事情，这是如此简单，但又如此简单以至于我完全忽略了两个小时（是的，我知道......）。

确保在路由开始时有正斜杠!!

.when('/routing/path', { ... });

而不是

.when('routing/path', { ... });

Angular.js ng-view忽略路由

4 个答案: