Angular.js ng-view ignoring routing

Question

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

Bhaskara Kempaiah · Accepted Answer · 2013-06-09 07:56:20Z

5

You should use 'templateUrl' & not 'templateURL', a working plunk for your sample is @ http://plnkr.co/edit/peugMW8c0AmMO8YumhO7?p=preview

-Bhaskara

answered Jun 9, 2013 at 7:56

Bhaskara Kempaiah

2171 silver badge1 bronze badge

Sign up to request clarification or add additional context in comments.

3 Comments

Shawn Taylor Over a year ago

That was it!!! thank you so much! can't believe it was something that small, I would have never caught that.

Desolator Over a year ago

most of tutorials I've seen them work with templateURL. that's weird behavior :\

garyrob Over a year ago

Oh my god. I was having the exact same problem and found this answer in stack overflow, after an hour of trying to figure it out on my own!

joakimbl · Accepted Answer · 2013-06-09 08:10:47Z

2

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'

edited Jun 9, 2013 at 8:10

answered Jun 9, 2013 at 7:28

joakimbl

18.1k5 gold badges57 silver badges53 bronze badges

3 Comments

Shawn Taylor Over a year ago

oh ok! do you know if there is a standard practice as to where the module is created?

joakimbl Over a year ago

I think it's normal to create it with the route config, and fetch it in controllers.js

Shawn Taylor Over a year ago

so I ended up removing the creation of another 'todoApp' module from controllers.js and instead used the syntax for fetching it (it is now created in routes.js), but ng-view is still ignored in my html..

Dmytro Evseev · Accepted Answer · 2013-10-17 10:44:04Z

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.

Stuart · Accepted Answer · 2015-10-21 08:08:12Z

0

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 completely 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', { ... });

answered Oct 21, 2015 at 8:08

Stuart

1,5745 gold badges29 silver badges45 bronze badges

Collectives™ on Stack Overflow

Angular.js ng-view ignoring routing

4 Answers 4

3 Comments

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related