AngularJS Routing with session

by Prasad

HTML

<!document html>
<html ng-app="app">
<head>
	<title>
	</title>
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.min.js"></script>	
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular-route.min.js"></script>
	<script src="../scripts/customScript.js"></script>
</head>
<body>
<div ng-controller="mainCtrl">
<h1>{{page.title()}}</h1>
<a href="#/login">Login</a>

<ng-view></ng-view>

<!--Login page view code-->
<script type="text/ng-template" id="login.html">
	<fieldset>
	<legend>Login</legend>
	<form name="LoginUser" method="post" action="#/home" ng-submit="login()">
	<input type="text" placeholder="Username" ng-model="userName" name="userName" ng-model="userName" required>
	<input type="password" ng-model="password" placeholder="password" name="password" ng-model="password" required>
	<input type="submit" onSubmit="javascript:storeUser();" value="Login">
	</form>
</fieldset>
</script>

<!--Home page view code-->
<script type="text/ng-template" id="home.html">
	<h1>This is Home page</h1>
	<ul>
		<li>
			<a href="#/home">Home</a>
		</li>
		<li>
			<a href="#/about">About us</a>
		</li>
		<li>	
			<a href="#/products">Products</a>
		</li>
		<li>
			<a href="#/contact">Contact us</a>
		</li>
		<li>
			<a href="#/logout">Logout</a>
		</li>
	</ul>
</script>

<!--About us page view code-->
<script type="text/ng-template" id="about.html">
	<h1>This is About us page</h1>
	<ul>
		<li>
			<a href="#/home">Home</a>
		</li>
		<li>
			<a href="#/about">About us</a>
		</li>
		<li>	
			<a href="#/products">Products</a>
		</li>
		<li>
			<a href="#/contact">Contact us</a>
		</li>
		<li>
			<a href="#/logout">Logout</a>
		</li>
	</ul>
</script>

<!--Products page view code-->
<script type="text/ng-template" id="products.html">
	<h1>This is Products page</h1>
	<ul>
		<li>
			<a href="#/home">Home</a>
		</li>
		<li>
			<a href="#/about">About us</a>
		</li>
		<li>	
			Products
		</li>
		<li>
			<a href="#/contact">Contact...

JavaScript

/**/

angular.module('app',['appServices','ngRoute']).config(['$routeProvider',function($routeProvider){
		$routeProvider.when('/home',{ templateUrl: 'home.html', controller: 'homeCtrl'}).
					   when('/about',{ templateUrl: 'about.html', controleer: 'aboutCtrl'}).
					   when('/products', { templateUrl: 'products.html', controller: 'productsCtrl'}).
					   when('/contact', {templateUrl: 'contact.html', controller: 'contactCtrl'}).
					   when('/login', { templateUrl: 'login.html', controller: 'loginCtrl'}).					   				   
		otherwise({redirctTo: '/login'});
	}
]);

// Controllers

function mainCtrl($scope, Page, Login) {
	console.log(Page);
	$scope.page= Page;
	$scope.curUser='Not Defined';
}
function homeCtrl($scope, Page, Login) {
	Page.setTitle("Home");	
	alert(Login.getUsername());
	console.log(Login.getUsername());
}
function loginCtrl($scope, Page, Login) {
	Page.setTitle("Login");	
	
	$scope.login = function(){
		console.log("Login():"+$scope.userName);		
		Login.setUsername($scope.userName);
		alert(Login.getUsername());
		$scope.apply();
	};	
}
function aboutCtrl($scope, Page, Login){
	Page.setTitle("About");
}

function productsCtrl($scope, Page, Login){
	Page.setTitle("Products");
}

function contactCtrl($scope, Page, Login){
	Page.setTitle("Contact");
}

angular.module('appServices', []).factory('Page', function($rootScope){
	var pageTitle="Undefined";
	return {
		title: function() {
			return pageTitle;
		},
		setTitle: function(newTitle){			
			pageTitle= newTitle;
		}
	}
}).service('Login', function($rootScope){
	var cUsername= 'Default';
	return {
		getUsername: function() {
			return cUsername;
		},
		setUsername: function(cun) {
			cUsername = cun;
		}
	}
});