AngularJS Routing Function is not working

Question

My Angular Routing Function is not working - There is a page load, but without the 'home.html' file. This is my code:

Index.html

<html  ng-app="App" class="no-js" lang="en" >
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.min.js"></script>
    <script src="app.js"></script>    
  </head>

  <body ng-cloak> 
  <div ng-controller="main">
      <div ng-view></div>
    </div>
  </body>
</html>

app.js

(function () {
'use strict';

angular
    .module('App', ['ngRoute']) 
    .controller('$routeProvider', router)
    .controller('main', main);

function router($routeProvider) {

    $routeProvider.
          when('/', {
            templateUrl: '_pages/home.html',
            controller: 'main'
          });

};
function main ($scope) {
console.log("done");
}

Are you sure the directory structure is correct? EDIT: is this node file in the same directory as the _pages folder? — Olly
– Olly, Commented Apr 27, 2016 at 20:01
Directory should be fine - home.html is in a subfolder (file above: index.html is one folder level up) — SaSH_17
– SaSH_17, Commented Apr 27, 2016 at 20:08
the router stuff should be in .config call, you have it in a controller — reptilicus
– reptilicus, Commented Apr 27, 2016 at 20:18
when I change controller to config, then there is a '[$injector:modulerr]' error... — SaSH_17
– SaSH_17, Commented Apr 27, 2016 at 20:21

József Cserkó · Accepted Answer · 2016-04-27 20:22:58Z

3

Angular $providers working just in config state. Eg:

angular
.module('App', ['ngRoute']) 
.config(['$routeProvider', router]);
function router($routeProvider) {

    $routeProvider.
      when('/', {
        templateUrl: '_pages/home.html',
        controller: 'main'
      });

};

answered Apr 27, 2016 at 20:22

József Cserkó

2992 silver badges9 bronze badges

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

Comments

Aditya Singh · Accepted Answer · 2016-04-27 20:30:29Z

3

The route configuration is done in config and not controller. Change your code as below:

(function () {
  'use strict';

   angular
    .module('App', ['ngRoute']) 
    .config(router)
    .controller('main', main);

  function router($routeProvider) {

    $routeProvider.
      when('/', {
        templateUrl: '_pages/home.html',
        controller: 'main'
      });

  };

  function main ($scope) {
    console.log("done");
  }
});

edited Apr 27, 2016 at 20:30

answered Apr 27, 2016 at 20:21

Aditya Singh

16.8k15 gold badges49 silver badges70 bronze badges

1 Comment

József Cserkó Over a year ago

Oops. We answered in same time. Your solution is great. :)

Collectives™ on Stack Overflow

AngularJS Routing Function is not working

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related