谷歌推的javascript框架angulajs相当火热，由于新项目的缘故，最近一直看angularjs。在看的时候，一直有个疑问，angularjs 核心依赖于DI(依赖注入)。常用的方法是在页面的根节点加入一个ng-app或者ng-app='module',来进入的angulajs 的context(上下文),然后DI来注入，生成一个link函数，一个事件循环。但是啊，在做大项目的时候，往往不会在dom初始化的时候加入ng-app,因为这就约束了一个页面只有一个module,有的时候我们可能想跟灵活一些，怎么做呢?

官网有云：同过angualrjs 的bootstrap api 来引导程序入口。因为我也是新手，对angualjs 的整个流程也不能十分全面的把控，所以我就按照官网一步一步来。但是官网只有一段代码

angualr.element(document).ready(function(){angular.module('mymodule',[]);angular.bootstrap(document,['mymodule']);}

这就难为坏了我了，我在项目里千方百计的使用却一直报错，而且错误提示也是相当的槽糕。就开始google，但是一点收获也没有，我的代码引用了官网的一个例子

 <!DOCTYPE html>

 <html ng-app id='ng-app' lan='en'>

 <header>

  <!--[if lte IE 7]>

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

     <![endif]-->

     <!--[if lte IE 8]>

     <script>

         document.createElement('ng-include');

         document.createElement('ng-pluralize');

         document.createElement('ng-view');

         // Optionally these for CSS

         document.createElement('ng:include');

         document.createElement('ng:pluralize');

         document.createElement('ng:view');

     </script>

     <![endif]-->

 <script type="text/javasctipt" src='angular.min.js' />

 <script >

      angular.element(document).ready(function(){

  angular.module('docsTimeDirective', [])

                     .controller('Ctrl2',['$scope',function($scope) {

                         $scope.format = 'M/d/yy h:mm:ss a';

                     }])

                     .directive('myCurrentTime',function($interval,dateFilter){

                         function link(scope, element, attrs) {

                             var format,

                                     timeoutId;

                             function updateTime() {

                                 element.text(dateFilter(new Date(), format));

                             }

                             scope.$watch(attrs.myCurrentTime, function(value) {

                                 format = value;

                                 updateTime();

                             });

                             element.on('$destroy', function() {

                                 $interval.cancel(timeoutId);

                             });

                             // start the UI update process; save the timeoutId for canceling

                             timeoutId = $interval(function() {

                                 updateTime(); // update DOM

                             }, 1000);

                         }

                         return {

                             link: link

                         };

                     });

             angular.bootstrap(document,['docsTimeDirective']);

 })

 </script>

 </header>

 <body>

   <div ng-controller="Ctrl2">

             Date format: <input ng-model="format"> <hr/>

             Current time is: <span my-current-time="format"></span>

         </div>

 </body>

 </html>

乍一看，一直没有发现错误。后来在不断的捣鼓angularjs 的核心的流程，我终于明白了错误在哪里了。应该去掉doem 里的ng-app,因为手动引导就是通过bootstrap 来配置$injector。 在弄个ng-app,两个入口，造成了anguar 的异常。

　　虽然过程很坎坷，但结局很美好，还深刻的理解了angularjs 的核心流程。

猜测，有待验证

目前认为，这个手动引导的最大好处就是可以定义多个module，在上面的文档里说过，angualr.module('myfirst',[]),其api中的module第二个参数是他的依赖module，所以你可以定义多个module，比如你需要做ui,可以写一个ui，module，然后这个是可以share的，当你在页面加载的时候，只要把页面要用的module ，传到angular.bootstrap(document,['myfirst'])第二个参数，然后就可以了。！

续：官网有这么一句话

A module is a collection of configuration and run blocks which get applied to the application during the bootstrap process.

意思是说module 是配置的一个集合，是在anguar 引导（bootstrap）运行时的所依赖运行块。这个足可以验证了我的猜想！

angularjs 手动启动的更多相关文章

  1. AngularJS的启动引导过程

    原文:http://www.angularjs.cn/A137?utm_source=ourjs.com 目录: 引导之前 自动引导启动框架 手工引导启动框架 引导第1步:创建注入器 引导第2步:创建 ...

  2. Oracle 服务手动启动关闭

    在windows7中安装完Oracle11g之后会出现一下七种服务:可通过运行->services.msc查看. 其中各个服务名称中的ORCL或orcl为SID即System IDentifie ...

  3. 手动启动mongodb和nodejs程序

    最近做单片机去了,以前用的mongodb和nodejs没有配置成服务,居然忘了如何手动启动.在此记录下 一.手动启动mongodb 1.进入cmd 2.在dos下打开mongodb路径E:\mongo ...

  4. 解决关于ArcGIS10.2服务手动启动的问题

    解决关于ArcGIS10.2服务手动启动的问题 C:\program files\arcgis\license10.2\bin> lmgrd -z -c service.txt新建一文本,将上面 ...

  5. arcgis手动启动服务提示端口4000被使用

    具体解决办法 参考 http://hi.baidu.com/xjx19860908/item/6b46376d92044694c4d249f6该博文. 手动启动,提示4000端口被占用,去查找4000 ...

  6. 关于sql server 2008过期导致 MSSQLSERVER服务就无法启动，手动启动就报告错误代码17051。

    1.基本现象:MSSQLSERVER服务就无法启动,手动启动就报告17051错误. 2.解决办法: 第一步:进入SQL2008配置工具中的安装中心, 第二步:再进入维护界面,选择版本升级, 第三步:进 ...

  7. oracle手动启动服务

    开始-控制面板->管理工具->服务->右键属性 oracle服务设定都是手动启动的,开机时只需要启动3个服务就好了: OracleOraDb11g_home1ClrAgent Ora ...

  8. 手动启动angular

    关于手动启动 angular 的问题 angular核心原理解析1:angular自启动过程 angular.element(document).ready(function() { angular. ...

  9. 手动启动jenkins

    无论Linux还是windows, jenkins都是作为一个后台服务存在的. 所以在Linux下,手动启动或停止jenkins: service jenkins start service jenk ...

随机推荐

  1. 【Docker】mesos如何修改hostport默认端口范围？

    1.marathon文档:https://mesosphere.github.io/marathon/docs/native-docker.html Static port mapping: It's ...

  2. centos关闭sudo的ldap认证

    在新服务器上部署项目时,运行sudo命令会卡住很久,然后报错 sudo:ldap_start_tls_s(): Can't contact LDAP server 简直不能忍. 一番研究后发现是lda ...

  3. Tomcat 没有自动解压webapp下的war项目文件问题

    默认选择的tomcat安装在了C盘下的C:\Program Files下 所以webapp文件也在C盘下 选择启动tomcat时 我选择了 bin下的 Tomcat.exe 显示成功启动 打开项目网站 ...

  4. 小白系列-免费广告路由器web认证设置(2)

    要设置认证页面图片.须要到后台注冊一个帐号,绑定路由器. 路由器管理后台网址 http://115.29.12.130/router 第一步:自己主动获取一个路由器ID(上一篇文章中的路由器ID也要改 ...

  5. Spring官方下载地址

    改版后的Spring官方网站下载地址找不到了,汗~~ 可以通过该链接下载对应的包:http://repo.spring.io/milestone/org/springframework/ Spring ...

  6. IO/序列化/JSON

    一.读写文件 1.open:打开文件 open(path, mode, encoding='xxx', errors='ignore') mode取值:rU 或 Ua 以读方式打开, 同时提供通用换行 ...

  7. django+nginx+uwsgi 项目部署

    Django虽然自带一个Server,但只能作为开发时测试使用,我们需要一个可以稳定而持续的服务器对网站进行部署,比如Apache, Nginx, lighttpd等,本篇将利用nginx和uWSGI ...

  8. 算法笔记_081:蓝桥杯练习 算法提高 矩阵乘法（Java）

    目录 1 问题描述 2 解决方案   1 问题描述 问题描述 有n个矩阵,大小分别为a0*a1, a1*a2, a2*a3, ..., a[n-1]*a[n],现要将它们依次相乘,只能使用结合率,求最 ...

  9. Odoo环境下Ubuntu服务器性能优化--参数调整

    公司在使用Odoo进行内部信息化管理,随着业务增长,服务器性能问题变成了瓶颈,为了解决这些问题,最近的工作重点将移到性能调整上来,同时也会在此记录整个处理过程,以便日后回顾. 1.根据相关资料建议,在 ...

  10. 使用js+Ajax请求API接口数据-带请求头方式

    C# http请求带请求头部分 先上代码: <script type="text/javascript"> function zLoginCheck() { var A ...