案例1：

AngularJS样本申请

  <div ng-app = "">
     <input type="text" autofocus="autofocus" placeholder="Enter your name"         
           ng-model="name"><br>
     Hai {{name}}!
  </div>

案例2：

AngularJS样本申请

  <div ng-app = "mainApp">
     <input type="text" autofocus="autofocus" placeholder="Enter your name" 
          ng-model="name"><br>
     Hai {{name}}!
  </div>

我在案例1中得到了所需的输出，在案例2中，我输出 Hai {{name}}！

请告诉我两种情况之间的区别以及命名ng-app模块如何影响输出。

Answer 1

首先，尝试理解 ng-app 的概念。

使用此指令自动引导AngularJS应用程序。 ngApp指令指定应用程序的根元素，并且是   通常放置在页面的根元素附近 - 例如在...上    或标签。


ng-app表示：该页面中包含Angular！

纳克应用内=＆＃34;模块＆＃34;意思是：该页面中包含Angular并且是必需的   控件/服务/等在该模块中定义。

ng-app定义应用程序的主模块或引导程序模块   应该执行应用程序的初始化任务。

就像在java中一样，你有很多方法和类，但你定义了一个main 方法作为起点。同样，在角度你有很多模块，但是，您将一个模块定义为应用程序的起始点。

案例1：这将在全局范围内定义控制器功能。

虽然Angular允许您在全局范围内创建Controller函数，但不建议这样做。在实际应用程序中，您应该将Angular模块的.controller方法用于您的应用程序

<强> HTML

<div ng-app="" ng-controller="GreetingController">
     <input type="text" autofocus="autofocus" placeholder="Enter your name"         
           ng-model="name"><br>
     Hai {{name}}!
</div>

<强>角

function GreetingController($scope) {
  $scope.name = "Hello";
}

案例2：这将定义模块范围

您可以指定AngularJS模块作为应用程序的根模块。当应用程序被引导时，该模块将被加载到$ injector中。

<强> HTML

<div ng-app="myApp" ng-controller="GreetingController">
     <input type="text" autofocus="autofocus" placeholder="Enter your name"         
           ng-model="name"><br>
     Hai {{name}}!
</div>

<强>角

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

myApp.controller('GreetingController', ['$scope', function($scope) {
  $scope.name = 'Hola!';
}]);

官方文件ng-app

AngularJs中ng-app指令的功能

案例1：

AngularJS样本申请

案例2：

AngularJS样本申请

1 个答案: