DZone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
Refcards Trend Reports Events Over 2 million developers have joined DZone. Join Today! Thanks for visiting DZone today,
Edit Profile Manage Email Subscriptions Moderation Admin Console How to Post to DZone Article Submission Guidelines
View Profile
Sign Out
Refcards
Trend Reports
Events
Zones
Culture and Methodologies Agile Career Development Methodologies Team Management
Data Engineering AI/ML Big Data Data Databases IoT
Software Design and Architecture Cloud Architecture Containers Integration Microservices Performance Security
Coding Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Partner Zones AWS Cloud
by AWS Developer Relations
Culture and Methodologies
Agile Career Development Methodologies Team Management
Data Engineering
AI/ML Big Data Data Databases IoT
Software Design and Architecture
Cloud Architecture Containers Integration Microservices Performance Security
Coding
Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance
Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Partner Zones
AWS Cloud
by AWS Developer Relations
Securing Your Software Supply Chain with JFrog and Azure
Register Today

Trending

  • Microservices With Apache Camel and Quarkus
  • How To Approach Java, Databases, and SQL [Video]
  • Competing Consumers With Spring Boot and Hazelcast
  • Microservices With Apache Camel and Quarkus (Part 2)

Trending

  • Microservices With Apache Camel and Quarkus
  • How To Approach Java, Databases, and SQL [Video]
  • Competing Consumers With Spring Boot and Hazelcast
  • Microservices With Apache Camel and Quarkus (Part 2)
  1. DZone
  2. Coding
  3. Frameworks
  4. Learn MVC Using Angular UI-Router

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.

Thiruppathi Rengasamy user avatar by
Thiruppathi Rengasamy
CORE ·
Updated Jun. 05, 17 · Tutorial
Like (2)
Save
Tweet
Share
6.05K Views

Join the DZone community and get the full member experience.

Join For Free

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

AngularJS

Published at DZone with permission of Thiruppathi Rengasamy, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

Trending

  • Microservices With Apache Camel and Quarkus
  • How To Approach Java, Databases, and SQL [Video]
  • Competing Consumers With Spring Boot and Hazelcast
  • Microservices With Apache Camel and Quarkus (Part 2)

Comments

Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 600 Park Offices Drive
  • Suite 300
  • Durham, NC 27709
  • support@dzone.com

Let's be friends: