Question

我是AngularJS的新手，所以请原谅我这是非常基本的问题：

以下代码工作正常。因此，无论我在文本框中输入什么，都会按预期打印在控制台上：

<!DOCTYPE html>
<html lang="en-US" ng-app="">
   <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
   <body>
      <div >
         <p>Name : <input type="text" ng-model="name"></p>
         {{name}}
      </div>
   </body>
</html>

但是，如果我改变了ng-app =＆＃34;＆＃34;到ng-app =＆＃34; ＆＃34;或任何其他文本，如ng-app =＆＃34; abc＆＃34;在上面的代码中，它不起作用。我的理解是它需要一个具有该名称或空名称的模块，但是当它使用ng-app =＆＃34;＆＃34;时，它意味着什么。 / p>

Answer 1

这是一个很好的问题，我们很多人可能都不会想到它为什么会起作用。我在这里解释一下。

以下是您的问题的答案。

每当您通过AngularJs或script-tag，Bower等在项目中加入npm时，都会加载名为Angular.js的文件。

此文件具有许多正常Js文件包含的功能。其中一个是angularInit。

<强> angularInit：

此函数负责检测给定的module name，并将此模块名称与angular.module()匹配。

查看angulatInit function。

function angularInit(element, bootstrap) {
  var appElement,
      module,
      config = {};

  // The element `element` has priority over any other element.
  forEach(ngAttrPrefixes, function(prefix) {
    var name = prefix + 'app';

    if (!appElement && element.hasAttribute && element.hasAttribute(name)) {
      appElement = element;
      module = element.getAttribute(name);
    }
  });
  forEach(ngAttrPrefixes, function(prefix) {
    var name = prefix + 'app';
    var candidate;

    if (!appElement && (candidate = element.querySelector('[' + name.replace(':', '\\:') + ']'))) {
      appElement = candidate;
      module = candidate.getAttribute(name);
    }
  });
  if (appElement) {
    if (!isAutoBootstrapAllowed) {
      window.console.error('AngularJS: disabling automatic bootstrap. <script> protocol indicates ' +
          'an extension, document.location.href does not match.');
      return;
    }
    config.strictDi = getNgAttribute(appElement, 'strict-di') !== null;
    bootstrap(appElement, module ? [module] : [], config);
  }
}

如果我们提取该功能的某些部分，

 forEach(ngAttrPrefixes, function(prefix) {
    var name = prefix + 'app';

    if (!appElement && element.hasAttribute && element.hasAttribute(name)) {
      appElement = element;
      module = element.getAttribute(name);
    }
  });

以上部分是魔术发生的地方。

首先请参阅 ngAttrPrefixes ，这是array

<强> var ngAttrPrefixes = ['ng-', 'data-ng-', 'ng:', 'x-ng-'];

对该部分代码的解释：

ngAttrPrefixes使用forEach函数循环。 code: (forEach(ngAttrPrefixes, function(prefix) {)
我们正在搜索ng-app或＆＃39; data-ng-app＆＃39;或者＆＃39; ng：app＆＃39;或者＆＃39; x-ng-app＆＃39;使用code: (var name = prefix + 'app')
如果元素包含其中任何一个元素，（例如：）(code: if (!appElement && element.hasAttribute && element.hasAttribute(name)) {)
将该元素分配给名为appElement的变量。 (code: appElement = element;)
该属性的值存储在模块中。 (code: module = element.getAttribute(name);)

因此，module 变量获取ng-app的值。

在一些代码行之后，你可以看到一行，

<强> bootstrap(appElement, module ? [module] : [], config);

此处角度使用ng-app

代码，module ? [module] : []表示，

如果

module变量中有一个值我们在上面看到。然后在数组中取[module]并搜索该模块。

<强>否则

取[]并执行代码而不搜索模块。

所以，

如果ng-app =＆＃34; myApp＆＃34;，则模块将为myApp，它将在myApp 中搜索angular.element("myApp")模块

Eg: <div ng-app="myApp">

如果ng-app = "" or ng-app，那么模块将为""，其值为[]

Eg: <div ng-app=""> / Eg: <div ng-app>

因此，它将在不搜索模块的情况下执行。

以上代码的结论：

因此，如果ng-app=""，条件module ? [module] : []将失败，结果将为[]，并且不会搜索模块。此行回答了您的问题。

修改您的评论：

三元运算符不仅仅检查boolean's，它会检查特定变量的存在。

例如：

＆＃13;
＆＃13;
var a = "Present" a ? console.log("a is present but not boolean") : console.log("a is absent")
＆＃13;
＆＃13;
＆＃13;

请运行以上示例以澄清您的疑问。

Answer 2

检查以下代码

<!DOCTYPE html>
    <html lang="en-US" >
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    <body>
    <div ng-app="" >
      <p>Name : <input type="text" ng-model="name"></p>
    {{name}}
    </div>
    </body>

ng-app如何与AngularJs中的空白模块一起使用

2 个答案: