<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.13/angular-ui-router.min.js"></script>
</head>
<body ng-app="app">
<div id="header" ui-view="header"></div>
<div id="main" ui-view="main"></div>
<div id="footer" ui-view="footer"></div>
<script src="app.base.js"></script>
<script src="app.config.js"></script>
<script src="app.run.js"></script>
<script src="DashboardController.js"></script>
<script src="RegisterBaseController.js"></script>
<script src="RegisterProfileController.js"></script>
<script src="NavigationController.js"></script>
</body>
</html>
(function( window, document, angular, undefined ) {
"use strict";
angular.config = {
file_path : '/',
default_state : '/dashboard'
};
angular
.module('app', [
'ui.router'
]);
})( window, document, angular );
(function( angular ){
"use strict";
var CONFIG = angular.config || {};
function ApplicationConfig ($stateProvider, $locationProvider, $urlRouterProvider, $httpProvider) {
$locationProvider.html5Mode(false).hashPrefix('!');
$urlRouterProvider
.when('/register', ['$state', function ($state) {
$state.go('.app.register.identification');
}])
.otherwise(CONFIG.default_state);
$stateProvider
.state('app',{
url : '/',
views : {
'header' : {
templateUrl : 'layout.header.html'
},
'main': {
templateUrl : 'layout.main.html'
},
'footer': {
templateUrl : 'layout.footer.html'
}
}
})
.state('app.dashboard', {
url : 'dashboard',
views : {
'main@': {
templateUrl : 'dashboard.index.html',
controller : 'DashboardController'
}
}
})
.state('app.register', {
url : 'register',
views : {
'main@': {
templateUrl : 'register.index.html',
controller : 'RegisterBaseController'
}
}
})
.state('app.register.identification', {
url : '/identification',
views : {
'registerView@app.register' : {
templateUrl : 'register.identification.html',
controller : 'RegisterProfileController'
}
}
});
}
ApplicationConfig.$inject = ['$stateProvider', '$locationProvider', '$urlRouterProvider', '$httpProvider'];
angular
.module('app')
.config(ApplicationConfig);
})( angular );
(function( window, document, angular, undefined ) {
"use strict";
var onChangeConfig = ['$rootScope', '$state',
function ($rootScope, $state) {
$rootScope.$on('$stateChangeStart', function (evt, toState) {
var key,
redirectUrl;
key = toState.name;
switch (key) {
case 'app.register':
redirectUrl = 'app.register.identification';
break;
default:
break;
}
if (typeof redirectUrl !== 'undefined') {
evt.preventDefault();
$state.go(redirectUrl);
}
});
}
];
angular
.module('app')
.run(onChangeConfig)
})( window, document, angular );
<hr/>
Page title: {{title}}
<hr/>
(function( angular ){
"use strict";
function DashboardController ($scope) {
$scope.title = 'Dashboard';
}
DashboardController.$inject = ['$scope'];
angular
.module('app')
.controller('DashboardController', DashboardController);
})( angular );
Footer
<nav ng-controller="NavigationController as MainNavigation">
<ul>
<li ng-repeat="menu in MainNavigation.navigation" ui-sref-active="active">
<a ui-sref="{{menu.link}}">{{menu.name}}</a>
</li>
</ul>
</nav>
main.html
(function( angular ){
"use strict";
function NavigationController ($scope) {
this.navigation = [
{
id : 1,
link : '.dashboard',
name : 'Dashboard'
},
{
id : 2,
link : '.register',
name : 'Register'
}
];
}
NavigationController.$inject = ['$scope'];
angular
.module('app')
.controller('NavigationController', NavigationController);
})( angular );
<table>
<tr>
<td><label for="names" class="field-label">Your Personal Names</label></td>
<td><input type="text" name="names" id="names" class="gui-input" placeholder="Enter name..." ng-model="formData.name"></td>
</tr>
<tr>
<td><label for="email" class="field-label">Your Email Address</label></td>
<td><input type="email" name="email" id="email" class="gui-input" placeholder="example@domain.com..." ng-model="formData.email"></td>
</tr>
</table>
<hr/>
<div class="menu">
<ul class="nav nav-pills">
<li ng-repeat="step in steps">
<a ui-sref-active="active" ui-sref="{{step.link}}">{{step.name}}</a>
</li>
</ul>
</div>
<hr/>
<div id="register-views" ui-view="registerView"></div>
<hr/>
<b>Form data in parent:</b> <code>{{formData}}</code>
<hr/>
(function( angular ){
"use strict";
function RegisterBaseController ($scope, $http, $state) {
$scope.events = {};
$scope.formData = {};
$scope.steps = [
{
id : 1,
link : '.identification',
name : 'Identification'
},
{
id : 2,
link : '.interests',
name : 'Personal interests'
},
{
id : 3,
link : '.subscribe',
name : 'Subscribe'
}
];
}
RegisterBaseController.$inject = ['$scope','$http','$state'];
angular
.module('app')
.controller('RegisterBaseController', RegisterBaseController);
})( angular );
(function( angular ){
function RegisterProfileController($scope, $http, $stateParams) {
$scope.title = 'Uw profiel';
$scope.formData.name = 'Your Name';
$scope.formData.email = 'Your E-mail';
}
RegisterProfileController.$inject = ['$scope','$http', '$stateParams'];
angular
.module('app')
.controller('RegisterProfileController', RegisterProfileController);
})( angular );