I am working with ui-router, as I can achieve several views grouping different html, something like the image shows, ie a view 1 and another view 2. Additionally I want to see 2 only view with an authentication?
Any ideas?
My current code:
<div ng-include='"views/header.html"'></div>
<div ui-view></div>
<div ng-include='"views/footer.html"'></div>
Whether authentication on angular must be implemented on ui-router, it´s a little complicated to show it:
Step 1 - Define a variable like "authenticate" in your state provider
angular.module('myApp')
.config(function ($stateProvider) {
$stateProvider
.state('view1', {
url: '/view1',
templateUrl: 'app/tests/view1.html',
controller: 'TestsCtrl1',
authenticate: false
});
$stateProvider
.state('view2', {
url: '/view2',
templateUrl: 'app/views/view2.html',
controller: 'TestsCtrl2',
authenticate: true
});
});
Step 2 - Change in client/app.js the method for $stateChangeStart. This will detect an stateChange, and check if the destination state has the authenticated value on it. I did it in the run() function of the app
// Redirect to login if route requires auth and you're not logged in
$rootScope.$on('$stateChangeStart', function (event, next) {
Auth.isLoggedInAsync(function(loggedIn) {
//Check if next view (ui-state) requires authentication
if (next.authenticate && !loggedIn) {
event.preventDefault();
$rootScope.lastState=next.name;
$state.go('login');
}
});
});
Step 3 - Create Different html template for each view:
//view1.html
<div ng-include='"views/headerA.html"'></div>
<div ng-include='"views/contentA.html"'></div>
<div ng-include='"views/footerA.html"'></div>
//view2.html
<div ng-include='"views/headerB.html"'></div>
<div ng-include='"views/contentB.html"'></div>
<div ng-include='"views/footerB.html"'></div>
Hope it helps
