Angular routing doesn't work for controllers with same module names

Question

This is a simple angular app which seems to have a silly mistake in the code, I'm not quite able to figure it out. The problem lies with the routing. Clicking on the links doesn't take me to the specified template url, instead reloads the same index.html page.

However, the link in the address bar changes to:

http://localhost:8000/app/#/stats

http://localhost:8000/app/#/sports

on clicking the respective links.

index.html

<!doctype html>
<html lang="en" ng-app="myApp">
<head>
  <meta charset="utf-8">
  <title>My AngularJS App</title>
  <link rel="stylesheet" href="css/style.css"/>

  <script src="bower_components/angular/angular.js"></script>
  <script src="bower_components/angular-route/angular-route.js"></script>
  <script src="js/app.js"></script>
  <script src="js/controllers/myStats.js"></script>
  <script src="js/controllers/mySports.js"></script>

</head>
<body>
  <div class="container">
    <a ng-href="#/stats">My Stats</a>
    <a ng-href="#/sports">My Sports</a>
  </div>
  <div ng-view></div>
</body>
</html>

app.js

'use strict';
angular.module('myApp', ['ngRoute'])
.config(['$routeProvider', function($routeProvider){
  $routeProvider
      .when('/stats', {
        templateUrl: 'partials/stats.html'


      })
      .when('/sports', {
        templateUrl: 'partials/sports.html'
      })
}]);

I hope there's nothing wrong with my directory structure:

EDIT:

sharing code for controllers, the problem is in the controllers. It has to do something with angular modules having same names, although this was how I was taught.

js/controllers/mySports.js

angular.module('myApp',[])
    .controller('mySports',['$scope', function($scope){
        console.log('just checking');

    }]);

What worked: Changing module name in mySports.js from myApp to mySports, and then injecting mySports as a dependency in app.js.

Updated app.js to this:

'use strict';
    angular.module('myApp', ['ngRoute','mySports'])
    .config(['$routeProvider', function($routeProvider){
      $routeProvider
          .when('/stats', {
            templateUrl: 'partials/stats.html'
          })
          .when('/sports', {
            templateUrl: 'partials/sports.html'
            controller: mySports,
          })
    }]);

EDIT

What still remains the question is to why change the module names of controllers and then inject as dependencies into app.js? Why not have the same module names?

@ddepablo - this takes me to a page that simply says "Not found". On looking in Networks tab in Dev tools, it gives a 404 — kamal0808
– kamal0808, Commented Apr 14, 2016 at 7:22
This is working fine on my machine. Don't know what's the issue. Try running http-server from the root directory and see the log for issues — Ravi Tiwari
– Ravi Tiwari, Commented Apr 14, 2016 at 7:32
Are you sure ng-app="myApp" can be defined on the <html>. I have almost the same code except for ng-app directive declared on <body>. — Toxantron
– Toxantron, Commented Apr 14, 2016 at 7:33

Sajeetharan · Accepted Answer · 2016-04-14 07:30:56Z

5

You need to inject ngRoute as dependency to the application

Change

From:

angular.module('myApp', [])

To:

angular.module('myApp',['ngRoute'])

Here is the working Application

edited Apr 14, 2016 at 7:30

answered Apr 14, 2016 at 7:12

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

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

10 Comments

kamal0808 Over a year ago

Oh, sorry about that. ngRoute was there before, I removed it for experimentation. Edited the question now, it still doesn't work. There seems to be something else wrong

Toxantron Over a year ago

That is it! The app in your URL. I recall angular having problems with non-root index pages.

kamal0808 Over a year ago

@Toxantron - I don't understand. Do you want me to remove app directory somehow, and launch the application from "localhost:8000" instead of "localhost:8000/app" ?

kamal0808 Over a year ago

@Sajeetharan - yours work. I changed the code the way you have, removed the directory structure to have everything in the same directory level, and included controllers in the main app.js file instead of having them separately. It did not make any changes at all. I think there's something wrong with the dependencies, or may be something else but not routing

Sajeetharan Over a year ago

@kamal0808 create a plunker for your issue

|

C14L · Accepted Answer · 2016-04-14 09:02:55Z

4

Works: http://codepen.io/C14L/pen/oxqEZE

Problem is, that you are re-defing your main module, when you're defining your "mySports" controller here:

