Search code examples
javascriptangularjsangularjs-routing

Angular-route issues - Route not executing


I've been following a set of tutorials from Scott Allen. I have tried to emulate what he does down to the bone I believe however my angular route is just not being executed.

I have a view called main.html and a shell/layout view called index.html. Inside the index.html I have ng-view in the body tag and I have a route in a script file called app.js as follows:

(function(){

  var app = angular.module("githubViewer", ["ngRoute"]);

  app.config(function($routeProvider){
    $routeProvider
        .when("/main", {
          templateUrl: "main.html",
          controller: "MainController"
        })
        .when("/user/:username", {
          templateUrl: "user.html",
          controller: "UserController"
        })
        .otherwise({redirectTo:"/main"});
  });

}());

Here is the index.html's script imports

 <script data-require="angular.js@*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
    <script src="https://code.angularjs.org/1.2.20/angular-route.js"></script>

The way I know that the route isn't being hit is because the main.html's code isn't being passed back to the page.

Has something perhaps changed in the way the angular-route is used?

Also here is a link to my plunk : http://plnkr.co/edit/Ew73QexRoDZlrvPG2UA1?p=preview


Solution

  • You are creating same angular module multiple times. Creating same angular module number of times just fails. So, create angular module once and use it in other places as follows

    var app = angular.module('FirstModule');  // app.js
    app.controller // controller.js
    app.factory  // service.js
    app.directive  // directives.js
    

    Here is the updated plunkr.

    http://plnkr.co/edit/qWHkzj9v6nGhhb7MjDDf?p=preview

    I have changed the following self executing function to normal functions as they create closures and the module created in app.js is not available in other files.

    (function(){
    
    }());
    

    Otherwise, you can pass module created in app.js as parameter to all self executing functions in other files.