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

You're using angular 1.3 beta along with ng-route 1.2. Not sure if this is the issue but you should use the same version. — ms87
– ms87, Commented Aug 20, 2014 at 17:10
I had tried that as per reccomendation of someone a little more experienced with angularjs however it didnt rectify the issue. — JARRRRG
– JARRRRG, Commented Aug 20, 2014 at 18:16

Vikram Babu Nagineni · Accepted Answer · 2014-08-20 18:34:34Z

3

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.

edited Aug 20, 2014 at 18:34

answered Aug 20, 2014 at 18:04

Vikram Babu Nagineni

3,6096 gold badges28 silver badges34 bronze badges

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

Comments

Igor Malyk · Accepted Answer · 2014-08-20 18:06:10Z

1

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.

answered Aug 20, 2014 at 18:06

Igor Malyk

2,6562 gold badges27 silver badges34 bronze badges

Collectives™ on Stack Overflow

Angular-route issues - Route not executing

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related