angular.bootstrap() - 在不需要 ng-app 或 ng-controller 的情况下引导 Angular 应用程序答案

【问题标题】：angular.bootstrap() - bootstrapping an angular app without the need for ng-app or ng-controllerangular.bootstrap() - 在不需要 ng-app 或 ng-controller 的情况下引导 Angular 应用程序
【发布时间】：2017-11-11 09:18:36
【问题描述】：

我正在尝试创建一个 Angular 应用程序，它可以在几乎没有指令的情况下进行运输和引导。理想情况下，您应该包含 js 文件：

<script src="myapp.js"></script>

然后在页面上放一个div：

<div id="myDiv"></div>

然后像这样引导应用程序：

angular.bootstrap(document.getElementById('myDiv'),['myApp']);

不用说，这行不通。

请参阅this fiddle 以了解它在使用 ng-* 指令和不使用 this one 的情况下工作。

我想我的问题是 - 这甚至可能吗？

理想情况下，我想实现类似于 Stripe 的应用：

<script
  src="https://checkout.stripe.com/v2/checkout.js" class="stripe-button"
  data-key="pk_test_czwzkTp2tactuLOEOqbMTRzG"
  data-amount="2000"
  data-name="Demo Site"
  data-description="2 widgets ($20.00)"
  data-currency="usd"
  data-image="/128x128.png">
</script>

但也找不到让它工作的方法。主要目标是不必暴露角度细节来使用我的应用程序。

【问题讨论】：

标签： javascript angularjs

【解决方案1】：

来自官方文档：

如果您需要对初始化过程进行更多控制，您可以可以改用手动引导方法。在手动引导您的应用时，您应该不使用 ng-app 指令。

<!doctype html>
<html>
<body>
  <div ng-controller="MyController">
    Hello {{greetMe}}!
  </div>
  <script src="http://code.angularjs.org/snapshot/angular.js"></script>

  <script>
    angular.module('myApp', [])
      .controller('MyController', ['$scope', function ($scope) {
        $scope.greetMe = 'World';
      }]);

    angular.element(document).ready(function() {
      angular.bootstrap(document, ['myApp']);
    });
  </script>
</body>
</html>

【讨论】：

【解决方案2】：

您也可以在事后使用 jQuery 将 ng-controller 属性添加到 div 来“欺骗”这一点。

$(function() {
    $('#main_container').attr('ng-controller', 'InventoryController');
    $.when(angular.bootstrap(document.getElementById('main_container'), ["InventoryModule"])).done(function() {
        console.log("app bootstrapped");
    });
});

小提琴：http://jsfiddle.net/tj24K/

不过，本质上，Angular 是通过向模板添加指令来工作的。如果您想要完全干净的模板开始，您需要在 jQuery 中添加所有指令。对我来说，这似乎比它的价值更多。 Angular 的全部优点在于取消了 jQuery 选择器。

PS.，我还将您的控制器更改为仅设置 $scope.items 而不是返回它。

【讨论】：

是的，尽管这看起来很整洁，但我确实在尝试避免使用 jquery。我也许可以看看与 angular 捆绑在一起的 jQLite。那时候就觉得没那么骗人了。将尝试并报告回来。还将尝试按照 Mike P 的建议查看控制器工厂。
好的，所以我去了：var myelement = document.querySelector('#myDiv');angular.element(myelement).attr('ng-controller','myCtrl');angular.bootstrap(myelement,['myApp']); 似乎工作得很好。这需要在 #myDiv 加载之后发生，或者我们需要等待文档准备好。我会看看一个 jQLite.ready() 函数。
@preeve ，我同意，避免不需要的库是一个好习惯。在这种情况下，可以使用angular.element 完成相同的工作。正如你所建议的。我添加了一个不同的答案，以便人们更容易找到它。

【解决方案3】：

更新：错过了标题中说你想避免使用 ng-controller 的部分。

如果您需要添加在控制器中定义的行为，那么最简单的方法就是使用 ng-controller 指令。您可以在不向您的客户暴露任何角度细节的情况下摆脱我在下面写的内容。如果您绝对不使用 ng-controller 但仍需要控制器行为，您可能需要深入了解控制器工厂代码，看看如何创建范围并将其附加到控制器方法。这似乎比它的价值更复杂。

原帖：

您正在引导应用程序，但您使用的控制器尚未添加到您正在创建的 HTML 元素中。

我假设你要注入一些 HTML，所以你应该能够用 ng-controller 装饰你的主要 DIV 元素，然后引导离开。我建议在该元素与文档上进行引导，以防有人将您的代码带入现有的基于 angularjs 的站点。

http://jsfiddle.net/detLd/1/

<div ng-controller="InventoryController">
    <ul ng-repeat='item in items'>
        <li>{{item.title}}</li>
        <li>{{item.price | currency}}</li>
    </ul>
</div>

您需要阅读此页面上的 cmets http://docs.angularjs.org/api/angular.bootstrap

【讨论】：

【解决方案4】：

您可以在引导应用程序之前将元素（指令）插入到文档中。

<html>
  <body>
    <script src="http://code.angularjs.org/snapshot/angular.js"></script>
    <script type="text/javascript" src="./app.js"></script>
  </body>
</html>

在app.js

angular
  .element(document)
  .ready(function () {
     angular
      .module('myApp', [])
      .directive('myDirective', function () {
        return {
          template: '<div>my directive 2+2 = {{2+2}} </div>'
        };
      });
    var body = document.getElementsByTagName("body")[0];
    var appElement = document.createElement("my-directive");
    body.appendChild(appElement);
    angular.bootstrap(body, ['myApp']);
  });

https://jsfiddle.net/7dzo7q90/

【讨论】：