In this article, we'll take a look at
Show
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=”state.name({ stateParam: value })“ |
| ui-sref-active=”activeClass” Applies the class if the nearest ui-sref or a descendant state is active |
| ui-sref-active-eq=”activeClass” Applies the class if the nearest ui-sref state is active |
| ui-view=”viewName” |
| <ui-view autoscroll=”condition”> Scroll into view on load |
UI-Router Filters
| string | isState alias for $state.is(‘stateName’) |
| string | includedByState alias for $state.includes(‘stateName’) |
UI-Router Events
| $stateChangeSuccess Fired after completion |
| $stateChangeError Fired on state resolution error USEFUL FOR DEBUGGING |
| $stateChangeStart |
| $stateNotFound |
| $viewContentLoading |
| $viewContentLoaded |
UI-Router Services
| $state |
| $stateParams contains current url params (tokens) as properties |
| $stateProvider config only |
| $urlRouterProvider config only |
$state Service
| go(string, [params], [options]) alias for transitionTo() |
| transitionTo(string, [params], [options]) ‘contact.detail’: go to ‘contact.detail’. ‘^’: go to parent. ‘^.sibling’: go to sibling. ‘.child.grandchild’: go to current state‘s [grand]child. |
| reload() Force reload current state tree |
| includes(string, [params]) {boolean} Specifies if passed state is currently active (ancestry) |
| is(string, [params]) {boolean} Specifies if passed state is current (exact) |
| href(string, [params], [options]) {string} |
| get([string]) {object|array} 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 {string|function} String containing template HTML or injectable function that returns the string value. (ignored if using views option) |
| templateUrl {string|function} String containing the path to HTML file or injectable function that returns the string value. (ignored if using views option) |
| controller {string|function} String name of the controller or the controller function (ignored if using views option) |
| abstract {boolean[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 |
| reloadOnSearch {boolean[true]} if false will not retrigger the same state when a query (search) parameter has changed. |
| params {array} parameter names or regular expressions when no URL is present. |
| views {object} controller and templates for specific views |
| data {object} stores static configuration data |
| resolve {object}
Creates injectable resources: |
Leave a Comment