admin管理员组

文章数量:1359218

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_ponents/angular/angular.js"></script>
  <script src="bower_ponents/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?

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_ponents/angular/angular.js"></script>
  <script src="bower_ponents/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?

  • javascript
  • angularjs
  • angular-routing
Share Improve this question edited Apr 14, 2016 at 8:35 kamal0808 asked Apr 14, 2016 at 7:09 kamal0808kamal0808 5251 gold badge8 silver badges22 bronze badges 7
  • May be this ng-href="#/ to this ng-href="/# ? – Litestone Commented Apr 14, 2016 at 7:17
  • @litestone - This reloads the page to index of localhost – kamal0808 Commented Apr 14, 2016 at 7:19
  • @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 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 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 Commented Apr 14, 2016 at 7:33
 |  Show 2 more ments

6 Answers 6

Reset to default 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

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.

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>

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

<script src="bower_ponents/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_ponents/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_ponents/angular-route/angular-route.min.js"></script>

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

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

Good luck

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');

}]);

本文标签： javascriptAngular routing doesn39t work for controllers with same module namesStack Overflow

版权声明：本文标题：javascript - Angular routing doesn&#39;t work for controllers with same module names - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1744082052a2587826.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。