CODEWITHSUNDEEP
angularjsngroute
yakoub abaya
yakoub abaya

Reputation: 69

angularjs ngRoute not working

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 .

Upvotes: 2

Views: 19584

Answers (4)

Edison D&#39;souza
Edison D&#39;souza

Reputation: 4640

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

Upvotes: 0

sagar43
sagar43

Reputation: 3456

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

Upvotes: 2

Kalhan.Toress
Kalhan.Toress

Reputation: 21901

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

Upvotes: 0

Adrian B.
Adrian B.

Reputation: 1570

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

Upvotes: 0

Related Questions