最近開(kāi)始接觸AngularJS，確實(shí)是一個(gè)相當(dāng)不錯(cuò)的東西，可以把很多東西簡(jiǎn)化掉。又對(duì)于其中的雙向綁定等的實(shí)現(xiàn)很好奇，加之正在學(xué)習(xí)Javascript的東西，所以覺(jué)得從源代碼這塊開(kāi)始深入學(xué)習(xí)AngularJs。

獲取AngularJs源代碼

雖然可以直接通過(guò)閱讀最終的js文件來(lái)學(xué)習(xí)，不過(guò)總覺(jué)得這樣入手不太容易，而項(xiàng)目源代碼本身就是一塊一塊的，同時(shí)又配有測(cè)試，從這里開(kāi)始學(xué)習(xí)的話應(yīng)該比較容易一些。

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

實(shí)現(xiàn)先獲取到代碼：

1

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

下載需要一點(diǎn)點(diǎn)時(shí)間…特別是你訪問(wèn)github速度比較慢的時(shí)候…

目錄結(jié)構(gòu)和構(gòu)建工具

首先來(lái)看看項(xiàng)目有哪些文件夾：

• src目錄是項(xiàng)目的源代碼，也是學(xué)習(xí)的主要對(duì)象
• test目錄是對(duì)應(yīng)的測(cè)試
• closure中的文件是Google Closure Compiler使用的
• scripts目錄中有一些腳本，主要用于bower、travis等的任務(wù)使用

再來(lái)看看文件：

• angularFiles.js中定義了AngularJs中每個(gè)某塊所包含的js文件地址，很多地方使用到了這個(gè)文件配置。
• bower.json是包管理工具的配置文件，更多介紹點(diǎn)擊Bower。
• check-size.sh將angular.min.js文件壓縮，然后顯示文件大小…（說(shuō)實(shí)話，我不是太清楚這有什么意義）
• changelog.js是一個(gè)nodejs腳本，它可以從git倉(cāng)庫(kù)中獲取更新日志。通過(guò)

1

node changelog.js

運(yùn)行腳本。如果提示[Error: Cannot find module ‘qq’]，可以通過(guò)npm安裝

1

npm install qq

changelog.spec.js是對(duì)應(yīng)的測(cè)試文件。

• compare-master-to-stable.js也是一個(gè)nodejs腳本，它可以比較穩(wěn)定版和當(dāng)前版本的區(qū)別。
• gen_docs.sh會(huì)使用Jasmine進(jìn)行測(cè)試，然后調(diào)用docs/src/中的gen-docs.js生成文檔。
• Gruntfile.js是Grunt的配置文件，更多介紹參考Grunt。
• init-repo.sh是一個(gè)初始化腳本，它會(huì)檢查nodejs,npm,karam并且掛上git hook。
• karam-* 這些文件時(shí)karam的配置文件。Karam是一個(gè)Javascript測(cè)試執(zhí)行過(guò)程管理工具。更多信息參考Karam。
• package.json 是npm的配置文件，它管理了nodejs的依賴。

總的來(lái)說(shuō)，AngularJs用Jasmine做單元測(cè)試，Karma自動(dòng)化完成單元測(cè)試，Grunt做項(xiàng)目管理，npm管理Nodejs的依賴，Bower管理javascript的包依賴。

檢查環(huán)境

獲取到源代碼以后我們需要運(yùn)行一下測(cè)試什么的..首先是保證你有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

最后運(yùn)行單元測(cè)試

1

grunt test:unit

效果如下圖：

如果要打包的話執(zhí)行

1

grunt package

Gruntfile.js

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

Gruntfile.js中定義了很多任務(wù)，對(duì)于學(xué)習(xí)最關(guān)鍵的是build任務(wù)了：

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這個(gè)變量，而這個(gè)量是通過(guò)

1

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

從angularFiles.js文件中獲取到的。比如files[‘a(chǎn)ngularSrc’]中就有60個(gè)文件：

結(jié)語(yǔ)

終于找到學(xué)習(xí)的入口了，接下來(lái)就可以通過(guò)學(xué)習(xí)files[‘a(chǎn)ngularSrc’]中定義的文件來(lái)學(xué)習(xí)AngularJS這個(gè)強(qiáng)大的框架了。

附上幾個(gè)鏈接：

http://nodejs.org/

http://gruntjs.com/

http://bower.io/

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

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

版權(quán)聲明

《源代碼目錄結(jié)構(gòu)--AngularJS學(xué)習(xí)筆記（一）》 由 黃云坤 創(chuàng)作，采用 知識(shí)共享 署名-相同方式共享 4.0 國(guó)際 許可協(xié)議進(jìn)行許可。