AngularJS - Why the application is not routing?

Question

I'm trying to make an AngularJS application but I don't understand why it doesn't route correctly, I followed some guides but haven´t made it work yet.

Here is the code:

index.html

<!DOCTYPE html>
<html lang="en" ng-app="App">
<head>
<meta charset="UTF-8">
<title>Example App</title>
</head>
<body>

    <div ng-view></div>

    <!-- Vendor libraries -->
    <script src="lib/jquery-2.1.4.min.js"></script>
    <script src="lib/angular.min.js"></script>
    <script src="lib/angular-route.min.js"></script>
    <!-- Application Files -->
    <script src="app/app.js"></script>
    <script src="app/home/controllers/HomeController.js"></script>
</body>
</html>

app.js

(function() {
    'use strict';

    var app = angular
            .module('App', ['ngRoute']);

    app.config(function($routeProvider) {
        $routeProvider
            .when('/', {
                templateUrl: 'home/views/index.html',
                controller: 'HomeController',
                controllerAs: 'home'
            })
            .otherwise({
                redirectTo: '/'
            });
    });
})();

HomeController.js

(function() {
    'use strict';

    angular
       .module('App')
       .controller('HomeController', HomeController);

    function HomeController(){
        var home = this;
    }
})();

home's index.html

<div>
   Example text
</div>

Thanks in advance

Perhaps you can post the most important part of your code here as a snippet instead of referring to an external link? This post will be out-of-date as soon as the link doesn't work anymore. — Bryan Oemar
– Bryan Oemar, Commented Nov 24, 2015 at 22:25
I don't think you need to be wrapping your code in immediately executing functions. The fact you have included the ng-app attribute means angular will execute your code when required — jpmcc
– jpmcc, Commented Nov 24, 2015 at 22:45
This works properly in a plunker (only changing the name of the home index to a plunker friendly format). If this is not working in your environment, there is something wrong that you are not showing here. — Claies
– Claies, Commented Nov 24, 2015 at 23:12
If I had to guess, based on what you have described here so far, and the only change that I made in the example plunker, I would imagine that your templateUrl path isn't valid. — Claies
– Claies, Commented Nov 24, 2015 at 23:14

Zack Tanner · Accepted Answer · 2015-11-24 22:42:51Z

2

Are you seeing errors in the console? You're probably getting an error relating to the controller not being found, as 'home/controllers/HomeController' is not a proper way to reference HomeController. It should instead read: 'HomeController'. Angular will do the work to traverse your controllers and find one that matches that string.

Here's an updated app.js:

(function() {
    'use strict';

    var app = angular
            .module('App', ['ngRoute']);

    app.config(function($routeProvider) {
        $routeProvider
            .when('/', {
                templateUrl: 'home/views/index.html',
                controller: 'HomeController',
                controllerAs: 'home'
            })
            .otherwise({
                redirectTo: '/'
            });
    });
})();

Additionally, in HomeController.js, you are re-instantiating the module 'App' by including the brackets after the name. Instead, modify it to more succinctly read:

(function() {
    'use strict';

    angular
       .module('App')
       .controller('HomeController', HomeController);

    function HomeController(){
        var home = this;
    }
})();

answered Nov 24, 2015 at 22:42

Zack Tanner

2,5801 gold badge29 silver badges45 bronze badges

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

3 Comments

forkfork Over a year ago

I see no error in console, I made the changes you suggested and still not seeing anything.

Zack Tanner Over a year ago

Are both angular and angular-route loading properly?

forkfork Over a year ago

Yes they are, I found thanks to Claies that the templateUrl was not working properly. But your suggestions helped me a lot too. Thanks.

Collectives™ on Stack Overflow

AngularJS - Why the application is not routing?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related