AngularJS session and ngRoute demo

HTML

<link rel="stylesheet" href="../css/styles.css">
	<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="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
	<script src="../scripts/customScript.js"></script>
<body>
<div ng-controller="mainCtrl">
<h1>{{page.title()}}</h1>
<hr>
<a href="#/login" id="signIn">Login</a>
<div class="wrapper">
	
	<ng-view>
	
</ng-view>
</div>

<!--Login page view code-->
<script type="text/ng-template" id="login.html">
	
		<fieldset>
			<legend>Login</legend>
			<form name="LoginUser" method="post" action="#/dashboard" 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="dashboard.html">
	<h1>This is Home page</h1>
	<h2>Welcome {{login.getUsername()}}</h2>
	<ul>
		<li>
			<a href="#dashboard">dashboard</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>
		
	</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="#dashboard">dashboard</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>
		
	</ul>
</script>

<!--Products page view code-->
<script type="text/ng-template" id="products.html">
	<h1>This is Products page</h1>
	<ul>
		<li>
			<a...

CSS

ul {
	padding: 0;
	margin: 5px;
}
ul li {
	padding: 5px 8px;
	float: left;
	position: relative;
}
ul li a {
	text-decoration: none;
	text-transform: capitalize;
}
ul li a:hover, ul li a:active {
	text-decoration: underline;
}
h1 {
	margin: 20px 0 0 100px;
	color: #235e99;
}
.wrapper {
	width: 400px;
	margin: auto auto;
}
fieldset {
	
	width: 400px;
}

JavaScript

/**/

angular.module('app',['appServices','ngRoute']).config(['$routeProvider',function($routeProvider){
		$routeProvider.when('/dashboard',{ templateUrl: 'dashboard.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'}).	
					   when('/logout',{ templateUrl: 'login.html', controller: 'loginCtrl'}).
		otherwise({redirctTo: '/login'});
	}
]);

// Controllers

function mainCtrl($scope, Page, Login) {
	console.log(Page);
	Page.setTitle("Home");	
	$scope.page= Page;	
	$('#signIn').attr('href','#login').text('Login');
}
function homeCtrl($scope, Page, Login) {	
	Page.setTitle("dashboard");	
	$scope.login= Login;
	console.log(Login.getUsername());
	$('#signIn').attr('href','#logout').text('Logout');
}
function loginCtrl($scope, Page, Login) {
	localStorage.clear();
	Page.setTitle("Login");	
	$('#signIn').attr('href','#').text('');	
	$scope.login = function(){
		console.log("Login():"+$scope.userName);		
		Login.setUsername($scope.userName);	 
	};	
}
function aboutCtrl($scope, Page){
	Page.setTitle("About");
	$scope.page= Page;
}

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

function contactCtrl($scope, Page){
	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(){
	var usr='Default';
	return {
		getUsername: function()  {
			usr=localStorage.getItem('Username');
			return usr;
		},
		setUsername: function(usrname) {
			localStorage.setItem('Username', usrname);
		}
	}
});