What is Angular UI-Route?

Angular UI is a routing framework for the client side single page Application and navigates between one view to another view. Angular UI-Route is not just the “Route URL” it maintains the application views based on hierarchical tree of the state. uiRoute provides a different approach than ngRoute and it provides it via AngularUI Team.

Why do we use Angular UI Route?

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

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

Nested views

angular UI

How to use UI-Route 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 in popup Window.

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 Angular UI-Route file.

  • Angular js Link.
  • Angular UI-Route Link.

angular UI

Create the new folder App, add HTML and Javascript file, as shown above.

Let’s show the file name and the code.

home.html

homelist.html

  1. Language List
  2. “Lang in Language”>{{ Lang }}

datalist.html

  1. <table class=“table table-hover table-striped table-bordered”>
  2.     <thead>
  3.         <tr>
  4.             <td>Car List</td>
  5.         </tr>
  6.     </thead>
  7.     <tbody>
  8.         <tr ng-repeat=“Car in CarList”>
  9.             <td>{{ Car}}</td>
  10.         </tr>
  11.     </tbody>
  12. </table>

multipleview.html

  1. <button class=“btn btn-primary”  ui-sref=“home”>Home</button>
  2. class=“row”>
  3. class=“col-sm-12”>
  4. “ViewOne”>
  5.     </div>
  6. </div>
  7. class=“row”>
  8. class=“col-sm-6”>
  9. “ViewTwo”>
  10.     </div>
  11. class=“col-sm-6”>
  12. “ViewThree”>
  13.     </div>
  14. </div>

App.module.js

  1. var uiroute = angular  .module(‘uiroute’, [‘ui.router’]);

App.config.js

  1. uiroute.config(function ($stateProvider, $urlRouterProvider) {
  2.     $urlRouterProvider.otherwise(‘/home’);
  3.     $stateProvider
  4.         // State managing 
  5.         .state(‘home’, {
  6.             url: ‘/home’,
  7.             templateUrl: ‘/App/Test/home.html’
  8.         })
  9.          // nested list with data
  10.         .state(‘home.template’, {
  11.             url: ‘/template’,
  12.             template: ‘Welcome to the C# Corner’
  13.         })
  14.         // nested list with controller
  15.         .state(‘home.list’, {
  16.             url: ‘/list’,
  17.             templateUrl: ‘/App/Test/homelist.html’,
  18.             controller: function ($scope) {
  19.                 $scope.Language = [‘C#’‘VB’‘JavaScript’,‘PHP’];
  20.             }
  21.         })
  22.         // State with multiple views
  23.         .state(‘multipleview’, {
  24.             url: ‘/multipleview’,
  25.             views: {
  26.                 : { templateUrl: ‘/App/Test/multipleview.html’ },
  27.                 ‘ViewOne@multipleview’: { template: ‘Welcome to the C# Corner!’ },
  28.                 ‘ViewTwo@multipleview’: {
  29.                     templateUrl: ‘/App/Test/dataList.html’,
  30.                     controller: ‘CarController’
  31.                 },
  32.                 ‘ViewThree@multipleview’: {
  33.                     templateUrl: ‘/App/Test/homelist.html’,
  34.                     controller: function ($scope) {
  35.                         $scope.Language = [‘C#’‘VB’‘JavaScript’‘PHP’];
  36.                     }
  37.                 }
  38.             }
  39.         });
  40.   });

CarController.js

  1. uiroute.controller(‘CarController’function ($scope) {
  2.     $scope.CarList = [‘Audi’‘BMW’‘Bugatti’‘Jaguar’];
  3. });

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 mentions ng-app Directive.

Step 4

Link the corresponding files in _Layout.html and mention the ui-view in

index.cshtml

_Layout.cshtml

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset=“utf-8” />
  5.     <meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
  6.     <title>@ViewBag.Title – My ASP.NET Application</title>
  7.     @Styles.Render(“~/Content/css”)
  8.     @Scripts.Render(“~/bundles/modernizr”)
  9. </head>
  10. <body>
  11. class=“navbar navbar-inverse navbar-fixed-top”>
  12. class=“container”>
  13. class=“navbar-header”>
  14.                 “button” class=“navbar-toggle” data-toggle=“collapse” data-target=“.navbar-collapse”>
  15.                     class=“icon-bar”>
  16.                     class=“icon-bar”>
  17.                     class=“icon-bar”>
  18.         </div>
  19.     </div>
  20. class=“container body-content” ng-app=“uiroute”>
  21.         @RenderBody()

  22. © @DateTime.Now.Year – My ASP.NET Application
  23.     @Scripts.Render(“~/bundles/jquery”)
  24.     @Scripts.Render(“~/bundles/bootstrap”)
  25.     “~/Plugin/angular/angular.min.js”>
  26.     “~/Plugin/angular-ui-router/release/angular-ui-router.min.js”>
  27.     “~/App/App.module.js”>
  28.     “~/App/App.config.js”>
  29.     “~/App/CarController.js”>
  30.     @RenderSection(“scripts”, required: false)
  31. </body>
  32. </html>

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 in the single page

angular UI

Conclusion

In this article, we have seen MVC, using Angular UI-Route. If you have any query, please ask me in comments section. Happy coding.

Advertisements