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.

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>
  6. </tr>
  7. </thead>
  8. <tbody>
  10. <tr ng-repeat="Car in CarList">
  11. <td>{{ Car}}</td>
  12. </tr>
  14. </tbody>
  15. </table>

multipleview.html

  1. <button class="btn btn-primary" ui-sref="home">Home</button>
  3. <div class="row">
  5. <div class="col-sm-12">
  6. <div ui-view="ViewOne"></div>
  7. </div>
  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) {
  3. $urlRouterProvider.otherwise('/home');
  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. })
  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. })
  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. }
  43. }
  45. });
  46. });

CarController.js

  1. uiroute.controller('CarController', function ($scope) {
  3. $scope.CarList = ['Audi', 'BMW', 'Bugatti', 'Jaguar'];
  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")
  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>
  23. </div>
  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>
  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.