动态引导 AngularJS 应用程序答案

【问题标题】：Bootstrapping AngularJS app dynamically动态引导 AngularJS 应用程序
【发布时间】：2014-02-22 18:13:16
【问题描述】：

我在使用控制器中的初始化代码来提升 angularjs 应用程序时遇到问题。简化的测试用例是这样的（index.js）：

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

myApp.controller( 'myAppController', [ '$scope', function($scope) {
    console.log('never shown');
    $scope.test = 'constructor called';
    // removed more init code
}]);

$(document).ready(function(){
    angular.bootstrap( document, ['myApp']);
    console.log('Finished boostrapping.');
});

这个测试用例的 HTML 文件：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>TeST</title>
    </head>
    <body>
        {{test}}
        <script type="text/javascript" src="js/bower_components/jquery/dist/jquery.min.js"></script>
        <script type="text/javascript" src="js/bower_components/angular/angular.js"></script>
        <script type="text/javascript" src="js/index.js"></script>
    </body>
</html>

结果是控制台输出仅显示“已完成引导” - 并且从未调用控制器函数。 .. 这让我有点困惑，但这是我的第一个 Angular 1.2 应用程序。如果我将 ng-app="myApp" 放入标签中并让角度自动引导应用程序，我会得到相同的结果。 ...

【问题讨论】：

标签： angularjs

【解决方案1】：

您永远不会在标记中的任何位置设置 ng-controller。

另外，您应该将脚本标签放在头部，或者放在</body> 之后。

编辑：以这种方式使用引导程序时，<script> 标签的位置很重要。

【讨论】：

嗯，不，我没有设置控制器 - 但这是重点 - 应用程序将在页面加载后的一段时间内动态提升。控制器应使用 .controller(..) 调用进行设置。我检查了 docs.angularjs.org 上的 docs.angularjs.org/guide/controller 文档 - 他们的示例似乎与我的非常相似..
@MrMT ng-app 所做的与 ng-controller 所做的完全不同。您应该再次查看该链接中的文档，因为每个案例在示例中都有 ng-controller。 bootstrap 只是设置 ng-app。
... 如果脚本在中，它应该会有所不同。我只是仔细检查以确保 - 没有区别......但你是 100% 正确的，如果我把 ng-controller 放在上，那么一切都会正常工作:) 谢谢伙计！
@MrMT 没有问题。脚本放置只是一个技术建议，与实际问题无关。很高兴你让它工作了。
@MrMT 实际上，在您的特定情况下，看起来位置确实很重要。每天学些新东西！ :) stackoverflow.com/questions/16537783/…

【解决方案2】：

angular.bootstrap 方法的第一个参数是一个元素。目前您正在传入不是元素的文档。

Try 
    angular.bootstrap(document.documentElement, ['myApp']);
or  
    angular.bootstrap(document.body, ['myApp']);

【讨论】：

这应该不是问题stackoverflow.com/questions/16537783/…
好吧，这并没有帮助 - 但是当我将 ng-controller="myAppController" 放在上时，一切都开始工作了。