Angular Routing ng-view Directive
Today, We want to share with you Angular Routing ng-view Directive.
In this post we will show you Angularjs ng-view Event Example, hear for AngularJS Routing and Views Tutorial with Example we will give you demo and example for implement.
In this post, we will learn about AngularJS ng-view Directive with Example with an example.
The ngRoute ng-view directive module helps to your simple application to become a Single Page Application in angularjs.
There are 3 ways to define ng-view Directives
<div ng-view></div>
<ng-view></ng-view>
<div class="ng-view"></div>
angularjs ng-view Route Example
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
//routing used script
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>
<body ng-app="infinityknowApp">
<p><a href="#/">Home</a></p>
<a href="#contact">contact</a>
<a href="#gallary">gallary</a>
<a href="#privacy">privacy</a>
<div ng-view></div>
<p>
<hr/>
<h1>Solution of AngularJs All Problems For infinityknow.com</h1>
<h3>
<a href="https://infinityknow.com/" alt="Link of angularjs Solution example and demo">My First Web-Application in angularjs, So I am very happy and 1000+ more then people are used of infinityknow.com </a>
</p>
<script>
var ngApp = angular.module("infinityknowApp", ["ngRoute"]);
ngApp.config(function($routeProvider) {
$routeProvider
.when("/", {
templateUrl : "home.htm"
})
.when("/contact", {
templateUrl : "contact.htm"
})
.when("/gallary", {
templateUrl : "gallary.htm"
})
.when("/privacy", {
templateUrl : "privacy.htm"
});
});
</script>
<p>Click on the links to navigate to "contact.htm", "gallary.htm", "privacy.htm", or back to "Home.htm"</p>
</body>
</html>
Angularjs ng-view with Template Example
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
//routing used script
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>
<body ng-app="infinityknowApp">
<p><a href="#/">Home</a></p>
<a href="#post">post</a>
<a href="#page">page</a>
<p>Simple Click on This links to change Nav Menu and in this the content.</p>
<p>The HTML shown all this menu in the ng-view directive to routing data are written in the basic call template property of the angular call this $routeProvider.when method.</p>
<div ng-view></div>
<p>
<hr/>
<h1>Solution of AngularJs All Problems For infinityknow.com</h1>
<h3>
<a href="https://infinityknow.com/" alt="Link of angularjs Solution example and demo">My First Web-Application in angularjs, So I am very happy and 1000+ more then people are used of infinityknow.com </a>
</p>
<script>
var infinityknowApp = angular.module("infinityknowApp", ["ngRoute"]);
infinityknowApp.config(function($routeProvider) {
$routeProvider
.when("/", {
template : "<h1>Home</h1><p>Simple Click on This links to change Nav Menu and in this the content</p>"
})
.when("/post", {
template : "<h1>post</h1><p>posts contain around 75% information Data.</p>"
})
.when("/page", {
template : "<h1>page</h1><p>pagees contain around 95% information Data.</p>"
});
});
</script>
</body>
</html>