Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Learn MVC Using Angular UI-Router

DZone's Guide to

Learn MVC Using Angular UI-Router

Looking for a better way to maintain your web application views? Learn how to use Angular UI-Router and ASP.NET MVC to get the job done.

· Web Dev Zone ·
Free Resource

Deploying code to production can be filled with uncertainty. Reduce the risks, and deploy earlier and more often. Download this free guide to learn more. Brought to you in partnership with Rollbar.

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 

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


homelist.html 

<div>Language List</div>  
<div>  
    <ul>  
        <li ng-repeat="Lang in Language">{ Lang }</li>  
    </ul>  
</div>   


datalist.html 

<table class="table table-hover table-striped table-bordered">  
    <thead>  
        <tr>  
            <td>Car List</td>  

        </tr>  
    </thead>  
    <tbody>  

        <tr ng-repeat="Car in CarList">  
            <td>{ Car}</td>  
        </tr>  

    </tbody>  
</table>   


multipleview.html 

<button class="btn btn-primary"  ui-sref="home">Home</button>  

<div class="row">  

    <div class="col-sm-12">  
        <div ui-view="ViewOne"></div>  
    </div>      

</div>  
<div class="row">  
    <div class="col-sm-6">  
        <div ui-view="ViewTwo"></div>  
    </div>  
    <div class="col-sm-6">  
        <div ui-view="ViewThree"></div>  
    </div>  
</div>   


App.module.js 

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


App.config.js 

uiroute.config(function ($stateProvider, $urlRouterProvider) {  

    $urlRouterProvider.otherwise('/home');  

    $stateProvider  
        // State managing   
        .state('home', {  
            url: '/home',  
            templateUrl: '/App/Test/home.html'  
        })  
         // nested list with data  
        .state('home.template', {  
            url: '/template',  
            template: 'Welcome to the C# Corner'  
        })  

        // nested list with controller  
        .state('home.list', {  
            url: '/list',  
            templateUrl: '/App/Test/homelist.html',  
            controller: function ($scope) {  
                $scope.Language = ['C#', 'VB', 'JavaScript','PHP'];  
            }  
        })  

        // State with multiple views  
        .state('multipleview', {  
            url: '/multipleview',  
            views: {  
                '': { templateUrl: '/App/Test/multipleview.html' },  
                'ViewOne@multipleview': { template: 'Welcome to the C# Corner!' },  
                'ViewTwo@multipleview': {  
                    templateUrl: '/App/Test/dataList.html',  
                    controller: 'CarController'  
                },  
                'ViewThree@multipleview': {  
                    templateUrl: '/App/Test/homelist.html',  
                    controller: function ($scope) {  
                        $scope.Language = ['C#', 'VB', 'JavaScript', 'PHP'];  
                    }  
                }  

            }  

        });  
  });   


CarController.js 

uiroute.controller('CarController', function ($scope) {  

    $scope.CarList = ['Audi', 'BMW', 'Bugatti', 'Jaguar'];  

});   


Route Module

“ui-router” - dependence module.

“$stateProvider, $urlRouterProvider” – state and route provider.

“$state”- Getting a 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 here, as shown below:

index.cshtml

<div ui-view></div>  


_Layout.cshtml 

<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="utf-8" />  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>@ViewBag.Title - My ASP.NET Application</title>  
    @Styles.Render("~/Content/css")  
    @Scripts.Render("~/bundles/modernizr")  

</head>  
<body>  
    <div class="navbar navbar-inverse navbar-fixed-top">  
        <div class="container">  
            <div class="navbar-header">  
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">  
                    <span class="icon-bar"></span>  
                    <span class="icon-bar"></span>  
                    <span class="icon-bar"></span>  
                </button>  



            </div>  

        </div>  
    </div>  
    <div class="container body-content" ng-app="uiroute">  
        @RenderBody()  
        <hr />  
        <footer>  
            <p>© @DateTime.Now.Year - My ASP.NET Application</p>  
        </footer>  
    </div>  

    @Scripts.Render("~/bundles/jquery")  
    @Scripts.Render("~/bundles/bootstrap")  
    <script src="~/Plugin/angular/angular.min.js"></script>  
    <script src="~/Plugin/angular-ui-router/release/angular-ui-router.min.js"></script>  
    <script src="~/App/App.module.js"></script>  
    <script src="~/App/App.config.js"></script>  
    <script src="~/App/CarController.js"></script>  
    @RenderSection("scripts", required: false)  
</body>  
</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 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!

If you enjoyed this article, please refer to my other article on JavaScript: Learn Basics Of MVC Using AngularJS

Deploying code to production can be filled with uncertainty. Reduce the risks, and deploy earlier and more often. Download this free guide to learn more. Brought to you in partnership with Rollbar.

Topics:
web dev ,angular ,asp.net mvc ,angular ui

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}