Show Menu
Cheatography
  1. Home >
  2. Programming >

AngularUI Router Cheat Sheet by

AngularUI Router Quick Reference

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; }
                               
 

Metadata

  • Languages:
  • Published: 31st December, 2014
  • Last Updated: 13th May, 2016
  • Rated: 5 stars based on 4 ratings

Favourited By

mattsterp app.sparkler Vicnet archerdgreat maxcher bpj101 SwedeRacer MSC Web Solutions meabed zatatat

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