Angular ng-app directive Example

Today, We want to share with you Angular ng-app directive Example.
In this post we will show you Angular ng-app directive Example, hear for Angular ng-app directive Example we will give you demo and example for implement.
In this post, we will learn about Angular ng-app directive Example with an example.

ng-app directive : Example

Body element become(ng-app) the root element for the AngularJS app’s.
ng-app module to load with the application in AngularJS.
and it’s a optional directive.

The ng-app directive says to AngularJS that the

or any html element is the “owner” of an AngularJS app’s.

READ : AngularJS Custom Directives example - Angular Directives

Syntax of The ng-app directive

 
...
...Something
  content inside the root element for the AngularJS app's.
...Something
...

Example 1 : The ng-app directive



    <title>Example of The ng-app directive</title>
    <a href="https://infinityknow.com/libs/angular.min.js">https://infinityknow.com/libs/angular.min.js</a>


    <h1>Example of The ng-app directive</h1>
<div>
	{{8/8}}
</div>
<div id="simplemydiv">
	{{9/2}}
	<div>
		{{25/3}}

	</div>
</div>
<div>
	{{4/6}}
</div>

Example 2 : ng-app with App Module



    <title>Example of ng-app with App Module</title>
    <a href="https://infinityknow.com/libs/angular.min.js">https://infinityknow.com/libs/angular.min.js</a>


    <h1>Example of The ng-app directive</h1>
<div>
	{{8/8}}
</div>
<div id="simplemydiv">
	{{9/2}}
	<div>
		{{25/3}}

	</div>
</div>
<div>
	{{4/6}}
</div> 

        var app = angular.module('myFirstApp', []);

Example 3 : AngularJS Multiple ng-app within a page



    <title>AngularJS Multiple ng-app within a page</title>
    <a href="https://infinityknow.com/libs/angular.min.js">https://infinityknow.com/libs/angular.min.js</a>


    <h1>Example of The ng-app directive</h1>
<div id="App1">
  <h1>Your order</h1>
  <div>
    <span>{{item.product_name}}</span>
    <span>{{item.price | currency}}</span>
    <button>Remove</button>
  </div>
</div>

<div id="Appmodule2">
  <h1>List of username</h1>
  <div>
    <p>{{_name.username}}</p>
  </div>
</div>

var purchaseCartModule = angular.module("purchaseCart", [])
purchaseCartModule.controller("purchaseCartController",
  function($scope) {
    $scope.items = [{
      product_name: "www.infinityknow.com",
      price: 950000
    }, {
      product_name: "www.infinityknow.com",
      price: 890005
    }, {
      product_name: "www.w3free.blogspot.com",
      price: 598695
    }];
    $scope.remove = function(index) {
      $scope.items.splice(index, 1);
    }
  }
);
var usernameModule = angular.module("usernameList", [])
usernameModule.controller("clientnameCtrl",
  function($scope) {
    $scope.username = [{
      username: "Dhaval"
    }, {
      username: "Krunal"
    }];
  }
);
angular.bootstrap(document.getElementById("Appmodule2"), ['usernameList']);

Post Views: 1,307