Repository files navigation

http://ui-router.github.io/sample-app-angularjs/#/mymessages/inbox/5648b50cc586cac4aed6836f

This sample app is intended to demonstrate a non-trivial ui-router application.

• Multiple sub-modules
• Managed state lifecycle
• Application data lifecycle
• Authentication (simulated)
• Authenticated and unauthenticated states
• REST data retrieval (simulated)
• Lazy loaded AngularJS module (contacts submodule)
• Sticky States withDeep State Redirect

We're using theState and Transition Visualizer to visually representthe 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 areentered when they were previously not active,exited and re-entered when parameters change,and how parent states whose parameters did not change areretained.

The application is written in ES6 (transpiled using babel), and utilizes ES6 modules.We are loading the modules and creating bundles using webpack 4.

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:

• Sub-module (feature) organization
  • Each feature gets its own directory.
  • Features contain states and components
  • Specific types of helper code (directives, services, etc)used only within a feature may live in a subdirectorynamed after its type (/mymessages/directives)
• Leveraging ES6 modules
  • Each state is defined in its own file
  • Each component (controller + template) is defined in its own file
  • Components exported themselves
  • Components are then imported into a states where they are composed into the state definition.
  • States export themselves
  • Thefeature.module.js imports all states for the feature and registers then with the$stateProvider
• A single angular module is defined for the entire application
  • Created, then exported frombootstrap/ngmodule.js
  • The ng module is imported into some other module whenever services, config blocks, directives, etc needto be registered with angular.

• Defining custom, app-specific global behaviors
  • Add metadata to a state, or state tree
  • Check for metadata in transition hooks
  • Example:routerhooks/redirectTo.js
    • If a transition directly to a state with aredirectTo property is started,the transition will be redirected to the state which the property names.
  • Example:routerhooks/authRequired.js
    • If a transition to a state with a truthydata.authRequired: true property is startedand the user is not currently authenticated
• Defining a default substate for a top-level state
  • Example: declaringredirectTo: 'welcome' inapp.states.js
• Defining a default parameter for a state
  • Example:folderId parameter defaults to 'inbox' inmymessages.states.js (folder state)
• Application data lifecycle
  • Data loading is managed by the state declaration, via theresolve: block
  • Data is fetched before the state isentered
  • Data is fetched according to state parameters
  • The state isentered when the data is ready
  • The resolved data is injected into the components
  • The resolve data remains loaded until the state is exited
• Lazy Loaded states
  • The Contacts submodule (all its states and components) are lazy loaded
  • The Contacts "future state" (a placeholder) is added inbootstrap/ngmodule.js
  • ocLazyLoad is used to lazy load the angular module
• Deep State Redirect (DSR)
  • DSR used on thecontacts andmymessages top level states
  • When a substate of a DSR state is activated, the state and parameters are memorized
  • Whencontacts ormymessages is activated again, the transition redirects to the memorized deep state and params
• Sticky States
  • Sticky States are enabled on thecontacts andmymessages top level states
  • The modules' views (including DOM) and state are retained when a different module is activated
  • When returning to the module, the inactive state is reactivated
  • The views are restored (unhidden)