Description :
Ng-App is a directive that is basically bootstrap the angularjs application and this will be placed at the top root element of the tag like
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Welcome to LearnKode - A code learning platform</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div ng-app="appExample"><br />
<b>Inside ng-app directive.</b>
<hr />
<div ng-controller="ExampleController">
I can add: {{a}} + {{b}} = {{ a+b }}
</div>
<div ng-controller="ExampleController">
Name: <input ng-model="name"><br />
Hello, {{name}}!
</div>
</div>
<hr />
<b>Out of ng-App</b>
<div ng-controller="ExampleController">
I can't add: {{a}} + {{b}} = {{ a+b }}
</div>
</div>
<script>
var app = angular.module("appExample", []);
app.controller('ExampleController', ['$scope', function ($scope) {
$scope.a = 5;
$scope.b = 10;
}]);
</script>
</body>
</html>
Description :
In this example of Ng-App, We are going to create custom filter that will convert the message to uppercase. See the example
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Welcome to LearnKode - A code learning platform</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body ng-app="appExample">
<br />
<div class="container" ng-init="msg='LearnKode'">
<label>
Name: <input ng-model="msg" />
</label>
<br />
<b> {{msg | myUpperFilter}}</b>
</div>
<script>
var app = angular.module("appExample", []);
app.filter("myUpperFilter", function () {
return function (input) {
return input.toUpperCase();
}
})
</script>
</body>
</html>
Description :
In this example of Ng-App, We will assign empty value for ng-app and everything works perfectly. See the code
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Welcome to LearnKode - A code learning platform</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
</head>
<body>
<div ng-app="">
<p>Name: <input type="text" ng-model="name"></p>
<p ng-bind="name"></p>
</div>
</body>
</html>
Description :
Another example of Ng-App with empty ng-app value. See the code
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Welcome to LearnKode - A code learning platform</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
</head>
<body>
<div ng-app="" ng-init="firstName='LearnKode'">
<p>The name is <span ng-bind="firstName"></span></p>
</div>
</body>
</html>
Description :
Another example of Ng-App..
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Welcome to LearnKode - A code learning platform</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
First Name: <input type="text" ng-model="fName"><br>
Last Name: <input type="text" ng-model="lName"><br>
<br>
Full Name: {{fName + " " + lName}}
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function ($scope) {
$scope.fName = "LearnKode";
$scope.lName = ".com";
});
</script>
</body>
</html>
Description :
Another example of Ng-App where we are initializing the values in ng-init and empty ng-app but everything work just perfectly. See the code
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Welcome to LearnKode - A code learning platform</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
</head>
<body>
<div ng-app="" ng-init="qt=3;rt=50">
<br />
Quantity: <input type="number" ng-model="qt"><br />
Costs: <input type="number" ng-model="rt"><br />
Total : {{ qt * rt }}
</div>
</body>
</html>
Description :
In this example of Ng-App, we will initialize the char array and loop thro it. See the code:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Welcome to LearnKode - A code learning platform</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
</head>
<body>
<div ng-app="" ng-init="chars=['L','e','a','r','n','K','o','d','e']">
<span ng-repeat="c in chars">
{{ c }}
</span>
</div>
</body>
</html>
Description :
If we add math formula outside the Ng-App then that will not work whereas if we put that inside ngapp then the value will be calculated. See the code
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Welcome to LearnKode - A code learning platform</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
</head>
<body>
<div>
Out side from ng-app: {{2/2}}
</div>
<div ng-app>
In side ng-app: {{5/2}}
<div>
In side ng-app: {{10/2}}
</div>
</div>
<div>
Out side from ng-app: {{2/2}}
</div>
</body>
</html>