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?
6 answers
solution1
5 2016-04-14 07:12:26
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
solution2
4 ACCPTED 2016-04-14 09:02:55
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.
solution3
0 2016-04-14 07:39:17
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>
solution4
0 2016-04-14 08:01:26
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>
solution5
0 2016-04-14 08:14:43
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
partialsfolder and try
Good luck
solution6
0 2016-04-14 08:52:32
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');
}]);
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.