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­{ 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 autoscroll=”co­ndi­tio­n”> Scroll into view on load
UI-Router Filters
string | isState alias for $‘stat­eName’)
string | includ­edB­yState alias for $­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
UI-Router Services
$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

Leave a Comment