Learn UI-Routing Series

Learn UI-Routing Series - Part 1 - Basics by @Akarif cc @CsharpCorner  #AngularJS #Angular

  • It is different from ngRoute as it changes your views, which are based on the State of the Application and not by route URL.
  • Ui-router Applications behaves like a state machine.
  • State is a basic building-block for UI-Router Application.
  • Instead of referencing a URL like HREF, it references a State and ui-sref Directive automatically builds a href attribute (), which is based on your State’s URL.
  • This Directive will add the active CSS class to the link when the target State is active.

Learn UI-Routing series.

@CsharpCorner: Learn UI-Routing Series – Part 1 – Basics by @Akarif cc @CsharpCorner #AngularJS #Angular

In the present scenario, AngularJS is the most trusted framework for the creation of Single Page Applications and for SPA (Single Page Application), and routing is one of the most important aspects. We want to keep our navigation feeling like a normal site and want to load the pages without refreshing the Browser. For this, we have to go through Angular routing i.e. ngRoute method.

Also, find my article to remove hash from URL here.

Before starting, you must have a basic knowledge about Angular UI.

What is Angular ui-Router?

ui-Router is a routing framework built by Angular UI team. It is different from ngRoute as it changes your views, which are based on the State of the Application and not by route URL.

It provides features such as States, Views, URLs, Parameter, Resolve Data and Transition.

Ui-router Applications behaves like a state machine. Let us take an example of an Application in which each feature is a set of the state for the Application. Only one State can be active at one time and the user must navigate from one State to another to activate a typical feature.

Some examples of States might be dashboard, messages, shoppingcart or blogentry.

State will be further explained in a future article.

While using ngRoute, one has to write ngInclude or some other methods and this can be confusing to a user. This method is appropriate in top-down view of the Application as all the States, routing and views are handled in on .config().

Here, I have used online CDN reference for AngularJS and UI-routerJS. Also, the order of the file must be, as shown above. UiRouter file must be placed after AngularJS file, followed by placing other JS files.

Here, we have added dependency for ui-router in our main module ‘helloworld’.

State is a basic building-block for UI-Router Application. This script object is a simple object definition of State definition. 

This State definition has 3 properties, which are given below.

Create another State ‘about’. Register both the $stateProvider in .config() block.

Because $stateProvider is an Angular Provider, you must inject it into a .config() block using the code. 

Add tag i.e. ViewPort in your HTML file. The tag is a ui-router ViewPort. Whenever the State is activated, the State’s view i.e. template will be loaded in the ViewPort.

Add some tag to show the links. When clicked, the links will be active in a State.

A ui-sref is a Directive, which behaves similar to HTML href. Instead of referencing a URL like HREF, it references a State and ui-sref Directive automatically builds a href attribute (), which is based on your State’s URL.

Add tag to the ui-sref links. This Directive will add the active CSS class to the link when the target State is active.

Finally, add the style tag and the active class to style the active link as Red and bold.

Hence, we have created a simple demo for routing with UI-Router. In the next part, we will cover UI-Router States in detail.

Learn UI-Routing Series

You might also like More from author

Comments are closed, but trackbacks and pingbacks are open.