Show Menu

AngularUI Router Cheat Sheet by

AngularUI Router Quick Reference
javascript     router     angularjs     js     angular     angular-ui     angularui     ui-router     angular-ui-router

UI-Router Directives

ui-s­ref­=­"­sta­te.n­ame({ stateP­aram: value })"
ui-s­ref­-ac­tiv­e­="ac­tiv­eCl­ass­"
Applies the class if nearest ui-s­ref or a descen­dant state is active
Applies the class if nearest ui-s­ref state is active
ui-v­iew­­="vi­ewN­ame­"
<ui­-view auto­scr­oll­="c­ond­iti­on"­>
Scroll into view on load

UI-Router Filters

string | isSt­ate
alias for $sta­te.i­s­('­sta­teN­ame')
string | incl­ude­dBy­State
alias for $sta­te.i­nc­lud­es­('­sta­teN­ame')

UI-Router Events

$sta­teC­han­geS­ucc­ess
Fired after completion
$sta­teC­han­geE­rror
Fired on state resolution error USEFUL FOR DEBUGG­ING
$sta­teC­han­geS­tart
$sta­teN­otF­ound
$vie­wCo­nte­ntL­oad­ing
$vie­wCo­nte­ntL­oaded

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

alias for tran­sit­ion­To()
‘con­tac­t.d­eta­il': go to ‘conta­ct.d­et­ail'. ‘^’: go to parent. ‘^.s­ib­lin­g’: go to sibling. ‘.ch­ild.gr­and­chi­ld’: go to current state's [grand­]child.
Force reload current state tree
Specifies if passed state is currently active (ancestry)
Specifies if passed state is current (exact)
Returns specified state or all states
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]}"
temp­late {stri­ng|­fun­ction}
String containing template HTML or injectable function that returns the string value. (ignored if using views option)
temp­lat­eUrl {stri­ng|­fun­ction}
String containing path to HTML file or injectable function that returns the string value. (ignored if using views option)
cont­rol­ler {stri­ng|­fun­ction}
String name of controller or the controller function (ignored if using views option)
abst­ract {bool­ean­[fa­lse]}
If you can $sta­te.g­o() to this view directly
onEn­ter {func­tion}
Resolved dependency injectable function. Can't access $scope
onExit {func­tion}
Resolved dependency injectable function. Can't access $scope
relo­adO­nSe­arch {bool­ean­[tr­ue]}
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}
cont­rol­ler and temp­lates for specific views
data {object}
stores static config­uration data
reso­lve {object}
Creates injectable resources: { resour­ceName: functi­on(­dep­end­enc­ies){ return promise | data; }

Download the AngularUI Router Cheat Sheet

1 Page
//media.cheatography.com/storage/thumb/proloser_angularui-router.750.jpg

PDF (recommended)

Alternative Downloads

Share This Cheat Sheet!

Like this cheat sheet? Check out our sponsors!

Readable.io is a collection of tools to make your writing better. More readable content means higher conversion rates and better reader engagement. Measure website and document readability, measure keyword density and more!

Click Here To Get Started!

 

Comments

No comments yet. Add yours below!

Add a Comment

Your Comment

Please enter your name.

    Please enter your email address

      Please enter your Comment.

          Related Cheat Sheets

          More Cheat Sheets by ProLoser

          AngularJS Cheat Sheet
          Bacon.js Cheat Sheet