Learn MVC Using Angular UI-Route

angular UI

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.

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

Let’s show the file name and the code.

home.html 

  1.  <div class="jumbotron text-center">  
  2.     <h1>AngularJS UI Route</h1>  
  3.     <a ui-sref=".template" class="btn btn-primary">Nested State</a>  
  4.     <a ui-sref=".list" class="btn btn-primary"> Nested State with Ctrl </a>  
  5.     <a class="btn btn-primary" ui-sref="multipleview">Multiple View</a>    
  6. </div>  
  7. <div ui-view></div>   

homelist.html 

  1. <div>Language List</div>  
  2. <div>  
  3.     <ul>  
  4.         <li ng-repeat="Lang in Language">{{ Lang }}</li>  
  5.     </ul>  
  6. </div>   

datalist.html 

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

multipleview.html 

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

App.module.js 

  1. var uiroute = angular  
  2.        .module('uiroute', ['ui.router']);   

App.config.js 

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

CarController.js 

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

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

  1. <div ui-view></div>  

_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.       
  10. </head>  
  11. <body>  
  12.     <div class="navbar navbar-inverse navbar-fixed-top">  
  13.         <div class="container">  
  14.             <div class="navbar-header">  
  15.                 <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">  
  16.                     <span class="icon-bar"></span>  
  17.                     <span class="icon-bar"></span>  
  18.                     <span class="icon-bar"></span>  
  19.                 </button>  
  20.                  
  21.                       
  22.                  
  23.             </div>  
  24.             
  25.         </div>  
  26.     </div>  
  27.     <div class="container body-content" ng-app="uiroute">  
  28.         @RenderBody()  
  29.         <hr />  
  30.         <footer>  
  31.             <p>© @DateTime.Now.Year - My ASP.NET Application</p>  
  32.         </footer>  
  33.     </div>  
  34.   
  35.     @Scripts.Render("~/bundles/jquery")  
  36.     @Scripts.Render("~/bundles/bootstrap")  
  37.     <script src="~/Plugin/angular/angular.min.js"></script>  
  38.     <script src="~/Plugin/angular-ui-router/release/angular-ui-router.min.js"></script>  
  39.     <script src="~/App/App.module.js"></script>  
  40.     <script src="~/App/App.config.js"></script>  
  41.     <script src="~/App/CarController.js"></script>  
  42.     @RenderSection("scripts", required: false)  
  43. </body>  
  44. </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
 
Refer my
previous 
Article  for angular js :
 

Conclusion

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

Up Next
    Ebook Download
    View all
    Learn
    View all