Routing is not working in AngularJS app

Question

I am making an angularjs app but my routing part is not working.

Once I login into application using Login.html,it should route to index.html but it is not working.

app.js

/**
 * Created by gupta_000 on 7/19/2016.
*/
'use strict';
var myApp = angular.module('myApp',[
'Controllers','ngRoute'
]);
myApp.config(['$routeProvider',
function($routeProvider) {
    $routeProvider.
    when('/main', {
        templateUrl: 'Login.html',
        controller: 'LoginCtrl'
    }).
    when('/home/student', {
        templateUrl: 'index.html',
        controller: 'DictionaryController'
    }).
    otherwise({
        redirectTo: '/main'
    });
}]);

I uploaded all my custom files at below location.

http://plnkr.co/edit/mi2JS4y2FfMD9kIl58qk?p=catalogue

I have already included all the dependency files like angular.js and angular-route.js etc..

Thanks in advance.

I hope this is NOT a production site and only a mini project as you're doing validation on client side. Its a BAD practice. — Raman Sahasi
– Raman Sahasi, Commented Jul 20, 2016 at 4:14

Gregori · Accepted Answer · 2016-07-20 03:57:15Z

Here is a working plunker based on your code. You are missing the ng-view that the ngRoute will replace based on your config. So, the index.html looks like:

  <body ng-controller="MainCtrl">
    <p>Hello {{name}}!</p>
    <ng-view></ng-view>
  </body>

ng-view is an Angular directive that will include the template of the current route (/main or /home/student) in the main layout file. In plain words, it takes the file based on the route and injects it into the main layout (index.html).

In the config, ng-view will be replace by 'main' that points to Login.html. I change the '/home/student/' to point to a new page 'dic.html' to avoid infinite loop as it used to point to index.html

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

app.config(['$routeProvider',
  function($routeProvider) {
    $routeProvider.
    when('/main', {
      templateUrl: 'Login.html',
      controller: 'LoginCtrl'
    }).
    when('/home/student', {
      templateUrl: 'dic.html',
      controller: 'DictionaryController'
    }).
    otherwise({
      redirectTo: '/main'
    });
  }
]);

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';
});

Like your example, if one logs in with 'harish' as an e-mail and 'harish' as a password, the successCallback is called and goes to '/home/student' that replaces ng-view by dic.html:

 $scope.validate = function() {
      $http.get('credentials.json').then(function successCallback(response) {
        // this callback will be called asynchronously
        // when the response is available
        console.log('Data: ' + JSON.stringify(response));
        $scope.users = response.data;

        var count = 0;
        for (var i = 0, len = $scope.users.length; i < len; i++) {
          if ($scope.username === $scope.users[i].username && $scope.password === $scope.users[i].password) {
            alert("login successful");
            count = count + 1;
            if ($scope.users[i].role === "student") {
              $location.path('/home/student');
              break;
            }
          }
        }

        if (count != 1) {
          alert("Please provide valid login credentials");
          $location.path("/main")
        }

      }, function errorCallback(response) {
        // called asynchronously if an error occurs
        // or server returns response with an error status.
        console.log("Error: " + JSON.stringify(response));
        alert(JSON.stringify(response));
      });

    };

Let us know if that helps.

Vishwajeet Vatharkar · Accepted Answer · 2016-07-20 05:39:56Z

You need to add ng-view in the index.html inside the ng-app.

Something like.. <body ng-app="myApp"> <ng-view></ng-view> </body>

Now, the angular app would assign the view template and controller as defined by your routes configuration, INSIDE the ng-view directive.

Also, should have a generic index.html where all dependencies are included, and render the templates & assign them controllers in accordance with routes configurations. No need to create separate files which includes the dependencies all over again, like you did with index.html and login.html.

Hi Vishwajeet,Thanks a lot for your advice,it is really helpful for me!!!

Salman Zahid · Accepted Answer · 2016-07-20 05:53:29Z

0

You have not injected $location in your controller.

app.controller('MainCtrl', function($scope, $http, $location) {
  $scope.name = 'World';
});

answered Jul 20, 2016 at 5:53

Salman Zahid

3321 silver badge8 bronze badges

Collectives™ on Stack Overflow

Routing is not working in AngularJS app

3 Answers 3

1 Comment

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Related