Question

我有以下代码，其中输出为：add：1 + 2 = 3

    <body ng-app>
      add: <body ng-app="myApp">
 add: add: {{1}} + {{2}} = {{ 1+2 }} + {{2}} =  {{ 1+2 }}
</body>
 + {{2}} =  {{ 1+2 }}
    </body>

上面的代码没有ng-app指令值，但是当我用指令值编写相同的代码时，行为会有所不同，如下所示：

{{1}}

制作：{{1}}

表示应用程序无法识别角度。那是为什么？

Answer 1

表示应用程序无法识别角度。那是为什么？

不，这意味着Angular无法识别模块名称myApp。

此错误：

未捕获错误：[$ injector：modulerr]无法实例化模块 myApp由于：错误：[$ injector：nomod]模块＆＃39; myApp＆＃39;不可用

表示Angular正在搜索名为myApp的模块，但无法找到一个模块。所以，它打破了。

在Angular.js source中，您可以看到module（由名称解析）是可选的：

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) {
    config.strictDi = getNgAttribute(appElement, "strict-di") !== null;
    bootstrap(appElement, module ? [module] : [], config);
  }
}

在最后一行：bootstrap(appElement, module ? [module] : [], config);，它检查module是否有值，如果没有则传递空数组[]。这是bootstrap要处理的有效列表。

Answer 2

到目前为止，我知道当你没有在ngApp指令中添加名称时。在加载libary之后，Angular会自动查找您喜欢的模块。

关于错误，可能是由另一个脚本标记引起的。角度加载后，它会寻找你的模块，但不知何故你的文件没有被加载，所以你最终得到了一些错误。

解决方案将是：尝试将angular.js和脚本移动到标题。如果它不工作，那么在页脚之前移动。还要关注他们的顺序，如：

<script src="angular.js"></script>
<script src="app.js"></script>

使用angular.bootstrap()

或

angular.element(document).ready(function() {
  angular.bootstrap(document, ['myApp']);
});

使用应用名称和没有应用名称的ngApp行为的差异

2 个答案: