posted by  on  

If we want to navigate to different pages and also we want to follow SPA (Single Page Application) model, with no page reloading, we can use the "ng-Route" module.

The ngRoute module routes your application to different pages without reloading the entire application.

Example:

"View5.html"

<!DOCTYPE html>
<html ng-app="myApp">
<head>
	<title></title>
</head>

<body>
	<div ng-controller="indiaCtrl">
		{{ msg }}
		<br />
	</div>
	<div ng-view=""></div>
	<br />
	<a href="#/london">London</a>
	<a href="#/paris">Paris</a>
</body>
</html>

<script src="../JS/angular.min.js"></script>
<script src="../Scripts/angular-route.js"></script>
<script src="../JS/Script.js"></script>

Here we are going to use three "js" file.

first and second is "angular.js" and "angular-route.js" file, and last one is our own "Script.js" file.

Here "myApp" is our module name which we are going to use for our view, after that we have used "ng-controller" which is going to tell that which controller it has to use.

"<div ng-view=""></div>" this line is used to display our view into it(Dynamically). If we won't write it will not going to show our view.

we can write this also <ng-view></ng-view> to display view.

And we have two links to load view dynamically into "ng-view".

"View6.html" & "View7.html" are our dynamic view which will load when particular View is going to call.

"View6.html" & "View7.html"

<div>
	<div>
		{{ msg }}
	</div>
</div>

In "Script.js" we have specified a name of our module which is "myApp" and we are using "ngRoute" for routing.

After that, we have specified app.config() function for the different route based on our URL.

In that, we can specify templateUrl, template, HTML title, and controller.

templateUrl will specify that which view is going to display

template is used to generate HTML dynamically.

The controller is used to specify the name of the controller which we are going to use for that particular view, different controllers can be a load for different views.

"Script.js"

var app = angular.module("myApp", ["ngRoute"]);

app.config(function ($routeProvider) {
	$routeProvider
	.when("/", {
		template: "<h1>Main</h1>"
	})
	.when("/london", {
		templateUrl: "View6.html",
		controller: "londonCtrl"
	})
	.when("/paris", {
		templateUrl: "View7.html",
		controller: "parisCtrl"
	})
	.otherwise({
		redirectTo: "/",
		controller: "indiaCtrl"
	});
});

app.controller("indiaCtrl", function ($scope) {
	$scope.msg = "I Love My India";
});
app.controller("londonCtrl", function ($scope) {
	$scope.msg = "I love London";
});
app.controller("parisCtrl", function ($scope) {
	$scope.msg = "I love Paris";
});

Lateshtclick Technology Blog
Tags AngularJS
posted by Latesht Click Latesht Click

Comments


Leave a Reply

Feel free to contribute!
Comment:
Name*:
Email*: