1

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

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

目前，这是我拥有的文件：

索引.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>

控制器.js

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

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

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

路由.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' });
}]);
4

4 回答 4

5

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

-巴斯卡拉

于 2013-06-09T07:56:20.023 回答
2

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

angular.module('todoApp', [])// creates the module 'todoApp'
// vs
angular.module('todoApp')// fetches the existing module 'todoApp'
于 2013-06-09T07:28:02.950 回答
1

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

应用程序.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项目。

于 2013-06-09T07:53:17.200 回答
0

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

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

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

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

代替

.when('routing/path', { ... });
于 2015-10-21T08:08:12.530 回答