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

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

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

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

  1.  <!DOCTYPE html>
  2.  <html ng-app id='ng-app' lan='en'>
  3.  <header>
  4.   <!--[if lte IE 7]>
  5.      <script src="js/json3.js"></script>
  6.      <![endif]-->
  7.      <!--[if lte IE 8]>
  8.      <script>
  9.          document.createElement('ng-include');
  10.          document.createElement('ng-pluralize');
  11.          document.createElement('ng-view');
  12.  
  13.          // Optionally these for CSS
  14.          document.createElement('ng:include');
  15.          document.createElement('ng:pluralize');
  16.          document.createElement('ng:view');
  17.      </script>
  18.      <![endif]-->
  19.  <script type="text/javasctipt" src='angular.min.js' />
  20.  <script >
  21.       angular.element(document).ready(function(){
  22.   angular.module('docsTimeDirective', [])
  23.                      .controller('Ctrl2',['$scope',function($scope) {
  24.                          $scope.format = 'M/d/yy h:mm:ss a';
  25.                      }])
  26.                      .directive('myCurrentTime',function($interval,dateFilter){
  27.                          function link(scope, element, attrs) {
  28.                              var format,
  29.                                      timeoutId;
  30.  
  31.                              function updateTime() {
  32.                                  element.text(dateFilter(new Date(), format));
  33.                              }
  34.  
  35.                              scope.$watch(attrs.myCurrentTime, function(value) {
  36.                                  format = value;
  37.                                  updateTime();
  38.                              });
  39.  
  40.                              element.on('$destroy', function() {
  41.                                  $interval.cancel(timeoutId);
  42.                              });
  43.  
  44.                              // start the UI update process; save the timeoutId for canceling
  45.                              timeoutId = $interval(function() {
  46.                                  updateTime(); // update DOM
  47.                              }, 1000);
  48.                          }
  49.  
  50.                          return {
  51.                              link: link
  52.                          };
  53.                      });
  54.              angular.bootstrap(document,['docsTimeDirective']);
  55.  
  56.  })
  57.  </script>
  58.  </header>
  59.  <body>
  60.    <div ng-controller="Ctrl2">
  61.              Date format: <input ng-model="format"> <hr/>
  62.              Current time is: <span my-current-time="format"></span>
  63.          </div>
  64.  </body>
  65.  
  66.  </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. Hadoop 伪分布式上安装 Hive

    下载地址:点此链接(P.S.下载带bin的安装包) 下载hive后放到虚拟机文件夹内,打开: -bin.tar.gz -C /home/software/ 修改并保存环境配置: gedit /etc/ ...

  2. 用dd命令复制磁盘分区

    用dd命令复制磁盘分区 首先是复制 复制前对写入的分区执行umount操作 sudo dd if=/dev/sda1 of=/dev/sda2 可以在另外一个终端输入这句,然后在原来的dd终端看到进度 ...

  3. 正则表达式匹配a标签或div标签

    这里以a标签为例 a标签的href var a='<P><A href=\'~abc/ccg/ab.jpg\' width="3">文字</A> ...

  4. UIImagePickerController 视频录制操作，视频大小，时间长度

    一:使用 iOS 系统 UIImagePickerController 获取视频大小 获取视频长度 - (void)viewDidLoad { [super viewDidLoad]; // Do a ...

  5. 运用JMX监控Tomcat

    1.先配Tomcat的启动语句,window下tomcat的bin/catalina.bat(linux为catalina.sh),在头上注释部分(.bat为rem..sh为#)后面加上set JAV ...

  6. vs2005下面编译自己的luars232.dll

    vc6在win7下用不了,大家建议使用vs2005...所以就装了,但是还是提示有不兼容,不过是可以用的.先凑合用,装了个2012,庞然大物!而且折腾了半天不知所云.先这样吧. 简单记录操作过程,参考 ...

  7. 【Python 数据分析】jieba文本挖掘

    jieba是一个强大的分词库,完美支持中文分词 安装jieba 使用命令安装 pip install jieba 出现上图表示安装成功了 jieba分词模式 全模式 全模式:试图将句子精确地切开,适合 ...

  8. 跨站请求伪造解决办法之——过滤referer

    当然,referer也是可以伪造的,Http请求本身就没有不能伪造的东西. 所以本方法只能在一定程度上防止非法请求,仅供参考. 项目的web.xml中增加过滤器: <filter> < ...

  9. iOS开发一个制作Live Photo的工具

    代码地址如下:http://www.demodashi.com/demo/13339.html 1.livePhoto简介 livePhoto是iOS 9.0 之后系统相机提供的拍摄动态照片的功能,但 ...

  10. Struts2简介以及结果集转发

    一.分析之前的项目的不足,编写属于自己的框架二.Struts2简介(面试)三.搭建Struts2的开发环境 1.找到所需的jar包:发行包的lib目录中(不同版本需要的最小jar包是不同的,参见不同版 ...