Detailed Explanation of AngularJS ng app Instruction Example

2021-07-06 10:03:22
OfStack

AngularJS ng-app Directive

AngularJS instance

Let the body element be called the root element of the AngularJS application:


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body ng-app="">

<p> My first 1 Expressions : {{ 5 + 5 }}</p>

</body>
</html>

Run results:

My first expression: 10

Definition and usage

The ng-app directives are used to tell the AngularJS application that the current element is the root element.

All AngularJS applications must have a root element.

Only one ng-app directive is allowed in the HTML document, and if there are multiple ng-app directives, only the first one will be used.

Grammar


<element ng-app="modulename">
...
  In  ng-app  The content on the root element can contain  AngularJS  Code 
...
</element>

All HTML elements support this instruction.

Parameter value

值	描述
modulename	可选。指定载应用模块的名称。

AngularJS instance

Execute modules in an application


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>

<div ng-app="myApp" ng-controller="myCtrl">
{{ firstName + " " + lastName }}
</div>

<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
  $scope.firstName = "John";
  $scope.lastName = "Doe";
});
</script>

</body>
</html>

Running effect:

John Doe

The above is the data collation of AngularJS ng-app instructions, which will be supplemented in the future.