ngRoute not working

Question

My scripts are :

index.html

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <title>My Application</title>
</head>
<body>
    <div ng-view></div>

    <script src="/assets/vendor/angular/angular-1.2.16.min.js"></script>
    <script src="/assets/vendor/angular/extras/angular-route.js"></script>
    <script src="/assets/myapp/myApp.js"></script>
</body>
</html>

myApp.js

(function () {
    angular.module('myApp', ['ngRoute'])
           .config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
               $routeProvider.
                 when('/', {
                     template: '<h1>Home</h1>',
                     controller: function () {
                         console.log('Home');
                     }
                 }).
                 when('/books', {
                     template: '<h1>Books</h1>',
                     controller: function () {
                         console.log('Books');
                     }
                 });
               $locationProvider.html5Mode(true);
               console.log('routes configured');
           }]);
})();

I've wasted a lot of time trying to figure out what the problem might be with no luck. Am I missing something silly? thanks in advance for the help.

Make sure there is no error in console and check that all JS files are loaded. Or create fiddle. — Jay Shukla, May 20 '14 at 09:46
that's what's driving me nuts, all files are loaded and there are absolutely no errors in the console. — snajahi, May 20 '14 at 09:47
Thank you Annsh for spotting the ridiculous mistake, I don't know how I've missed that one, (I had the `ng-app` attribute on the `head` tag instead of the `html` tag), problem solved. — snajahi, May 20 '14 at 10:00
As @Annsh just edited, you had `ng-app="myApp"` in your `` tag. Try putting it on the ``. — Vucko, May 20 '14 at 10:00
It would be a good idea to promote the comment above as valid response. — Braulio, May 20 '14 at 10:03

score 1 · Answer 1 · answered May 20 '14 at 09:54

1

Are you hosting your application in the root of your server? If not, then you will need to use the tag below in your head tag.

<base href="PATH_HERE" />

In addition, can you comment out the $locationProvider.html5Mode(true) line and get your app working in hash routing mode first?

answered May 20 '14 at 09:54

romiem

8,360
7
29
36

Please say more. I am experiencing this problem in an webapp whose server is reverse proxied under nginx. nginx has no idea where the app route is as that is the business of the backend webserver. Should this work? – May 22 '14 at 23:01
The base tag is only used if you are hosting your angular application somewhere other than the root of your web server. For example (and I am assuming html5Mode is off), if you had a server http://myserver.com and your angular application was hosted in the root, then your angular routes would be defined at http://myserver.com/#/someroute. However, if you were hosting your angular app at http://myserver.com/subdirectory/ then you would have to set the href of the base tag to /subdirectory/ so that your routes correctly resolve to http://myserver.com/subdirectory/#/someroute – romiem May 23 '14 at 11:01

score 0 · Answer 2 · answered May 20 '14 at 09:50

0

Just a question, but it is possible to add a function in the controller -> controller:function()? Because normally i would do it like this. controller:'mainController' and put the function in the mainController.

answered May 20 '14 at 09:50

Mike

143
2
12

ngRoute not working

2 Answers2

Linked