AngularJS routes empower you to make diverse URLs for various substance in your application. Having diverse URLs for various substance empowers the client to bookmark URLs to particular substance, and send those URLs to companions and so on. In AngularJS each such bookmarkable URL is known as a routes.
AngularJS routes empowers you to demonstrate distinctive substance relying upon what routes is picked. A routes is indicated in the URL after the # sign. In this way, the accompanying URL's all point to the same AngularJS application, however every point to various routes
Step 1:-
home.html:-
AngularJS routes empowers you to demonstrate distinctive substance relying upon what routes is picked. A routes is indicated in the URL after the # sign. In this way, the accompanying URL's all point to the same AngularJS application, however every point to various routes
| Routing Architecture . |
- Create a module named mainApp and load ngRoute as a dependent module in your module.
- Configure the routes using $routeProvider.
- We use two paths in the example, /home and /viewStudents.
- We use only one controller in this example, StudentController
- StudentController is initialized with an array of students and a message. We will be showing the message in the home page and the students list in viewStudents page.
- Save this file as main.js.
main.js:-
var mainApp = angular.module("mainApp", ['ngRoute']);
mainApp.config(function($routeProvider) {Step 2:-Create two html page
$routeProvider
.when('/home', {
templateUrl: 'home.html',
controller: 'StudentController'
})
.when('/viewStudents', {
templateUrl: 'viewStudents.html',
controller: 'StudentController'
})
.otherwise({
redirectTo: '/home'
});
});
mainApp.controller('StudentController', function($scope) {
$scope.students = [
{name: 'Bikesh', city:'Noida'},
{name: 'Brijesh', city:'Sikkim'},
{name: 'Dinesh', city:'UP'}
];
$scope.message = "Click on the hyper link to view the students list.";
});
home.html:-
<div class="container">viewStudents.html:-
<h2> Welcome </h2>
<p>{{message}}</p>
<a href="#/viewStudents"> View Students List</a>
</div>
<div class="container">
<h2> View Students </h2>
Search:
<br/>
<input type="text" ng-model="name" />
<br/>
<ul>
<li ng-repeat="student in students | filter:name">{{student.name}} , {{student.city}}</li>
</ul>
<a href="#/home"> Back</a>
</div>
Step 2:-Create index.html page.
- The ng-app auto-bootstraps our application mainApp
- The ngView directive is the placeholder of the views ( home.html and viewStudents.html).
- Include angular.min.js and angular-route.min.js in your application
- Include main.js which we have created in the first step.
- Save the file as index.html
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="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.28/angular.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.28//angular-route.min.js"></script>
<script type="text/javascript" src="main.js"></script>
</body>
</html>
Run your application:-
- Save all the files in the same location.
- open index.html with your browser or type the URL in your browser, For example:yourLocationURL/index.html
You have just read an article that categorized by title AngularJs
by title What is Routing in AngularJs?. You can bookmark this page with a URL https://bikeshsrivastava.blogspot.com/2016/02/part-12what-is-routing-in-angularjs.html. Thank You!
Author:
Bikesh Srivastava - Friday, February 19, 2016
There are currently no comments for "What is Routing in AngularJs?"
Post a Comment