Learn MVC Using Angular UI-Route

Angular UI is a routing framework for a client-side, single page application and navigates from one view to another view. Angular UI-Router, however, is not just the “Route URL”; it maintains the application views based on a hierarchical tree of state. UI-Router provides a different approach than ngRoute, which we will be going over in this article. Also, the Angular UI-Router GitHub page can be found here.

Why Do We Use Angular UI-Router?

ngRoute is an Angular Core module, which is good for a basic route concept, but UI-Router contributes two different types of concepts, which are given below.

  • State of the Application.
  • Nested views of the complex page.

Example of a Nested View

angular UI

How to Use UI-Router in ASP.NET MVC

Step 1

Open Visual Studio 2017 and go to File > New > Project.

Select the Web template and ASP.NET Web Application, as shown below:
angular UI

Step 2

Choose MVC in ASP.NET 4.6 templates.

angular UI

After the popup window, it will directly open the project solution, as shown below.

angular UI

Step 3

Download AngularJS and the Angular UI-Router file.

  • AngularJS Link.
  • Angular UI-Router Link.
    angular UI

Create the new folder app, and add HTML and Javascript files, as shown above.

Let’s show the file name and the code.








Route Module:

“ui-router” – dependence module.
“$stateProvider, $urlRouterProvider” –state & Route provider
“$state”- Getting Parameter as a service
“$urlRouterProvider.otherwise”-default route provider
“ui-view” – template view directive.
“ui-sref” -link directive.
“uiroute” –this is the module name and mention the ng-app directive.

Step 4

Link the corresponding files in _Layout.html and mention the ui-view here, as shown below:



Step 5

Once the above step completes, run the Application or click F5. The output is opened as a default browser.

Output 1 – Following $State

angular UI

Output 2

angular UI

Output 3 – Nested View Using Controller

angular UI

Output 4 – Multiple Views of the Single Page

angular UI


In this article, we have seen MVC, using Angular UI-Router. If you have any queries, please ask me in the comments section.

Happy Coding!

Thiruppathi Rengasamy
I'm a Dotnet Developer & Blogger. And also I'm working as a senior software engineer. I would like to spend my precious time writing articles, research on .Net technologies, and learning new technologies.