Angular模块延迟实例化

时间:2015-06-25 17:45:32

标签: javascript angularjs lazy-loading angularjs-controller angular-bootstrap

我在window.onload之后的例程中定义了角度模块,我相信在加载窗口之前模块的角度查找但我需要确保在触发角度模块之前加载所有资源。

有没有办法,也许是像DOM准备等其他加载事件,我可以挂钩我的应用程序启动然后角度启动?我的角度模块是一个依赖模块,并被另一个库使用。

window.onload = function() {
    angular.module("nav", [])
        .controller("NavController", function() {
        });
}

<nav class="state_2" ng-app="nav">
        <ul ng-controller="NavController">
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </nav>

2 个答案:

答案 0 :(得分:1)

The you want to achieve is just by doing lazy loading app, using angular.bootstrap then you should remove ng-app from html.

Markup

<nav class="state_2">
  <ul ng-controller="NavController">
    {{test}}
    <li>1</li>
    <li>2</li>
    <li>3</li>
  </ul>
</nav>

Code

window.onload = function() {
  angular.module("nav", [])
    .controller("NavController", function($scope) {
      $scope.test= '13123'
    });
    angular.bootstrap(document, ['nav']);
}

Demo Plunkr

答案 1 :(得分:0)

将所有脚本放在DOM下面并在关闭body标签之前,将确保脚本在加载DOM后运行。

请参阅此优秀说明:pure JavaScript equivalent to jQuery's $.ready() how to call a function when the page/dom is ready for it