在加载到主页的部分页面中使用角度答案

【问题标题】：Using angular in partial pages loaded into a main page在加载到主页的部分页面中使用角度
【发布时间】：2016-05-21 13:27:44
【问题描述】：

我有一个单页应用程序。主索引页面有<div> 部分，根据用户操作加载不同的部分页面。每个部分页面都有不同的功能。

例如，这是我的主页的外观。非常基本：

 <html> 
 <head>...</head>
 <body>
 ...
 <div id='content-body'>
 ...
 </body>
 </html>

部分页面通过 jQuery 加载到 content-body <div> 中，如下所示：

$('#content-body').load(filename, function (....) ...);

一些部分页面是简单的表单，并在其后面有 javascript。同样，非常基本：

<form id="ABC">
 <div class="row">
   <fieldset class="form-group col-sm-3">
   ...
</form>
<script src="scripts/abc.js" />

问题： 对于某些部分页面（不是全部），我想使用 angular.我创造了这样的东西：

<script src="scripts/angular.js"></script>
<script src="scripts/app.js"></script>
<div ng-app="myApp" ng-controller="myController">
    <p>Angular TEST: {{ 1 + 2 }}</p>
    <form id="DEF">
    ...
    </form>
</div>
<script src="scripts/def.js"></script>

这不起作用。据我所知，这是因为 Angular 需要编译整个页面并且不能仅在部分页面上工作。它是否正确？有没有办法让我只在这样的部分页面中工作？

另外 - 我不能将 Angular 应用到整个应用程序/主索引页面。这不是我的选择。

【问题讨论】：

我不认为这是正确的。您可能只需要引导它。（现在创建一个小提琴来测试它）
这种方法到底是什么？使用 UI 路由器。

标签： javascript angularjs

【解决方案1】：

我将在下面发布一个示例，但步骤如下。您基本上需要手动bootstrap 应用程序。要引导，您需要元素和模块。因此，在我的示例中，我从一个 ID 为 content-here. 的空 div 开始。当加载 dom 时，我基本上插入一个迷你角度应用程序，然后手动调用引导函数。如果您可以提前加载脚本，我建议您这样做。如果您必须等待加载它们，请告诉我，我会更新小提琴。

<div id='content-here'> </div>

然后，您可以根据自己的选择设置 Angular 应用程序。

angular.module('myApp', []);
angular.module('myApp').controller('NixCtrl',NixCtrl);


function NixCtrl($scope){
  $scope.test = "Hello there Angular!"
}

最后一步是设置一个事件监听器或一些代码块来将 Angular 应用添加到 dom，然后调用 bootstrap 函数：

document.addEventListener("DOMContentLoaded", contentLoaded);

function contentLoaded(){
  var template = ' <div ng-app="myApp"><div ng-controller="NixCtrl">{{test}} </div> </div>';

  $('#content-here').html(template);
   angular.bootstrap($('#content-here'), ['myApp']);
}

http://jsfiddle.net/ncapito/wzdf9k6d/1/

【讨论】：

非常感谢尼克斯。我不知道您可以手动引导初始化。这个网站也帮助了我：docs.angularjs.org/guide/bootstrap