Couldn't navigate from one page to another

StackOverflow https://stackoverflow.com/questions/23511419

  •  16-07-2023
  •  | 
  •  

Question

I am new to angularjs...i am trying to navigate from login page to next page using router functionality....My login page is as follows

 <body>
<div id='content' ng-app='myApp' ng-controller='LoginController'>
<div class="container">
  <form class="form-signin" role="form" ng-submit="login()">
    <h3 class="form-signin-heading">Login Form</h3>
    <span><b>Username :</b>&nbsp;
        <input type="username" class="form-control" ng-model="user.name"  required>
    </span>
    </br></br>
    <span><b>Password :</b>&nbsp;&nbsp;
        <input type="password" class="form-control" ng-model="user.password" required>
    </span>
    <label class="checkbox">
      <input type="checkbox" value="remember-me"> Remember me
    </label>
   <button class="btn btn-lg btn-primary btn-block"  type="submit" >           
     <b>Sign in</b></button>
   {{nameis}}
   </form>
   </div> <!-- /container -->
   </div>
  <div ng-view></div>
 </body>

my app.js file is as follows

'use strict';
//Define Routing for app

var applog = angular.module('myApp',[]);
applog.config(['$routeProvider', '$locationProvider',
 function($routeProvider,$locationProvider) {
  $routeProvider
  .when('/login', {
    templateUrl: '/navAng.html',
    controller: 'LoginController'
  })    
  .otherwise({
   redirectTo: '/navAng.html'
  });
  $locationProvider.html5Mode(true); //Remove the '#' from URL.
}]);

and my controller js file is as follows

 applog.controller("LoginController", function($scope, $location,$window){
 $scope.nameis = "Test";

 $scope.go = function ( path ) {
  $location.path( path );
};


$scope.login=function()
   {

    var username=$scope.user.name;
    var password=$scope.user.password;
    if(username=="admin" && password=="admin")
    {

        $location.path( "/navAng.html" );
    }
    else
    {
        $scope.message="Error";
        $scope.messagecolor="alert alert-danger";
    }
  }

});

Honestly i dont know where i am going wrong...the problem is i am getting the url of the page correctly in the url tab but i need to press enter to go to that page...i mean the page is not getting refreshed it just changes the existing url and just sits in the same page(i.e login page)....can someone plz help....

Was it helpful?

Solution

Add angular-route library too.In latest angular versions, it is available as a separate module.So, you need to inject 'ngRoute' for using $routeProvider service

index.html:

<html ng-app='myApp'>
 <head> 
  <script src="angular.js"></script>
  <script src="angular-route.js"></script>
</head>
<body>
  <div ng-view></div>
  <script type="text/javascript">
    'use strict';
    //Define Routing for app
    var applog = angular.module('myApp', ['ngRoute']);

    applog.config(['$routeProvider', '$locationProvider',
      function($routeProvider, $locationProvider) {
      $routeProvider
       .when('/', {
         templateUrl: '/login.html',
         controller: 'LoginController'
        })
       .when('/navAng', {
         templateUrl: '/navAng.html',
         controller: 'navAngController'
        })
        .otherwise({
         redirectTo: '/'
        });
        $locationProvider.html5Mode(true); //Remove the '#' from URL.
     }]);

     applog.controller("LoginController", function($scope, $location, $window) {
     //$scope.nameis = "Test";

     $scope.go = function(path) {
       $location.path(path);
     };

    $scope.login = function() {
      var username = $scope.user.name;
      var password = $scope.user.password;
      if (username == "admin" && password == "admin") {
       $location.path("/navAng");
      } else {
       $scope.message = "Error";
       $scope.messagecolor = "alert alert-danger";
      }
    }
  });

  // next page controller
   applog.controller("navAngController", function($scope, $location, $window) {
    $scope.msg= "Success";     
   });
  </script>
 </body>
</html>

Use separate html for login. Because, you are using ng-view in index.html Login.html:

<div id='content' ng-controller='LoginController'>
<div class="container">
<form class="form-signin" role="form" ng-submit="login()">
  <h3 class="form-signin-heading">Login Form</h3>
  <span><b>Username :</b>&nbsp;
      <input type="username" class="form-control" ng-model="user.name"  required>
  </span>      
  <span><b>Password :</b>&nbsp;&nbsp;
      <input type="password" class="form-control" ng-model="user.password" required>
  </span>
  <label class="checkbox">
    <input type="checkbox" value="remember-me"> Remember me
  </label>
  <button class="btn btn-lg btn-primary btn-block"  type="submit" >           
   <b>Sign in</b>
  </button>
  {{nameis}}
</form>
</div> <!-- /container -->
</div>

This is another page to navigate, when login and password is correct navAng.html:

<div> {{msg}} </div>
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top