<!DOCTYPE html>
<html ng-app="app">
<head>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.css"
>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container well">
<div class="notification bg-info hidden-md hidden-lg">
Best viewed in pop-out mode to see location changes.
Click blue button on the right.
</div>
<header class="header" ui-view="header"></header>
<div ui-view="content"></div>
</div>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/3.8.0/lodash.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.0-rc.1/angular.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.14/angular-ui-router.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-css/1.0.7/angular-css.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-local-storage/0.2.0/angular-local-storage.js"></script>
<script src="app.js"></script>
</body>
</html>
/*jslint maxlen: 120, nomen: true*/
(function (ng) {
"use strict";
var
Auth, user, MainController, AboutController, appConfig, onChangeConfig,
ProfileController, homeController, authController, navController,
friendsController;
Auth = function AuthF($state, localStorageService) {
var login, logout, register, isLoggedIn;
login = function loginF() {
localStorageService.set("isAuthenticated", true);
$state.go("private.home");
};
logout = function logoutF() {
localStorageService.remove("isAuthenticated");
$state.go("public.login");
};
isLoggedIn = function isLoggedInF() {
return localStorageService.get("isAuthenticated");
};
register = function registerF() {
login();
};
return {
login: login,
logout: logout,
register: register,
isLoggedIn: isLoggedIn
};
};
MainController = function MainCtrlF() {};
ProfileController = function ProfileControllerF(username) {
var profile;
profile = this;
profile.username = username;
};
onChangeConfig = function onChangeConfigF($rootScope, $state, Auth) {
var handleStateChange, handleAuthentication, handleDefaultChildRedirect;
handleDefaultChildRedirect = function (event, toState) {
if (toState.name === "private.profile") {
event.preventDefault();
$state.go('private.profile.about');
}
};
handleAuthentication = function (event, toState) {
var isPrivateState, isPublicState;
isPublicState = /^public[a-zA-Z\._]*/;
isPrivateState = /^private[a-zA-Z\._]*/;
if (!Auth.isLoggedIn() && isPrivateState.test(toState.name)) {
event.preventDefault();
$state.go("public.login");
} else if (Auth.isLoggedIn() && isPublicState.test(toState.name)) {
event.preventDefault();
$state.go("private.home");
}
};
handleStateChange = function (event, toState) {
handleAuthentication(event, toState);
handleDefaultChildRedirect(event, toState);
};
$rootScope.$on('$stateChangeStart', handleStateChange);
};
user = function userF($http) {
var url, processRecievedData, getUsers;
url = "users.json";
processRecievedData = function processRecievedDataF(response) {
return response.data;
};
getUsers = function getUsersF() {
return $http.get(url).then(processRecievedData);
};
return {
get: getUsers
};
};
appConfig = function appConfigF($stateProvider, $urlRouterProvider, localStorageServiceProvider) {
var routes, setStates;
routes = [
{
name: "public",
url: "/public",
css: {href: "css/public.css", persist: true},
views: {
content: {templateUrl: "public.html"},
header: {templateUrl: "public_header.html"}
}
},
{
name: "private",
url: "/private",
views: {
header: {
controllerAs: "nav",
controller: "navController",
templateUrl: "private_header.html"
},
content: {
controllerAs: "App",
templateUrl: "private.html",
controller: "MainController"
}
}
},
{
url: "^/login",
name: "public.login",
css: "css/login.css",
views: {
content: {
controllerAs: "auth",
templateUrl: "login.html",
controller: "authController"
}
}
},
{
url: "^/register",
name: "public.register",
css: "css/register.css",
views: {
content: {
controllerAs: "auth",
templateUrl: "register.html",
controller: "authController"
}
}
},
{
url: "^/home",
name: "private.home",
views: {
content: {
controllerAs: "home",
templateUrl: "home.html",
controller: "homeController"
}
}
},
{
url: "^/profile",
name: "private.profile",
views: {
content: {
controllerAs: "profile",
templateUrl: "profile.html",
controller: "ProfileController"
}
}
},
{
url: "^/about",
name: "private.profile.about",
views: {
profileChild: {
controllerAs: "About",
templateUrl: "about.html",
controller: "aboutController"
}
}
},
{
url: "^/friends",
name: "private.profile.friends",
views: {
profileChild: {
controllerAs: "Friends",
templateUrl: "friends.html",
controller: "friendsController"
}
}
}
];
setStates = function setStatesF(state) {
$stateProvider.state(state);
};
ng.forEach(routes, setStates);
$urlRouterProvider.otherwise("/home");
localStorageServiceProvider.setPrefix('yk').setNotify(true, true);
};
authController = function authControllerF(Auth) {
var auth = this;
auth.login = function loginF() {
Auth.login();
};
auth.register = function registerF() {
Auth.register();
};
};
AboutController = function AboutControllerF(username) {
var About;
About = this;
About.username = username;
};
navController = function navControllerF(Auth) {
var nav = this;
nav.logout = function logoutF() {
Auth.logout();
};
};
homeController = function homeControllerF(Users) {
var home, setUsers;
home = this;
setUsers = function setUsersF(data) {
home.users = data;
};
Users.get().then(setUsers);
};
friendsController = function friendsControllerF(username) {
var friends;
friends = this;
friends.username = username;
};
authController.$inject = ['Auth'];
navController.$inject = ['Auth'];
AboutController.$inject = ['username'];
ProfileController.$inject = ['username'];
onChangeConfig.$inject = ['$rootScope', '$state', 'Auth'];
Auth.$inject = ['$state', 'localStorageService'];
appConfig.$inject = ['$stateProvider', '$urlRouterProvider', 'localStorageServiceProvider'];
ng.module("app", ['ui.router', 'LocalStorageModule', 'door3.css'])
.config(appConfig)
.run(onChangeConfig)
.factory("Auth", Auth)
.factory("Users", user)
.value("username", "Yahya")
.controller("navController", navController)
.controller("homeController", homeController)
.controller("authController", authController)
.controller("MainController", MainController)
.controller("aboutController", AboutController)
.controller("friendsController", friendsController)
.controller("ProfileController", ProfileController);
}(angular));
.links_items {
margin: 0;
}
.notification {
padding: 5px;
margin-bottom: 5px;
border-radius: 3px;
}
.logout_link {
cursor: pointer;
}
# ui-router-styles Error:
When having a redirect the styles files doesn't get loaded.
when clicking on profile nav item the configuration of the ui-router profile state
is to use the $state.go('profile.about') when that happen the style file doesn't get loaded.
<h1>Home page</h1>
<div class="person" ng-repeat="user in home.users track by $index">
{{user.id}}- {{user.username}}
</div>
<h1>{{Profile.username + ' '}}Profile Page</h1>
<hr/>
<a
class="btn btn-default"
ui-sref-active="active"
ui-sref="private.profile.about"
>
Show About me
</a>
<a
class="btn btn-default"
ui-sref-active="active"
ui-sref="private.profile.friends"
>
Show my Friends
</a>
<div ui-view="profileChild"></div>
<h3>About page</h3>
<div ng-class="About.username">{{About.username}}</div>
[
{"id": 1, "username": "Yahya"},
{"id": 2, "username": "Ahmed"},
{"id": 3, "username": "Mohammed"}
]
<h3>{{Friends.username}}'s Friends page</h3>
<nav class="navbar navbar-default">
<div class="container-fluid">
<ul class="nav navbar-nav">
<li ui-sref-active="active" class="links_items">
<a ui-sref="private.home">Home</a>
</li>
<li ui-sref-active="active" class="links_items">
<a ui-sref="private.profile">Profile</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="logout_link">
<a ng-click="nav.logout()">Logout</a>
</li>
</ul>
</div>
</nav>
<nav class="navbar navbar-default">
<div class="container">
<ul class="nav navbar-nav">
<li ui-sref-active="active" class="links_items">
<a ui-sref="public.login">Login</a>
</li>
<li ui-sref-active="active" class="links_items">
<a ui-sref="public.register">Register</a>
</li>
</ul>
</div>
</nav>
<div class="well">
<h1>Public Access</h1>
<div class="well" ui-view="content"></div>
</div>
<div class="login">
<h1>Login Form</h1>
<button class="btn btn-primary" ng-click="auth.login()">Login</button>
</div>
<div class="register">
<h1>Register Form</h1>
<button class="btn btn-primary" ng-click="auth.register()">Register</button>
</div>
<h1>Private Access</h1>
<div class="well" ui-view="content"></div>
.login {
background-color: aquamarine;
}
.login,
.register {
padding: 15px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.register {
background-color: coral;
}