Quick Reference

angular.module("myApp", [ui.state]).config(["$stateProvider", function($stateProvider){ $stateProvider.state(stateName, stateConfig); }])

state() Method Creates a new application state. Parameters are stateName and stateConfig.

stateName String A unique state name, e.g. "home", "about", "contacts". To create a parent/child state use a dot, e.g. "about.sales", "home.newest". Read more about nested states: Nested States & Nested Views

stateConfig Object

// The state() method takes a unique stateName (String) and a stateConfig (Object) $stateProvider.state(stateName, stateConfig);

// stateName can be a single top-level name (must be unique). $stateProvider.state("home", {});

// Or it can be a nested state name. This state is a child of the above "home" state. $stateProvider.state("home.newest", {});

// Nest states as deeply as needed. $stateProvider.state("home.newest.abc.xyz.inception", {});

// state() returns $stateProvider, so you can chain state declarations. $stateProvider.state("home", {}).state("about", {}).state("contacts", {});

// Now let's look at the stateConfig parameter $stateProvider.state("home", {

// Three ways to set up the template
// template: 			String HTML content
// templateUrl: 		String URL to template file OR
//						Function returns URL string
// templateProvider: 	function(){}, // Function returns HTML content string

// Examples
template: 			'<h1>My Template</h1>',
templateUrl: 		'home.tmpl.html',
					// Only gets one parameter, stateParams. Not injected.
templateUrl: 		function(stateParams){ return 'home' + stateParams.index + 'tmpl.html' },
templateProvider: 	templateProvider: function ($timeout, $stateParams) {
						return $timeout(function () { return '<h1>'+$stateParams.contactId+'</h1>' }, 100);
					},

// resolve:	Object {}
// keys - name of dependency to be injected into controller
// factory - {string|function} If string then it is alias for service. Otherwise if function, it is injected and return value it treated as dependency. If result is a promise, it is resolved before its value is injected into controller
resolve: { }
controller:

views: 

// An abstract state will never be directly activated, but can
// provide inherited properties to its common children states
abstract: true, // default is false

// Callback functions for when a state is entered and exited
// Good way to trigger an action or dispatch an event
// Callbacks are injected, including any resolves
onEnter: function(){},
onExit: function(){},

// Arbitrary data object, useful for custom data
data: {},

// Only use these properties if you are using object-based states
name: "stateName", //The name of the state - String
parent: parentState //The parent state object - Object

});

$state.transitionTo() $state.self $state.includes() $state.current

State Change Events All these events are fired at the $rootScope level. $stateChangeSuccess - fired once the state transition is complete. $stateChangeStart - fired when the transition begins. $stateChangeError - fired when an error occurs during transition. $viewContentLoaded - fired once per view when the view is loaded (after DOM is rendered)