You can run and edit this live in your browser using https://stackblitz.com/github/ui-router/sample-app-angular-hybrid
This sample app is intended to demonstrate a non-trivial ui-router application.
npm install
npm start
The sample app uses the Angular CLI. However, there is also a branch which demonstrates a custom webpack config) but no angular-cli.
We're using the State and Transition Visualizer to visually represent the current state tree, as well as the transitions between states. Explore how transitions work by hovering over them, and clicking to expand details (params and resolves).
Note how states are entered when they were previously not active, exited and re-entered when parameters change, and how parent states whose parameters did not change are retained. Each of these (exited, entered, retained) correspond to a Transition Hook.
The application is written in Typescript and utilizes ES6 modules. We are loading and bundling modules using webpack.
There are many ways to structure a ui-router app. We aren't super opinionated on application structure. Use what works for you. We organized ours in the following way:
/mymessages/directives
)feature.module.js
imports all states for the feature and registers then with the $stateProvider
bootstrap/ngmodule.js
routerhooks/redirectTo.js
redirectTo
property is started,
the transition will be redirected to the state which the property names.routerhooks/authRequired.js
data.authRequired: true
property is started
and the user is not currently authenticatedredirectTo: 'mymessages.folder'
in mymessages/mymessages.states.js
(mymessages state)folderId
parameter defaults to 'inbox' in mymessages/mymessages.states.js
(folder state)resolve:
blockNgModule
. It is defined as a "future state", and lazy loaded just before any contacts state is activated.