I have a web application. Untiln now I've used .when to define all the url. Now I want to know better the $state. So, I have an web that is composed as follow: - login page (public) -- then (private): - dashboard home - users list
The private side is composed by: - navbar (top) whith welcome messagges - sidebar (right) with a list of buttons (Home and List) - view (where I see the dashboard home and then, if the user press 'List', see the users list).
In the main.js I've writter this:
'use strict';
angular.module('app', [
'app.login',
'app.dashboard'
]).config(
['$stateProvider', '$urlRouterProvider', '$resourceProvider',
function($stateProvider, $urlRouterProvider, $resourceProvider) {
$resourceProvider.defaults.stripTrailingSlashes = false;
$urlRouterProvider
.otherwise('/login');
$stateProvider
// Definizione dei template di base per le pagine
.state('app.dashboard', {
url: '/dashboard',
templateUrl: 'dashboard.html',
controller: 'dashboardCtrl'
})
.state('app', {
url: '/app',
abstract: true,
templateUrl: 'app.html',
})
.state('login', {
url: '/login',
templateUrl: 'login.html',
controller: 'LoginController'
})
.state('app.list', {
url: '/list',
templateUrl: 'list.html',
controller: 'ListController',
})
}])
What should be / or not should be an abstract? Should I do a 'common' $state? Also because I want to add an authorization which you can't go forward if you didn't signin. Can you help me to structure the routing and understand the abstract state?
The reason you would use an abstract state is to keep your definition dry when you have a part of your url non-navigable. For example, say that you had a url scheme like the following:
/home/index
/home/contact
However, for whatever reason in your design, this url was invalid (i.e. no purpose for a page):
/home
Now you could simply create two states for this situation, with the complete urls, however then you would be writing /home/ twice, and the description is a bit more convoluted. The best idea instead is to create a home abstract parent of which the two other states are children (for ui-router docs):
$stateProvider
.state('parent', {url: '/home', abstract: true, template: '<ui-view/>'} )
.state('parent.index', {url: '/index', templateUrl: 'index.html' })
.state('parent.contact', {url: '/contact', templateUrl: 'contact.html' })
Just notice that inside the parent state, we assign a template whose only child is a ui-view. This ensures that the children are rendered (and might be why yours is appearing blank).
Sometimes you might notice the use of an abstract state with a blank url. The best use of this setup is when you need a parental resolve. For example, you may require some particular server data for a subset of your states. So instead of putting the same resolve function into each of your states, you could create a blank url parent with the desired resolve. It could also be useful if you want hierarchical controllers, where the parent has no use for a view (not sure why you would want this, but it is plausible).