源代码目录结构--AngularJS学习笔记（一）

最近开始接触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	npm install  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-get install  nodejs sudo  npm install  -g grunt-cli npm install  -g bower

然后安装nodejs依赖

1	npm install

安装javascript依赖

1	bower install

最后运行单元测试

1	grunt test :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/