State provider basic configuration

Configuration of the $stateProvider is very similar to the way the $routeProvider is configured using when, except you use state and the first argument is a name of the state rather than a route.

Here is a very basic example of configuring states.

angular.module('phonecat', ['dotjem.routing']).
  config(['$stateProvider', function($stateProvider) {
  $stateProvider
      .state('phones', { /*.. Parameters for the state ..*/ })
      .state('tablets', { /*.. Parameters for the state ..*/ });
}]);

In it self that is not really useful, but the state it self can have views added as well as onEnter/onExit handlers.

Single View

In order to mimic the functionality of the old angular routing, add a single named view and use a single ui-view directive with that name to target that view.

angular.module('phonecat', ['dotjem.routing']).
  config(['$stateProvider', function($stateProvider) {
  $stateProvider
      .state('phones', { views: { 'main': { template: 'phones.html' } })
      .state('tablets', { views: { 'main': { template: 'tablets.html' } });
}]);

And you essentially have a working configuration, in order to activate the states use $state.goto('phones') as an example.

Multiple Views

At this basic level you can also configure multiple views, just add a number of ui-view directives with unique names, and simply target those from the configuration.

e.g. if we had a main view and a hint view we could do.

angular.module('phonecat', ['dotjem.routing']).
  config(['$stateProvider', function($stateProvider) {
  $stateProvider
      .state('phones', { 
          views: {
              'main': { template: 'phones.html' },
              'hint': { template: { html: '@phones' } } 
          }
      })
      .state('tablets', { 
          views: {
              'main': { template: 'tablets.html' },
              'hint': { template: { html: '@tablets' } } 
          }
      })
}]);

Note that the template is suddenly an object with an html property, there is a number of ways to configure templates, that is covered in the section about views.

Controllers

Standing alone like this, views are very static, but just like the original angular routing, we can add controllers to a view.

angular.module('phonecat', ['dotjem.routing']).
  config(['$stateProvider', function($stateProvider) {
  $stateProvider
      .state('phones', { 
          views: {
              'main': { template: 'phones.html', controller: PhonesCtrl },
              'hint': { template: { html: '@phones' } } 
          }
      })
      .state('tablets', { 
          views: {
              'main': { template: 'tablets.html', controller: TabletsCtrl },
              'hint': { template: { html: '@tablets' } } 
          }
      })
}]);

Just like we are use to.