Angular JS ng-app directive
In this post, we will learn about np-app directive in Angular and its usages. ng-app is the simplest, easiest and most common way to bootstrap an Angular JS application.
The ng-app directive is a starting point of an AngularJS Application. It boots up the AngularJS framework automatically. AngularJS framework first checks for ng-app directive in a HTML document after the entire document gets loaded and if ng-app is found, it bootstraps itself and compiles the HTML template.
In simple terms, ng-app directive is used to auto-bootstrap an AngularJS application.
Typically ng-app directive should be placed near the root of an HTML document e.g. or tags, so that it can take control of the entire DOM of your html. It would still work if you place it in any DOM element. You can place only one ng-app directive in your HTML document. If there are more than one ng-app directive appears, the first ng-app appearance will be used.
Syntax
<element ng-app="angular.Module" [ng-strict-di="boolean"]> ... </element>
ng-app can be defined with an optional name for the application module. ng-strict-di ensures that app conforms with dependency injection guideline and will fail to run if it doesn’t.
Examples
<body ng-app="myApp">
<h1> Title</h1>
<div>
{{ "poop" + "code" }}
</div>
</body><body ng-app="myApp" ng-controller="myCtrlr">
<div>
{{ title }}
</div>
<script>
var app = angular.module('myApp', []);
app.controller("myCtrlr", function($scope) {
$scope.name = "Poopcode";
});
</script>
</body>Manually bootstrapping Angular application
We can manually bootstrap an Angular application without the ng-app directive using the angular.bootstrap method.
<script>
angular.element(document).ready(function () {
angular.bootstrap(document);
});
</script>
