Angular.js ng-view忽略路由

Question

我试图在Angular.js中创建一个简单的待办事项列表应用程序，并且在使路由和ng-view正常工作方面遇到困难。 我主要通过Dan Wahlin 模块，路线和工厂编写的代码示例进行工作。

现在，当我运行此代码时，我知道Angular已正确启动并起作用，但是ng-view似乎不知道我的route.js文件告诉它显示什么（（我的两个部分文件只是随机文本）所以我会知道ng-view何时正常工作...）。 我想我的routes.js中已正确编码了所有内容，但无法弄清楚为什么Angular仍然无法处理ng-view。 有人可以向我解释为什么我的代码中会忽略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'而不是'templateURL'，可以工作的样本为@ http://plnkr.co/edit/peugMW8c0AmMO8YumhO7?p=preview

-巴斯卡拉

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中包含所有文件。

如果您想了解该原理的实际应用，请研究有角种子项目。

Answer 4

我遇到了同样的问题，Angular忽略了我的一些路线，我想我只想在这里花两便士。 我知道问题已经回答，但我的解决方案有所不同，这里没有提及。

还有其他需要注意的事情，它是如此简单，却是如此简单，以至于我在两个小时内完全忽略了它（是的，我知道...）。

确保在路由开始时有一个正斜杠！！

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

代替

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

Angular.js ng-view忽略路由

问题描述

4 个解决方案

解决方案1
5 已采纳 2013-06-09 07:56:20

解决方案2
2 2013-06-09 07:28:02

解决方案3
1 2013-06-09 07:53:17

解决方案4
0 2015-10-21 08:08:12

Angular.js ng-view忽略路由

问题描述

4 个解决方案

解决方案1 5 已采纳 2013-06-09 07:56:20

解决方案2 2 2013-06-09 07:28:02

解决方案3 1 2013-06-09 07:53:17

解决方案4 0 2015-10-21 08:08:12

解决方案1
5 已采纳 2013-06-09 07:56:20

解决方案2
2 2013-06-09 07:28:02

解决方案3
1 2013-06-09 07:53:17

解决方案4
0 2015-10-21 08:08:12