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.
Join the DZone community and get the full member experience.
Join For Freeangular 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.
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
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