解释AngularJS中的ng-app指令

在这篇文章中，我们将看到AngularJS中的ng-app指令，并将在例子的帮助下了解它的使用。

ng-app指令定义了一个AngularJS应用程序的开始。它初始化了AngularJS框架并指定了AngularJS应用程序的根元素。每个AngularJS应用程序必须包含一个根元素。在HTML文档被加载后，AngularJS框架会在页面中搜索ng-app指令，如果找到的话，它会自我引导并编译HTML模板。虽然你可以在任何DOM元素中指定ng-app指令，但建议在HTML文档的根中指定ng-app指令。

语法:

<element ng-app=""></element>

例子1：这个例子描述了**ng-app指令的使用，它有助于初始化Angular JS应用程序作为根元素。

<!DOCTYPE html>
<html>
 
<head>
    <title>ng-app directive</title>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.min.js">
    </script>
</head>
 
<body>
    <div>
         
<p>This is an expression: {{10+10}}</p>
 
    </div>
    <div ng-app="">
         
<p>This is an expression: {{10+10}}</p>
 
        <div>
             
<p>This is another expression: {{10+10}}</p>
 
        </div>
    </div>
</body>
</html>

解释：在这个例子中，有2个 <div>标签中。在第一个 <div>标签，有一个段落标签，它有一个信息和一个AngularJS表达式。但在输出中，我们可以看到表达式没有被评估。这是因为ng-app指令并没有在这个标签中指定。另一方面，ng-app指令被指定在第二个 <div>标签，所以该标签中的表达式会被评估并打印出相应的值。所以我们可以说，AngularJS框架只会处理应用了ng-app指令的DOM元素及其子元素。

输出:

解释AngularJS中的ng-app指令

ng-app directive

使用带有模块的ng-app：我们也可以在ng-app指令中指定一个模块。一个模块是应用程序不同部分的容器。它可以有控制器、指令、工厂、服务等。

语法:

<element ng-app="myApp"></element>

例子2：在这个例子中，我们用一个名为“myApp “的模块指定ng-app指令。

<!DOCTYPE html>
<html>
 
<head>
    <title>Using ng-app with a module</title>
 
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.min.js">
    </script>
</head>
 
<body>
    <div ng-app="myApp" ng-controller="myCtrl">
         
<p>Name: {{student.name}}</p>
 
         
<p>Subject: {{student.subject}}</p>
 
    </div>
    <script type="text/javascript">
        var app = angular.module("myApp", []);
        app.controller("myCtrl", function( $scope) {$ scope.student = {
                'name': 'GeeksforGeeks',
                'subject': 'AngularJS'
            }
        });
    </script>
</body>
</html>

解释：在上面的例子中，在

div>标签，因为我们在ng-app指令中指定了一个名为 “myApp “的模块，所以我们能够使用名为 “myCtrl“的控制器和它的属性，如学生对象。

输出:

解释AngularJS中的ng-app指令

ng-app指令与一个模块

注意。一个AngularJS应用程序，我们暂时只能有一个ng-app指令。如果这个指令在应用程序中使用超过一次，那么第一次出现的指令将被考虑。

例子3：在这个例子中，用户可以进行两个数字的加法、减法、乘法和除法。

<!DOCTYPE html>
<html>
 
<head>
    <title>
        Performing arithmetic operation with ng-app directive
    </title>
    <script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
    </script>
</head>
 
<body ng-app="myApp" ng-controller="myCtrl">
    <form>
        <label>Enter first number: </label>
        <input type="number" min="0" ng-model="number1">
        <br>
        <label>Enter second number:</label>
        <input type="number" min="0" ng-model="number2">
        <br><br>
        <button type="button"
                ng-click="add(number1,number2)">
                 Add
        </button>
        <button type="button"
                ng-click="subtract(number1,number2)">
                Subtract
        </button>
        <button type="button"
                ng-click="multiply(number1,number2)">
                Multiply
        </button>
        <button type="button"
                ng-click="divide(number1,number2)">
                Divide
         </button>
    </form>
     
<p>Output:
        <input type="text"
               value="{{answer}}"
               ng-disabled="true">
    </p>
 
 
    <script type="text/javascript">
        var app = angular.module("myApp", []);
        app.controller("myCtrl", function( $scope) {$ scope.answer = "";
             $scope.add = function(n1, n2) {$ scope.answer = n1 + n2;
            };
             $scope.subtract = function(n1, n2) {$ scope.answer = n1 - n2;
            };
             $scope.multiply = function(n1, n2) {$ scope.answer = n1 * n2;
            };
             $scope.divide = function(n1, n2) {$ scope.answer = n1 / n2;
            };
        })
    </script>
</body>
</html>

解释：在上面的例子中，我们用一个名为 “myApp “的模块指定了ng-app指令。这个模块有一个名为 “myCtrl “的控制器**。该控制器还具有加、减、乘、除的功能。这就是你如何使用模块和ng-app指令。

输出:

解释AngularJS中的ng-app指令