admin管理员组文章数量:1305843
I'm trying to create a simple todo list app in Angular.js and am having difficulties getting routing and ng-view to work properly. I've been working primarily through examples of code written by Dan Wahlin Modules, Routes and Factories
Right now, when I run this code, I know that Angular has been started properly and functions but ng-view doesn't seem to know what my routes.js file is telling it to display, (my two partial files are just random text so I'll know when ng-view worked properly...). I think I have everything properly coded in my routes.js but can't quite figure out why ng-view still doesn't get processed by Angular. Can someone explain to me why ng-view is being ignored in my code?
Currently, here are the files I have:
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=".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' });
}]);
I'm trying to create a simple todo list app in Angular.js and am having difficulties getting routing and ng-view to work properly. I've been working primarily through examples of code written by Dan Wahlin Modules, Routes and Factories
Right now, when I run this code, I know that Angular has been started properly and functions but ng-view doesn't seem to know what my routes.js file is telling it to display, (my two partial files are just random text so I'll know when ng-view worked properly...). I think I have everything properly coded in my routes.js but can't quite figure out why ng-view still doesn't get processed by Angular. Can someone explain to me why ng-view is being ignored in my code?
Currently, here are the files I have:
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./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' });
}]);
4 Answers
Reset to default 5You should use 'templateUrl' & not 'templateURL', a working plunk for your sample is @ http://plnkr.co/edit/peugMW8c0AmMO8YumhO7?p=preview
-Bhaskara
The problem is that you're creating the module two times, in both controller.js and routes.js:
angular.module('todoApp', [])// creates the module 'todoApp'
// vs
angular.module('todoApp')// fetches the existing module 'todoApp'
Usual practice is to take controllers out of file with modules definition into separate files. Then this equation will be true: 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' });
}]);
controllers/UsersCtrl.js
todoApp.controller('UsersCtrl', function($scope) {
$scope.users = [];
});
controllers/TodoCtrl.js
todoApp.controller('TodoCtrl', function($scope) {
$scope.todos = [];
});
Don't forget to include all files in index.html.
If you want to see practical application of this principle then investigate angular-seed project.
I just had the same issue, whereby some of my routes were being ignored by Angular, and I thought I would just put my twopence worth in here. I know the question has been answered but my solution was different and it wasn't mentioned here.
Something else to look out for, which is so so simple, but so simple that I pletely overlooked it for TWO HOURS (yeh, I know...).
Make sure you have a forward slash at the start of your routing!!
.when('/routing/path', { ... });
instead of
.when('routing/path', { ... });
本文标签： javascriptAngularjs ngview ignoring routingStack Overflow
版权声明：本文标题：javascript - Angular.js ng-view ignoring routing - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1741719290a2394294.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论