Angular2+學習第2篇 cli 環境搭建過程

Angular-cli是angular團隊針對Angular2提供的腳手架，用於環境搭建，運行等；具體參考Angular-cli GitHub

Angular的啓動過程，須要先回答三個問題：

1. 啓動時加載了哪一個頁面？
2. 啓動時加載了哪些腳本？
3. 這些腳本到底作了什麼事？

OK，讓咱們來打開.Angular-cli.json

 1 {
 2   "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
 3   "project": {
 4     "name": "angular-reddit-test"
 5   },
 6   "apps": [
 7     {
 8       "root": "src",
 9       "outDir": "dist",
10       "assets": [
11         "assets",
12         "favicon.ico"
13       ],
14       "index": "index.html",
15       "main": "main.ts",
16       "polyfills": "polyfills.ts",
17       "test": "test.ts",
18       "tsconfig": "tsconfig.app.json",
19       "testTsconfig": "tsconfig.spec.json",
20       "prefix": "app",
21       "styles": [
22         "styles.css"
23       ],
24       "scripts": [],
25       "environmentSource": "environments/environment.ts",
26       "environments": {
27         "dev": "environments/environment.ts",
28         "prod": "environments/environment.prod.ts"
29       }
30     }
31   ],
32   "e2e": {
33     "protractor": {
34       "config": "./protractor.conf.js"
35     }
36   },
37   "lint": [
38     {
39       "project": "src/tsconfig.app.json",
40       "exclude": "**/node_modules/**"
41     },
42     {
43       "project": "src/tsconfig.spec.json",
44       "exclude": "**/node_modules/**"
45     },
46     {
47       "project": "e2e/tsconfig.e2e.json",
48       "exclude": "**/node_modules/**"
49     }
50   ],
51   "test": {
52     "karma": {
53       "config": "./karma.conf.js"
54     }
55   },
56   "defaults": {
57     "styleExt": "css",
58     "component": {}
59   }
60 }

View Code

apps的數組，數組中的對象有一個index屬性，和一個main屬性。

默認狀況下：

index屬性指向src（root屬性）目錄中的index.html，他是angular應用啓動時加載的頁面。

main屬性指向了src下面的main.ts，他是angular應用啓動時加載的腳本，main.ts負責引導angular應用啓動。

咱們來看一下main.ts，這裏是一個angular應用的起點。

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.log(err));

View Code

• import { enableProdMode } from '@angular/core'; 導入angular核心模塊的enableProdMode方法，此方法用來關閉angular應用的開發者模式。
• import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 從瀏覽器模塊中導入一個platformBrowserDynamic方法，這個方法會告訴angular使用哪一個模塊來啓動應用。
• AppModule，也就是命令行工具生成的那個整個應用的主模塊
• environment：環境配置，angular對多環境的一個支持。
• if (environment.production) {
    enableProdMode();
  } 若是當前是生產環境，就調用enableProdMode方法關閉開發者模式。
• platformBrowserDynamic().bootstrapModule(AppModule); 最後調用bootstrapModule()這個方法，傳入AppModule做爲啓動模塊來啓動應用，是整個angular應用的起點，程序是經過這裏來開始運行的。

angular在知道要用AppModule做爲主模塊之後，他會加載AppModule模塊，而後angular會分析AppModule模塊須要依賴哪些模塊，並加載哪些模塊。

在app.module.ts文件中咱們會看中，AppModule模塊會依賴BrowserModule、FormsModule和HttpModule模塊，加載這些模塊以後，會再分析這些模塊須要依賴哪些模塊，而後再去加載哪些模塊，以此類推，直到加載完全部所需的模塊。

當加載完之後，angular會在index.html文件中尋找啓動模塊指定的主組件對應的css選擇器，也就是說啓動後angular會在index.html文件中找<app-root>，會用主組件也就是AppComponent中指定的模板內容（app.component.html），用這裏面的內容替換到<app-root>這個標籤，在這個整個過程完成以前，頁面將會展現<app-root>這個標籤中的內容，也即時loading…這樣的一個字符串。

啓動程序：

ng serve 

開始編譯應用，若是出現webpack：Compiled successful就表明編譯成功了，咱們就能夠在瀏覽器中輸入http://localhost:4200

 //設置不一樣端口
ng server --port **

--------------------------------------------------------------------

1.ng new命令，快速建立一個新的項目

$ ng new angular2_hello_world

2.運行應用

 ng serve

3. 製做Component

$ ng generate component **

 

-----------------------refrence-----------------------------------

 http://www.ituring.com.cn/book/tupubarticle/13538

 cli

什麼是Angular-cli

簡言之：就是NG團隊自行維護的一個｀腳手架｀[內置單元測試及webpack2打包工具等]　－－　前身是ember-cli；

官網：https://cli.angular.io/ 
Github: https://github.com/angular/angular-cli 
npm: https://www.npmjs.com/package/angular-cli

範圍	命令	做用
new	ng new new_project	初始化新項目
Component	ng g component my-new-component	新建一個組件
Directive	ng g directive my-new-directive	新建一個指令
Pipe	ng g pipe my-new-pipe	新建一個管道
Service	ng g service my-new-service	新建一個服務
Class	ng g class my-new-class	新建一個類
Interface	ng g interface my-new-interface	新建一個接口
Enum	ng g enum my-new-enum	新建一個枚舉
Module	ng g module my-module	新建一個模塊