源代码目录结构–AngularJS学习笔记(一)

5 1月

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

获取AngularJs源代码

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

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

实现先获取到代码:


下载需要一点点时间…特别是你访问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仓库中获取更新日志。通过

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


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:


然后安装nodejs依赖


安装javascript依赖


最后运行单元测试


效果如下图:

如果要打包的话执行


Gruntfile.js

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

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


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


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

screenshot12

结语

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

附上几个链接:

http://nodejs.org/

http://gruntjs.com/

http://bower.io/

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

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

发表评论

电子邮件地址不会被公开。