Angular.js ng-view 忽略路由答案

【问题标题】：Angular.js ng-view ignoring routingAngular.js ng-view 忽略路由
【发布时间】：2013-06-05 03:09:46
【问题描述】：

我正在尝试在 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' });
}]);

【问题讨论】：

标签： javascript html angularjs routes url-routing

【解决方案1】：

您应该使用“templateUrl”而不是“templateURL”，您的示例的有效插件是@http://plnkr.co/edit/peugMW8c0AmMO8YumhO7?p=preview

-巴斯卡拉

【讨论】：

就是这样！！！太感谢了！不敢相信它是那么小的东西，我永远不会抓住它。
我见过的大多数教程都使用 templateURL。这是奇怪的行为：\
天哪。在尝试自己解决一个小时后，我遇到了完全相同的问题，并在堆栈溢出中找到了这个答案！

【解决方案2】：

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

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

【讨论】：

哦，好吧！你知道在哪里创建模块是否有标准做法？
我认为用路由配置创建它，并在controllers.js中获取它是正常的
所以我最终从 controllers.js 中删除了另一个“todoApp”模块的创建，而是使用了获取它的语法（它现在在 routes.js 中创建），但 ng-view 仍然在我的 html 中被忽略了..

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

【讨论】：

【解决方案4】：

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

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

确保在路由的开头有一个正斜杠！！

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

而不是

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

【讨论】：