Angular-route issues - Route not executing

Question

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

Answer 1

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.

Answer 2

Fixed the plunker . You used to call angular.module again and as a setter instead of using it as a getter.

EDIT: I'm one minute late =) You can use Vikram Babu's answer and remove the wrapping closures completely. IF you need to use the closures just use var app = angular.module("githubViewer"); instead of var app = angular.module("githubViewer", []); in order not to overwrite the module definition.