Search This Blog

2016-01-11

Angular JS Tutorial6: Login page using routeScope,check,resolve,location

We can control login/authorization using routeScope,check,resolve,location.

Example :

6.html :

<!DOCTYPE html>
<html lang="en">
<head>
 <title>routeScope,check,resolve,location</title>
 <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
 <script src="angular-route.js"></script>
 <script src="6controller.js"></script>
</head>
<body  ng-app="myapp">
 <div ng-view></div>
</body>
</html>

6controller.js :

var app=angular.module('myapp',['ngRoute']);
app.config(function($routeProvider){
 $routeProvider
 .when('/',{
  templateUrl:'6login.html',
  //template:'Loaded from /'
 })
 .when('/dashboard',{
  resolve:{
   "check":function($location,$rootScope){
    if(!$rootScope.loggedIn)
    {
     $location.path('/');
    }
   }
  },
  templateUrl:'6dashboard.html'
 })
 .otherwise({
  redirectTo:'/'
 });
});
app.controller('loginCtrl',function($scope,$location,$rootScope){
 $scope.submit=function(){
 

  if($scope.username=='Admin' && $scope.password=='Admin'){
   $rootScope.loggedIn=true;
  
   $location.path('/dashboard');
  }
  else{
   alert('wrong credential');
  }
 };
});

6login.html :

<div ng-controller="loginCtrl">
 <form action="/" id="myloginform">
  User Name : <input type="text" ng-model="username" id="username"/><br/>
  Password : <input type="password" ng-model="password" id="password"/>
  <button type="button" ng-click="submit()">Login</button>
 </form>
</div>

6dashboard.html :

Welcome to Dashboard

No comments: