ngRoute does not fire in angularjs controller

Issue

I have created a simple application to test ngRoute. I have a main page called index.html with one link to a page called “informationdisplay.html”. I have setup the route in the controller of the main page but it doesn’t function.

Below is index.html code

<html>

 <head>
   <title>Ng route test</title>
       <script    

src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"> 
       </script>
       <script type="text/javascript" src="Scripts/main.js"></script>
</head>


<body>
  <h2> Select Location from List</h2>
  <a href="#info">Information</a>      
</body>    
</html>

My code in the controller

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

mainApp.config(function ($routeProvider) {

    $routeProvider.when('/info', {
        templateUrl: 'informationdisplay.html',
        controller: 'informationController'
    }).otherwise({ redirectTo: '/' });

});

mainApp.controller('mainController', function ($scope,$rootScope) {
   });

Solution

You are missed to configure several things.

  1. ng-view directive should be added index.html so that route template will be loaded at that place.
  2. href="#info" should be href="#/info"
  3. Change redirectTo to the, info

    <body>
      <h2> Select Location from List</h2>
      <a href="#/info">Information</a>
      <div ng-view></div>
    </body>
    

Answered By – Pankaj Parkar

Answer Checked By – Cary Denson (AngularFixing Admin)

Leave a Reply

Your email address will not be published.