Structure the $state in Angular

Question

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?

score 0 · Accepted Answer · edited May 23 '17 at 11:59

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).

Source: Why give an "abstract: true" state a url?

Structure the $state in Angular

1 Answers1