一、背景
在一个页面内,如果要同时加载两个互不依赖的app,比如说通过include的方式加载其它页面。由于互不依赖你不可能把其它app依赖注入到当前app中。然而ng-app一个页面又只能存在一个。规则为第一个出现的ng-app。比如如下:
<div ng-app="app.main">
<div ng-include="'../main/header.html'"></div>
<div ng-include="'../main/left.html'"></div>
</div>
<div id="video">
<div id="loading" class="loading" loading-bar style="position:absolute;z-index:9999">
<iframe src="../../styles/base/images/loading.gif" align=center valign=middle frameborder=0 width=170 height=1000 marginheight=0 marginwidth=0 scrolling=no>
</iframe>
</div>
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
<div class="show-top-grids">
<div class="col-sm-8 single-left">
<div>
<div ng-controller="VideoController">
<div video></div>
</div>
<div ng-controller="CommentController">
<div ng-controller="DialogController">
<!-- <div loading-bar></div> -->
<div comment></div>
</div>
</div>
</div>
</div>
<div class="col-md-4 single-right">
<div ng-controller="RelateVideoController">
<div relate-video></div>
</div>
</div>
</div>
</div>
</div>
控制器VideoController、CommentController、DialogController、RelateVideoController并不在app.main这个模块之中。
为了解决这个办法,我们可以只用手动加载,方式如下:
angular.bootstrap(document.getElementById("video"),['app.video','app.loading','app.dialog','ngDialog']);
二、误区
这里有一个坑,那就是通过这种方式,并不会调用相应的app.js文件,因此,你在app.js中申明的依赖注入并不会注入进去,你就需要在手动加载时注入进去。比如在
app.video的app.js中实际依赖注入了app.loading和app.dialog。
(function(angular){
if(typeof(app) == "undefined")
app={};
app.video=angular.module('app.video',
['app.loading','app.dialog']
);
})(window.angular);
但是由于手动加载,即使应用了app.js文件,也不会通过app.js加载app.loading,app.dialog。因此需要再手动加载中依赖注入。如果去掉手动加载,单纯应用js则可以直接注入app.loading和app.dialog。