AngularJS Tutorial - Part 5.3 (ui-router with Parameter)

This is the AngularJS tutorial. This covers the below listed topics.

UI-Router :
This is third party module created for routing in AngularJS applications. These module provides an advanced routing in Single Page Applications (SPA)

angularjs-ui-router :
Html5Mode
Html5Mode true is not dynamic generate href. It is html5Mode combine with ui-router, automatically.

In ui-router:
$stateProvider provides interfaces to declare these states for your app.

Use the $locationProvider to configure how the application deep linking paths are stored.

uiview is a viewport component provided by UI-Router. When a state is activated, the state’s view (component) is rendered into the appropriate uiview viewport.

$state service is responsible for representing states as well as transitioning between them. It also provides interfaces to ask for current state or even states you're coming from.

ui-sref-active - A directive working alongside ui-sref to add classes to an element when the related ui-sref directive's state is active, and removing them when it is inactive. The primary use-case is to simplify the special appearance of navigation menus relying on ui-sref, by having the "active" state's menu button appear different, distinguishing it from the inactive menu items.

$stateParams - Is a service which is used to retrive the parameters which are configured in state

If you plan to use html5mode=true in your application, you need to change all link to href="/abc/xyz" without #.
If you plan to use html5mode=false, you need # before every link.
In original angular router:

You don't need to specify both case. All you need to do is set html5mode=true or false; without care about removing or adding #; just keep href="#/hellomoto" or href="#!/hellomoto" in both case.

The demo source code is available in below GitHub