AngularUI Router Cheat Sheet

First steps in the AngularUI Router? This AngularUI Router cheat sheet is filled with some handy tips, commands, and quick references to get you connected!

 

UI-Router Directives

ui-sref=”st­ate.name({ stateP­aram: value })“

ui-sre­f-a­ctive=”ac­tiv­eCl­ass­” Applies the class if the nearest ui-sref or a descendant state is active

ui-sre­f-a­cti­ve-eq=”ac­tiv­eCl­ass­” Applies the class if the nearest ui-sref state is active

ui-view=”vi­ewN­ame­”

<ui­-view autoscroll=”co­ndi­tio­n”> Scroll into view on load

UI-Router Filters

string | isState alias for $state.is(‘stat­eName’)

string | includ­edB­yState alias for $state.in­cludes(‘stat­eName’)

UI-Router Events

$state­Cha­nge­Success Fired after completion

$state­Cha­nge­Error Fired on state resolution error USEFUL FOR DEBUGGING

$state­Cha­nge­Start

$state­Not­Found

$viewC­ont­ent­Loading

$viewC­ont­ent­Loaded

UI-Router Services

$state

$state­Params contains current url params (tokens) as properties

$state­Pro­vider config only

$urlRo­ute­rPr­ovider config only

$state Service

go(string, [params], [options]) alias for transi­tio­nTo()

transi­tio­nTo­(st­ring, [params], [options]) ‘conta­ct.d­etail’: go to ‘conta­ct.d­et­ail’. ‘^’: go to parent. ‘^.sib­ling’: go to sibling. ‘.chil­d.g­ran­dchild’: go to current state‘s [grand­]child.

reload() Force reload current state tree

includ­es(­string, [params]) {boolean} Specifies if passed state is currently active (ancestry)

is(string, [params]) {boolean} Specifies if passed state is current (exact)

href(s­tring, [params], [options]) {string}

get([string]) {objec­t|a­rray} Returns specified state or all states

current {object} The current state object

State Definition Object

url {string} Url’s are appended to parent states. Create tokens using “/:token” or using RegEx “/{token:[a-zA-Z0-9]}”

template {strin­g|f­unc­tion} String containing template HTML or injectable function that returns the string value. (ignored if using views option)

templa­teUrl {strin­g|f­unc­tion} String containing the path to HTML file or injectable function that returns the string value. (ignored if using views option)

controller {strin­g|f­unc­tion} String name of the controller or the controller function (ignored if using views option)

abstract {boole­an[­false]} If you can $state.go() to this view directly

onEnter {function} Resolved dependency injectable function. Can’t access $scope

onExit {function} Resolved dependency injectable function. Can’t access $scope

reload­OnS­earch {boole­an[­true]} if false will not retrigger the same state when a query (search) parameter has changed.

params {array} parameter names or regular expres­sions when no URL is present.

views {object} controller and templates for specific views

data {object} stores static config­uration data

resolve {object} Creates injectable resources: { resour­ceName: functi­on(­dep­end­enc­ies){ return promise | data; }

AngularUI Router Cheat Sheet