angularjs - Angular Routing is not working after logging in -
i trying login using username , password , displaying home page.
homepage contains hyperlink, clicking should direct someother content not happening.
can me in regard.
var app = angular.module('plunker', ['ngroute']); app.config(function($routeprovider) { $routeprovider. when('/login', { templateurl: 'pages/login.html', controller: 'appctrl' }). when('/home',{ templateurl: 'pages/country-list.html', controller:'countrylistctrl' }). when('/:countryname',{ templateurl: 'pages/country-detail.html', controller:'countrydetailctrl' }). otherwise({ redirectto: '/login' }); }); app.run(['$rootscope', '$location', 'auth', function ($rootscope, $location, auth) { $rootscope.$on('$routechangestart', function (event) { console.log('auth logged:'+auth.isloggedin()); if (!auth.isloggedin()) { console.log('deny'); event.preventdefault(); $location.path('/login'); } else { console.log('allow'); $location.path('/home'); } }); }]); app.factory('auth', function(){ var user; console.log('user'+user); return{ setuser : function(auser){ user = auser; }, isloggedin : function(){ return(user)? user : false; } } }); app.controller('appctrl', ['$rootscope','$scope','$location', 'auth',function($rootscope,$scope,$location, auth) { $scope.$watch(auth.isloggedin, function (value, oldvalue) { console.log('value'+value); console.log('not value'+!value); console.log('oldvalue'+oldvalue); if(!value && oldvalue) { console.log("disconnect"); $location.path('/login'); } if(value) { console.log("connect"); //do when user connected } }, true); $rootscope.user = {}; $scope.login = function (username, password) { if ( username === 'admin' && password === '1234') { $rootscope.user.name= username; $rootscope.user.password= password; auth.setuser($scope.user); $location.path( '/home' ); } else { $scope.loginerror = "invalid username/password combination"; }; }; }]); app.controller('countrylistctrl', function ($scope, $http){ $http.get('json/countries.json').success(function(data) { $scope.countries = data; }); }); app.controller('countrydetailctrl', function ($scope, $routeparams,$location){ console.log('countrname route'+$routeparams.countryname); $scope.name = $routeparams.countryname; console.log('countrname $scope.name'+$scope.name); }); index.html
<!doctype html> <html ng-app="plunker"> <head> <meta charset="utf-8" /> <title>angularjs plunker</title> <link rel="stylesheet" href="css/style.css" /> <script src="js/angular.min.js"></script> <script src="js/angular-route.min.js"></script> <script src="js/app.js"></script> </head> <body ng-controller="appctrl"> <div ng-view></div> </body> </html> login.html
<h1>login page</h1> <form ng-submit="login(username, password)" class="ng-scope ng-pristine ng-valid"> <label>user name</label> <input type="text" ng-model="username" class="ng-pristine ng-valid"> <label>password</label> <input type="password" ng-model="password" class="ng-pristine ng-valid"> <br/> {{loginerror}} {{loggeduser}} <br/><br/> <button class="btn btn-success" ng-click="">submit</button> <button class="btn btn-warning" ng-click="cancel()">cancel</button> </form> country-list.html
<h1>country list</h1> <div>welcome :<strong>{{user.name}}</strong></div> <span class="logout"><a href="" ng-click="logoutuser()">logout</a></span> <ul> <li ng-repeat="country in countries"><a href="#/{{country.name}}">{{country.name}}</a></li> </ul> country-detail.html
<h1>country detail</h1> <h1>{{name}}</h1> problem countrydetailctrl guess. cosnole values coming fine.
can let me know going wrong.
no need in $rootscope here use 1 call of
if (!auth.isloggedin()) { console.log('deny'); $location.path('/login'); return; // not execute controller function further } on start of each of view controllers, should protected, "return" stop execution of controller code written bellow.
Comments
Post a Comment