Learn MVC Using Angular UI-Router

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

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:

step 2

choose mvc in asp.net 4.6 templates.

after the popup window, it will directly open the project solution, as shown below.

step 3

download angularjs and the angular ui-router file.

• angularjs link .
• angular ui-router link .
  

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

output 2

output 3 - nested view using controller

output 4 - multiple views of the single page

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