I have 4+ experience and working as software Engineer with Hytech professionals India PVT ltd and also working as Consultant,Trainer,Blogger and Author on Microsoft technologies,Also I have Trained more than 500+ IT professionals.I have knowledge about Asp.net,C#,SQL,Project management,replication,MVC,WebApi,SSRS,PostMan,TFS,SVN,Swagger,WMI,Agile,SignalR,Angularjs,IIS configuration.

Part 12::What is Routing in AngularJs?

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
Routing Architecture
Routing Architecture .
 Step 1:-
  1. Create a module named mainApp and load ngRoute as a dependent module in your module.
  2. Configure the routes using $routeProvider.
  3. We use two paths in the example, /home and /viewStudents.
  4. We use only one controller in this example, StudentController
  5. 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.
  6. Save this file as main.js.
main.js:- 
var mainApp = angular.module("mainApp", ['ngRoute']);
mainApp.config(function($routeProvider) {
$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.";
});
  Step 2:-Create two html page
  home.html:-
<div class="container">
<h2> Welcome </h2>
<p>{{message}}</p>
<a href="#/viewStudents"> View Students List</a>
</div>
 viewStudents.html:-
<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.
  1. The ng-app auto-bootstraps our application mainApp
  2. The ngView directive is the placeholder of the views ( home.html and viewStudents.html).
  3. Include angular.min.js and angular-route.min.js in your application
  4. Include main.js which we have created in the first step.
  5. 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:-

  1. Save all the files in the same location.
  2. open index.html with your browser or type the URL in your browser, For example:yourLocationURL/index.html
Note:-You can refer this video to more understanding
You have just read an article that categorized by title AngularJs by title Part 12::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, 19 February 2016

There are currently no comments for "Part 12::What is Routing in AngularJs?"

Post a Comment

Life Is Complicated, But Now programmer Can Keep It Simple.