AngularJS渲染过程

Question

我在一个不好的JS项目中工作，页面渲染是用JQuery函数实现的。

$("#sameID").html(data);

使用这个，这里的人可以加载一个.html页面(我知道，这很糟糕，但现在不能改变)

因此，使用此函数，脚本在以下html页面上发出get请求：

test.html

<div ng-app="myApp">
    <h2>Todo {{1 + 1}}!</h2>
</div>
<script src="angular.js"></script>
<script src="index.js"></script>

index.js

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

但是，如果我删除<div ng-app="myApp"> works，我总是会遇到这个错误。

Error: [$injector:nomod] Module 'myApp' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.

Answer 1

您必须使用angular.bootstrap动态引导模块

<div id="sameID"></div>
<script>
  $(function() {
    var hardCodedHtml = "<div><h2>Todo {{1 + 1}}!</h2></div>";
    var parentElement = $('#sameID');
    parentElement.html(hardCodedHtml);
    angular.bootstrap(parentElement[0], ['myApp']);
  });
</script>

运行示例：https://plnkr.co/edit/D3B72neDa8uIDFpAlVcr?p=preview

Answer 2

在通过以下方式创建Angular模块时：

var app = angular.module('myApp', [
  //dependencies..
}]);

以及通过以下方式检索模块：

var app = angular.module('myApp');

从Angular docs

创建与检索

注意，使用angular.module('myModule', [])将创建模块myModule并覆盖任何现有的名为myModule的模块。使用angular.module('myModule')检索现有模块。