angularjs ngRoute not working

Question

ngRoute not working while no errors are reported to console .

given no errors to console, how is it possible to follow execution of ngRoute procedures ?

i saw examples using $locationProvider.html5Mode(true), i don't understand when that should be used but i don't think it is required to make ngRoute work.

index.html has navigation links and ngView :

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <script src="bower_components/angular/angular.js"> </script>
  <script src="bower_components/angular-route/angular-route.js"> </script>
  <script src="main.js"> </script>
</head>

<body ng-app="Main">
<ul>
  <li> <a href="#content/first"> first partial </a> </li>
  <li> <a href="#content/second"> second partial </a> </li>
</ul>
<div ng-view></div>

</body>
</html>

main.js defines the router and the controllers :

var Main = angular.module('Main', ['ngRoute']);

function router($routeProvider) {

 var route = {templateUrl: 'partials/default.html'};
  $routeProvider.when('', route);

  route = {
    templateUrl: 'partials/first.html',
    controller: 'first'
  };
  $routeProvider.when('content/first', route);

  route = {
    templateUrl: 'partials/second.html',
    controller: 'second'
  };
  $routeProvider.when('content/second', route);
}

Main.config(['$routeProvider', router]);

Main.controller('first', function($scope) {
  $scope.list = [1,2,3,4,5];
});

Main.controller('second', function($scope) {
  $scope.list = [1,2,3];
});

partials simply make use of ngRepeat:

<header> First content </header>
<p ng-repeat="iter in list">
  first
</p>

solved : my problem was that my whole application is located under /ang/ prefix, and after adding that prefix to urls now it is working . shouldn't there be a way to use relative urls ? i guess there should and i will try to fix it .

the problem is NOT with the different syntax as everyone suggested, and that is alarming to the fact many JS developer do not in fact understand the one line syntax that they are using everywhere .

I don't see where are you calling your controller inside your html... — Kutyel
– Kutyel, Commented Dec 10, 2014 at 7:34
the controller shouldn't be called inside html since it is done using $routeProvider "when" clause . — yakoub abaya
– yakoub abaya, Commented Dec 10, 2014 at 7:37
You are missusing the $routeProvider, why don't you just follow the docs? — Kutyel
– Kutyel, Commented Dec 10, 2014 at 7:42

sagar43 · Accepted Answer · 2014-12-10 08:04:52Z

Please check this code HTML code

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular-route.js"> </script>
  <script src="script.js"> </script>
</head>

<body ng-app="Main">
<ul>
  <li> <a href="#/content/first"> first partial </a> </li>
  <li> <a href="#/content/second"> second partial </a> </li>
</ul>
<div ng-view></div>

</body>
</html>

Js file

var app = angular.module('Main', ['ngRoute']);

app.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
 $routeProvider.
      when('/content/first', {
        templateUrl: 'first.html', 
        controller: 'first'
      }).
      when('/content/second', {
        templateUrl: 'second.html',
        controller: 'second'
      }); 
}]); 

app.controller('first', function($scope) {
  $scope.list = [1,2,3,4,5];
});

app.controller('second', function($scope) {
  $scope.list = [1,2,3];
});

first page HTML

<header> First content </header>
<p ng-repeat="item in list">
{{item}}
</p>

here is your working code click

Adrian B. · Accepted Answer · 2014-12-10 07:40:21Z

0

Do not reuse the route object as it might cause problems. Consider using it in the form (as suggested by the docs https://docs.angularjs.org/api/ngRoute/service/$route#example ):

$routeProvider
   .when('content/second', {
    templateUrl: 'partials/second.html',
    controller: 'second'
});

If you want to debug the routes that angular goes through, you might want to look at angular's interceptors: https://docs.angularjs.org/api/ng/service/$http#interceptors

Also, $locationProvider.html5Mode(true) is not needed to make ngRoute work. It is simply a way of defining how the URLs should look like and work. in HTML mode you can change the links to not use # anymore and simply be www.yoursite.com/app/content/second instead of www.yoursite.com/app#content/second

answered Dec 10, 2014 at 7:40

Adrian B.

1,6121 gold badge22 silver badges40 bronze badges

1 Comment

yakoub abaya Over a year ago

changed code so that different route objects are used for each when clause . i disagree with how JS developers write single line code, it is bad practice in my opinion .

Kalhan · Accepted Answer · 2014-12-10 07:50:58Z

0

your route configuration is not correct, you assume route function is execute for each and every link u click but its not.

so your route function should be like

  function router($routeProvider) {

      $routeProvider.
      when('/content/first', {
        templateUrl: 'partials/first.html',
        controller: 'first'
      }).
      when('/content/second', {
        templateUrl: 'partials/second.html',
        controller: 'second'
      }).
      otherwise({
        templateUrl: 'partials/default.html'
      });
  }

note that urls should be like <a href="#/content/first"> // note the slash after #

to match that the routes in route function should be like when('/content/first', { note the leading slash

here is the working Plunker

answered Dec 10, 2014 at 7:50

Kalhan

21.9k8 gold badges71 silver badges96 bronze badges

7 Comments

Kutyel Over a year ago

Isn' that just a copy of what I just wrote?

Kalhan Over a year ago

lol, noo, do u have router function, check the otherwise route check the when URL

Adrian B. Over a year ago

@Kutyel: I could ask you the same thing :)

yakoub abaya Over a year ago

i am looking at your Plunker example to discover my problem, but the different syntax should not make a difference only that my version has better code readability .

yakoub abaya Over a year ago

because JS method of one line nested objects makes it difficult to follow code blocks . the nesting brackets can confuse people .

|

Edison D'souza · Accepted Answer · 2017-01-14 08:19:21Z

0

Define your Routes in routes.js

var route = angular.module('route', ['ngRoute']);

route.config(function ($routeProvider) {
    $routeProvider
        .when("/", {
            templateUrl: "views/home.html",
            controller : 'homeCtrl'
        })
        .when("/home", {
            templateUrl: "views/home.html",
            controller : 'homeCtrl'
        })
        .when("/product", {
            templateUrl: "views/product-info.html"
        })
        .otherwise({redirectTo :'/'});
});

Attach the router to your Main Module.

angular.module('myApp', ['route']);

Import both the scripts in your index.html

answered Jan 14, 2017 at 8:19

Edison D'souza

4,6405 gold badges30 silver badges40 bronze badges

Collectives™ on Stack Overflow

angularjs ngRoute not working

4 Answers 4

Comments

1 Comment

7 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related