Here give you detailed example how to use routing in angularjs.
Routing is main and important feature of angularjs. Using routing you can build single page applications with multiple views. If you use angular routing in your project when you run your project first time the whole page after that only dynamically page change without loading whole page. ng-route provides the routing of html templates,
In Html add:-
<script src="angular.js">
<script src="angular-route.js">
In Javascript add:-
var app = angular.module("appName", ['ngRoute']);
app.config(function($routeProvider) {
$routeProvider
.when('/view1', {
templateUrl: 'test.html',
controller: 'FirstController'
})
.when('/view2', {
templateUrl: 'tag.html',
controller: 'SecondController'
})
.otherwise({
redirectTo: '/test'
});
});
In index.html:-
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8">
<title>AngularJS Routing</title>
</head>
<body>
<div ng-app="mainApp">
<ng-view></ng-view>
</div>
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript" src="angular-route.min.js"></script>
<script type="text/javascript" src="main.js"></script>
</body>
</html>
test.html:-
<div class="container">
<h2> Welcome </h2>
<p>{{message}}</p>
<a href="#/viewStudents"> View Students List</a>
</div>
In tag.html:-
<div class="container">
<h2> View Students </h2>
Search:
<input type="text" ng-model="name" />
</div>
Hope you like the post . Please share and comment the queries below or customer care section.
Thanks,
0 Comments