angularjs ngRoute not working

angularjs ngroute

19,526

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

19,526

Author by

yakoub abaya

Updated on June 04, 2022

Comments

yakoub abaya almost 2 years

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 .

yakoub abaya over 9 years

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 .
Kutyel over 9 years

Isn' that just a copy of what I just wrote?
Kalhan.Toress over 9 years

lol, noo, do u have router function, check the otherwise route check the when URL
Adrian B. over 9 years

@Kutyel: I could ask you the same thing :)
yakoub abaya over 9 years

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 9 years

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

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 their be a way to use relative urls ? i guess there should and i will try to fix it .
Kalhan.Toress over 9 years

lol, then you have specify route,route1,route2 diferently plnkr.co/edit/dIEf2B5Ln8wEPXAIWwot?p=preview