I'm new to ui.router in Angular and have to build an app, which contains a header, sidebar (off-canvas), feedback area (save successful and warnings area) and a content area.
I thought it would be best if I split up all things and create different (nested) ui-view
s:
index.html
<div ui-view="head">loading...</div>
<div ui-view="sidebar">loading...</div>
<div ui-view="main">loading...</div>
head.html and sidebar.html
just some dummy text
main.html
<h1>main content</h1>
<div ui-view="feedback">loading...</div>
<div ui-view="content">loading...</div>
app.js
'use strict';
/**
* @ngdoc overview
* @name uirouterApp
* @description
* # uirouterApp
*
* Main module of the application.
*/
angular
.module('uirouterApp', [
'ngAnimate',
'ngCookies',
'ngResource',
//'ngRoute',
'ngSanitize',
'ngTouch',
'ui.router'
])
.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/overview/box');
$stateProvider
.state('app', {
url: '/',
abstract: true,
views: {
'head@': {
templateUrl: 'views/head.html'
},
'sidebar@': {
templateUrl: 'views/sidebar.html'
},
'main@': {
templateUrl: 'views/main.html'
},
'feedback@app': {
template: 'loading...'
},
'content@app': {
template: 'loading...'
}
}
})
.state('app.overview', {
url: '^/overview',
abstract: true,
views: {
'feedback@app': {
template: '<div class="alert alert-success">sooo nice</div>'
},
'content@app': {
template: 'i am just some content <a ui-sref="app.overview.list">list</a>'
}
}
})
.state('app.overview.box', {
url: '/box',
views: {
'feedback@app': {
template: '<div class="alert alert-warning">ui ui ui on box </div>'
},
'content@app': {
templateUrl: 'views/overview.box.html'
}
}
})
.state('app.overview.list', {
url: '/list',
views: {
'feedback@app': {
template: '<div class="alert alert-info">ui ui ui on list </div>'
},
'content@app': {
template: '<a ui-sref="app.overview.box">overview.box</a>'
}
}
});
});
Thoughts
I defined an 'app' state, which defines all the default states for the header, sidebar and main content.
I defined an 'overview' state. The official entry point of the app, also an abstract state, which could change the default settings.
The 'list' and 'box' states are callable and sets the real content and if required the feedback too.
Please tell me what I can and should change to match the ui.route pattern.