最近开始接触AngularJS，确实是一个相当不错的东西，可以把很多东西简化掉。又对于其中的双向绑定等的实现很好奇，加之正在学习Javascript的东西，所以觉得从源代码这块开始深入学习AngularJs。

获取AngularJs源代码

虽然可以直接通过阅读最终的js文件来学习，不过总觉得这样入手不太容易，而项目源代码本身就是一块一块的，同时又配有测试，从这里开始学习的话应该比较容易一些。

AngularJs的源码在github上，地址是：https://github.com/angular/angular.js。

实现先获取到代码：

1	git clone https://github.com/angular/angular.js.git

下载需要一点点时间…特别是你访问github速度比较慢的时候…

目录结构和构建工具

首先来看看项目有哪些文件夹：

• src目录是项目的源代码，也是学习的主要对象
• test目录是对应的测试
• closure中的文件是Google Closure Compiler使用的
• scripts目录中有一些脚本，主要用于bower、travis等的任务使用

再来看看文件：

• angularFiles.js中定义了AngularJs中每个某块所包含的js文件地址，很多地方使用到了这个文件配置。
• bower.json是包管理工具的配置文件，更多介绍点击Bower。
• check-size.sh将angular.min.js文件压缩，然后显示文件大小…（说实话，我不是太清楚这有什么意义）
• changelog.js是一个nodejs脚本，它可以从git仓库中获取更新日志。通过

1	node changelog.js

运行脚本。如果提示[Error: Cannot find module 'qq']，可以通过npm安装

1	npminstall qq

changelog.spec.js是对应的测试文件。

• compare-master-to-stable.js也是一个nodejs脚本，它可以比较稳定版和当前版本的区别。
• gen_docs.sh会使用Jasmine进行测试，然后调用docs/src/中的gen-docs.js生成文档。
• Gruntfile.js是Grunt的配置文件，更多介绍参考Grunt。
• init-repo.sh是一个初始化脚本，它会检查nodejs,npm,karam并且挂上git hook。
• karam-* 这些文件时karam的配置文件。Karam是一个Javascript测试执行过程管理工具。更多信息参考Karam。
• package.json 是npm的配置文件，它管理了nodejs的依赖。

总的来说，AngularJs用Jasmine做单元测试，Karma自动化完成单元测试，Grunt做项目管理，npm管理Nodejs的依赖，Bower管理javascript的包依赖。

检查环境

获取到源代码以后我们需要运行一下测试什么的..首先是保证你有nodejs、npm、grunt：

1 2 3

sudo apt-getinstall nodejs sudo npminstall -g grunt-cli npminstall -g bower

然后安装nodejs依赖

1	npminstall

安装javascript依赖

1	bowerinstall

最后运行单元测试

1	grunttest:unit

效果如下图：

如果要打包的话执行

1	grunt package

Gruntfile.js

Gruntfile.js是Grunt的配置文件，这里有一份中文文档，大家可以参考：http://www.gruntjs.org/。

Gruntfile.js中定义了很多任务，对于学习最关键的是build任务了：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58

build: {       scenario: {         dest:'build/angular-scenario.js',         src: [           'bower_components/jquery/jquery.js',           util.wrap([files['angularSrc'], files['angularScenario']],'ngScenario/angular')         ],         styles: {           css: ['css/angular.css','css/angular-scenario.css']         }       },       angular: {         dest:'build/angular.js',         src: util.wrap([files['angularSrc']],'angular'),         styles: {           css: ['css/angular.css'],           generateCspCssFile: true,           minify: true         }       },       loader: {         dest:'build/angular-loader.js',         src: util.wrap(files['angularLoader'],'loader')       },       touch: {         dest:'build/angular-touch.js',         src: util.wrap(files['angularModules']['ngTouch'],'module')       },       mocks: {         dest:'build/angular-mocks.js',         src: util.wrap(files['angularModules']['ngMock'],'module'),         strict: false       },       sanitize: {         dest:'build/angular-sanitize.js',         src: util.wrap(files['angularModules']['ngSanitize'],'module')       },       resource: {         dest:'build/angular-resource.js',         src: util.wrap(files['angularModules']['ngResource'],'module')       },       animate: {         dest:'build/angular-animate.js',         src: util.wrap(files['angularModules']['ngAnimate'],'module')       },       route: {         dest:'build/angular-route.js',         src: util.wrap(files['angularModules']['ngRoute'],'module')       },       cookies: {         dest:'build/angular-cookies.js',         src: util.wrap(files['angularModules']['ngCookies'],'module')       },       "promises-aplus-adapter": {         dest:'tmp/promises-aplus-adapter++.js',         src:['src/ng/q.js','lib/promises-aplus/promises-aplus-test-adapter.js']       }     },

 

这里多次用到了files这个变量，而这个量是通过

1	var files = require('./angularFiles').files

 

从angularFiles.js文件中获取到的。比如files['angularSrc']中就有60个文件：

结语

终于找到学习的入口了，接下来就可以通过学习files['angularSrc']中定义的文件来学习AngularJS这个强大的框架了。

附上几个链接：

http://nodejs.org/

http://gruntjs.com/

http://bower.io/

http://karma-runner.github.io/

http://pivotal.github.io/jasmine/