July 16, 2018

Angular Routing ng-view Directive

By admin AngularJs, Technology 0 Comments

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>

Angularjs ng-click Example

READ : Vuejs Simple Input Autocomplete Select using JSON

Post Views: 997