AngularJS - StateProvider - TilesLayout

Named view demo

by Yashwanth M

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.18/angular-ui-router.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.2.2/css/foundation.min.css">
<script src="http://www.as-flash.com/ne_brisi/dat.gui.min.js"></script>
<div ng-app="demoApp" class="container">
  <div class="page-header">
    <h3>AngularJS using Layout State Provider</h3>
  </div>
  <div>
  
    <a ui-sref="root.home" href="#">Home</a>
    <a ui-sref="root.about" href="#">About</a>
    <a ui-sref="root.restricted" href="#">Restricted page</a>
  </div> 
    <div ui-view>
    <!-- Templates -->
<script type="text/ng-template" id="tpl.login.html">
<div>
 Data About describing Application Page.
 <div id="gui-container"></div>
 <!-- http://jsfiddle.net/jayeshcp/q7ym8yq1/ -->    
<div id="ui1BOX"></div>
<div id="ui2BOX"></div>
</div>
</script>
</div>

    <script type="text/ng-template" id="views/login.html">
    	<h1>Login</h1>
        <label>Username</label><input ng-model="userCred.username"/>
        <label>Password</label><input type="password" ng-model="userCred.password"/>
        <button ng-click="login(userCred)" class="attention btn btn-primary btn-lg">login</button>
    </script>
    
    <script type="text/ng-template" id="layout.html">
    	<div class="container">
            <div ui-view="header"></div>
            <div ui-view="content"></div>
            <div ui-view="footer"></div>
    	</div>
    </script>

</div>

CSS

// Button - http://jsfiddle.net/jayeshcp/0dsz7hnt/
body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.attention {
  animation: attention 10s ease infinite;
}

@keyframes attention {
  9% {
    transform: none;
  }
  12% {
    transform: scale(1.05);
  }
  16% {
    transform: scale(0.95);
  }
  20% {
    transform: scale(1.03);
  }
  24% {
    transform: scale(1);
  }
}
#gui-container {
    position:absolute;
    top: 0px;
    left: 580px;
    z-index: 100;
}

JavaScript

angular.module('demoApp', ['ui.router'])
	.run(function($rootScope, $state) {
            $rootScope.$on('$stateChangeError', function(evt, to, toParams, from, fromParams, error) {
          if (error.redirectTo) {
            $state.go(error.redirectTo);
          } else {
            $state.go('error', {status: error.status})
          }
        })
    })
	.factory('userService', userService)
	.config(routes);

function userService() {
	var usersMock = {
    	'testUser': {
        	username: 'testUser',
            password: '1234'
        },
        'testUser2': {
        	username: 'testUser2',
            password: '1234'
        }
    };
	var userService = {
    	user: undefined,
    	login: function(userCredentials) {
        	// later --> $http.post('auth', userCredentials).then(...)
            // for demo use local data
            var user = usersMock[userCredentials.username]
            userService.user = ( user && ( user.password == userCredentials.password ) ) ? 
            	user : undefined;
            return user;
        },
        logout: function() {
        	userService.user = undefined;
        }
    }
    
    return userService;
}
function routes($urlRouterProvider, $stateProvider) {

	$urlRouterProvider.otherwise('/');
    
    $stateProvider
    	.state('root', {
        	url: '',
        	abstract:true,
            resolve: {
            	'user': function(userService) {
                	return userService.user; // would be async in a real app
                }
            },
            views: {
            	'': {
                	templateUrl: 'layout.html',
                },
            	'header@root': {
                	template: '<h1>header View<span ng-if="user"><button ng-click="logout()">logout</button></span><span ng-if="!user"><button ng-click="login()" class="attention btn btn-primary btn-lg">login</button></span></h1><br>',
                    controller: function($scope, $state, user, userService) {
                   ...