angularjs 手动加载以及误区

           一、背景

            在一个页面内，如果要同时加载两个互不依赖的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。