AngularJS single page app - load default template and navigate to another page on login success -
here have 3 pages index.html,login.aspx,mainpage.html when run application shows login.aspx , when enter credentials renders mainpage.here snippet
index.html
<!doctype html> <html data-ng-app="myapp"> <head > <script src="scripts/angular.min.js"></script> <script src="scripts/angular-route.min.js"></script> <script src="basecontroller.js"></script> <title></title> </head> <body> <div data-ng-view=""> </div> </body> </html>
and login.aspx
<!doctype html data-ng-app="myapp"> <html > <head> <script src="scripts/angular.min.js"></script> <script src="scripts/angular-route.min.js"></script> <script src="basecontroller.js"></script> <title></title> </head> <body > <div data-ng-controller="logincontroller"> <h3>login</h3> username:<input type="text" data-ng-model="username" /> <br /> password:<input type="password" data-ng-model="password" /><br /> <button type="button" data-ng-click="login()">submit</button> </div> </body> </html>
and basecontroller.js
var app = angular.module('myapp', ['ngroute']); app.config(['$routeprovider', '$locationprovider', function ($routeprovider,locationprovider) { $routeprovider .when('/', { templateurl: 'login.aspx', controller: 'logincontroller' }) .when('/mainpage', { templateurl: 'mainpage.html' }) .otherwise({ redirectto: '/' }); $locationprovider.html5mode(true); }]); app.controller('logincontroller', function ($scope,$location) { $scope.login = function () { var uname = $scope.username; var pwd = $scope.password; if ($scope.uname == 'admin' && $scope.pwd == 'admin') { $location.path("/mainpage"); } }; });
when run app index page only...is there mistakes..
try @ place of
$location.path("/mainpage");
replace with
window.location = "#/mainpage.html";
Comments
Post a Comment