Learn MVC Using Angular UI-Route9 min read

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.

home.html

homelist.html

datalist.html

multipleview.html

App.module.js

App.config.js

CarController.js

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:

index.cshtml

_Layout.cshtml

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

Conclusion

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!