Angularjs - Clueless on how to redirect to Home page from Login page which has a different view
I am working on a AngularJs project where I have a Login page and Home page (all other pages will use the same home page view). Now I need to redirect the user from Login page (different layout) to Home page (another different layout).
Right now I have a Index page which contains both ng-app & ng-view tags and my Login page is getting rendered on that but after successful login I don't know how to show my different layout view (Home page).
Also, I have seen many people saying that you can use ng-if to hide/show the required piece (which is placed in same page itself). So, I tried using the rootScope variable to show/hide the span/div before and after login & I worked well. But one thing I noticed in this method is, when I load the login page I was able to see the sidebar, topbar & bottompanel for few seconds but they eventually become invisible and it looks messy.
My app.js:
$stateProvider
.state('login', {
url: "/login",
templateUrl: "/app/views/login/login.html",
controller: "loginController"
})
.state('home', {
url: "/home",
templateUrl: "/app/views/home/home.html",
controller: "homeController"
})
My login page: Very simple page - Contains just two textboxes and a button. When clicking the Login button loginController's login method will be called.
My home page: Very complex page - Contains a side panel, top panel, center panel (where all other views will be displayed) and bottom panel.
I have tried ng-if in the index page to show/hide login and home page using a rootScope variable (called isLoginSuccessful)
My Index page:
<html data-ng-app="myApp">
<body>
<div class="sidebar" id="sidebar" ng-if="isLoginSuccessful">
</div>
<div class="topbar" id="topbar" ng-if="isLoginSuccessful">
</div>
<div class="contentpanel" id="contentpanel">
<div ng-view>
<!-- view goes here-->
</div>
</div>
<div class="bottompanel" id="bottompanel" ng-if="isLoginSuccessful">
</div>
</body>
</html>
My loginController.js:
myApp.controller('loginController', ["$scope", "$rootScope", "$location", function ($scope, $rootScope, $location) {
$rootScope.loggedIn = false;
$scope.login = function () {
//do user validation check here
$rootScope.loggedIn = true;
$location.path("/home"); //redirect to home page
}
}]);
Is there any better way to handle this. Please help me.
Thanks in advance.
Answer
You asked how you navigate from the login page to the home page once you have logged in? Your logic is nearly there in the controller, and you have the states already set up, so alter it like so:
myApp.controller('loginController', ["$scope", "$rootScope", "$state", function ($scope, $rootScope, $state) {
$rootScope.loggedIn = false;
$scope.login = function () {
//do user validation check here
$rootScope.loggedIn = true;
$state.go('home'); //redirect to home page
}
}]);
Since the templates contain everything you need, you can get rid of the ng-if attributes since the only way they can navigate to the home page is via the login (and via the $state.go())