angular.module('myApp',[]).controller('mySports',[...

There is a ',[]' and that overwrites the ngRoute previously injected. Do instead

angular.module('myApp').controller('mySports',[...

without the ,[] part, then it should work.

That is also the reason why injecting mySports into myApp works, because myApp's injections array doesn't get overwritten in that case.

answered Apr 14, 2016 at 9:02

C14L

12.6k4 gold badges43 silver badges53 bronze badges

1 Comment

kamal0808 Over a year ago

Perfect explanation, this works. Removing the '[]' totally makes sense, as it was overwriting the main dependency array.

Toxantron · Accepted Answer · 2016-04-14 07:39:17Z

0

Check the angular documentation for relative links. The app you have in your URL needs to be declared as base like this:

<head>
  <base href="/app/">
</head>

answered Apr 14, 2016 at 7:39

Toxantron

2,40615 silver badges24 bronze badges

3 Comments

kamal0808 Over a year ago

I gave this a try. Doesn't make any changes. Moreover, on clicking the links, the address bar does change the urls and include '/app' after 'localhost:8000'. I think it's smart enough to check for itself that the project lies in app directory

Toxantron Over a year ago

But isn't this where it supposed to be? As far as I understand your application is hosted at localhost:8080/app

kamal0808 Over a year ago

yes, my application is hosted at "localhost:8000/app".

Ivan Lopez · Accepted Answer · 2016-04-14 08:12:00Z

0

In your script of the HTML, try to add the min.js file instead of the .js only, thats a example:

<script src="bower_components/angular-route/angular-route.min.js"></script>

You should have a min.js in that folder, AND! very important, dont add first the route files, this may be a good add:

<script src="bower_components/angular/angular.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers/myStats.js"></script>
<script src="js/controllers/mySports.js"></script>
<script src="bower_components/angular-route/angular-route.min.js"></script>

edited Apr 14, 2016 at 8:12

answered Apr 14, 2016 at 8:01

Ivan Lopez

9812 bronze badges

3 Comments

kamal0808 Over a year ago

that seems to be a really bad idea, it will say angular not found in app.js

Ivan Lopez Over a year ago

true my fail, check it now, but the important is the min.js

kamal0808 Over a year ago

I don't see how minified files may change the app behaviour. However, I found a solution, see the question update. But the solution still doesn't answer the original question, see if you can help

notnotundefined · Accepted Answer · 2016-04-14 08:14:43Z

0

I see it perfectly OK. I have working example here https://plnkr.co/edit/Thm6Xw66BUmjxeGydFFJ?p=preview Just couple of checks you can consider

The file permission. It should be (755)
The path. Take the files outside the partials folder and try

Good luck

answered Apr 14, 2016 at 8:14

notnotundefined

3,8314 gold badges35 silver badges39 bronze badges

2 Comments

kamal0808 Over a year ago

The file permissions are 755. Taking outside partials folder doesn't make sense to me, there are meant to be partial views. I want them in partials folder. Do you want me to change the path specified somewhere?

kamal0808 Over a year ago

The console has no errors. Please check question update

Naitik Adani · Accepted Answer · 2016-04-14 08:52:32Z

0

For the updated question, to use the same module everywhere you could define your module as follows :

var app = angular.module('myApp', ['ngRoute']);
app.config(['$routeProvider', function($routeProvider){
 $routeProvider
  .when('/stats', {
    templateUrl: 'partials/stats.html'
  })
  .when('/sports', {
    templateUrl: 'partials/sports.html'
  })
}]);

and your controllers as:

app.controller('mySports',['$scope', function($scope){
    console.log('just checking');

}]);

answered Apr 14, 2016 at 8:52

Naitik Adani

2361 gold badge2 silver badges10 bronze badges

3 Comments

kamal0808 Over a year ago

Hey this works. But how do the controllers access the variable "app" without defining them first in their own js files? Secondly, I had studied that declaring modules in variables and then reusing variables is a bad practice. Why not define the modules everytime when a controller is to be defined?

Naitik Adani Over a year ago

Its just that the variable in which you store the main angular module, app in the code above, gets stored globally and you can access this any where. Try console.log(app) and check in firebug.

kamal0808 Over a year ago

Understood. Thus, any variable declared in js files is a global variable I assume. Anyway, it works without variables too. Check the best answer that I chose

Collectives™ on Stack Overflow

Angular routing doesn't work for controllers with same module names

6 Answers 6

10 Comments

1 Comment

3 Comments

3 Comments

2 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

10 Comments

1 Comment

3 Comments

3 Comments

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related