谷歌推的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. Razor语法(二)

    I:ASP.NET MVC3在Visual Studio 2010中的变化 在VS2010中新建一个MVC3项目可以看出与以往的MVC2发生了很明显的变化. 1.ASP.NET MVC3必要的运行环境 ...

  2. MySQL分库备份与分表备份

    MySQL分库备份与分表备份 1.分库备份 要求:将mysql数据库中的用户数据库备份,备份的数据库文件以时间命名 脚本内容如下: [root@db01 scripts]# vim backup_da ...

  3. [Angular] Improve Server Communication in Ngrx Effects with NX Data Persistence in Angular

    Communicating with a remote server via HTTP presents an extra level of complexity as there is an inc ...

  4. iOS 中 JSON 数据交换格式

         JSON (JavaScript Object Notation)是一种轻量级的数据交换格式. JSON 的详细教程,能够參见 JSON 中国:http://www.json.org.cn/ ...

  5. HTML+JavaScript实现链式运动特效

    在学习js的过程中,发现这家伙做特效真是不错,尽管说眼下水平还不够,只是也能写点简单的效果. 今天分享一个简单的运动框架.然后利用这个框架实现简单的链式运动特效. 1.move.js 在运动框架中.主 ...

  6. python读取文件特定的行数

    from itertools import islice f=open("pyhpd.txt") for a in islice(f,2,6): print(a)

  7. 算法笔记_080:蓝桥杯练习 队列操作(Java)

    目录 1 问题描述 2 解决方案 1 问题描述 问题描述 队列操作题.根据输入的操作命令,操作队列(1)入队.(2)出队并输出.(3)计算队中元素个数并输出. 输入格式 第一行一个数字N. 下面N行, ...

  8. 用interrupt()中断Java线程

    最近在学习Java线程相关的东西,和大家分享一下,有错误之处欢迎大家指正. 假如我们有一个任务如下,交给一个Java线程来执行,如何才能保证调用interrupt()来中断它呢? class ATas ...

  9. mysql中如何统计某字段里某个字符的个数

    select * from order where length(order_num)-length(replace(order_num,'8','')) = 4

  10. Asp.Net MVC中递归死循环问题

    在写代码的时候,很欢乐地发现报错了. An unhandled exception of type 'System.StackOverflowException' occurred in mscorl ...