Skip to content

Project Spec Breakdown

Jump to bottom Edit New page
timkindberg edited this page Feb 18, 2013 · 7 revisions

To evolve the concept of an Angular "Route" into a more general concept of a "State" for managing coarse application UI state.

1) States

With $route, the 'truth' is in $location, we want to move it into the state abstraction, and map bi-directionally to $location (State -> $location can be lossy though depending on how the app is designed). We do this by having $state and $urlRouter as separate concepts. You can define a state with or without a route.

<!-- in index.html -->
<body ng-controller="MainCtrl">
    <section ui-view></section>
</body>
// in app-states.js (or whatever you want to name it)
$stateProvider.state('contacts', {
  template: '<h1>My Contacts</h1>'
}

// main-controller.js
function MainCtrl($state){
  //can manually transitionTo a state without using urls
  $state.transitionTo('contacts'); 
}

Of course, most states will have urls associated with them so we've integrated it well with $state, but its not integral to the $state.

// in app-states.js
$stateProvider.state('contacts', {
  url: "/contacts",
  template: '<h1>My Contacts</h1>'
}

2) Nested and Concurrent States/Views

Nested

Unlike $routes, states can be nested (aka form a parent/child relationship). We want to do this with well-defined semantics based on Hierarchical State Machines.

$stateProvider
  .state('contacts', {
      url: "/contacts",
      templateUrl: 'contacts.html'
  }
  .state('contacts.list', {
      url: "/list",
      templateUrl: 'contacts.list.html'
  }

Concurrent

States support multiple named views with well-defined semantics.

<!-- somereportthing.html -->
<body>
    <div ui-view="filters"></div>
    <div ui-view="tabledata"></div>
    <div ui-view="graph"></div>
</body>
$stateProvider
    .state('report', {
      views: {
        'filters': { ... templates, controllers, resolve, etc ... },
        'tabledata': {},
        'graph': {},
      }
    })

3) Utilities and Goodies

Finally, to provide utility directives around this core concept that make it easy to implement navigation between places, highlighting the current place in the UI, and other app navigation-related tasks.

  • ui-view directive. Use to plugin your views.
  • ui-state-ref directive. Allow navigation without urls.
<a ui-state-ref="contacts">Go to Contacts Page</a>
  • Others in the works

Want More? See the In-Depth Overview

Use the table of contents to the top right to navigate to other wiki sections.

Quick Overview

In-Depth Guide

Tips and Tricks

Clone this wiki locally