目錄結(jié)構(gòu)

node_modules        第三方依賴包存放目錄
e2e                 端到端的測(cè)試目錄  用來(lái)做自動(dòng)測(cè)試的
src                 應(yīng)用源代碼目錄  
.angular-cli.json   Angular命令行工具的配置文件。后期可能會(huì)去修改它，引一些其他的第三方的包  比如jquery等
karma.conf.js       karma是單元測(cè)試的執(zhí)行器，karma.conf.js是karma的配置文件
package.json        npm工具的配置文件，這個(gè)文件里面列出了該應(yīng)用程序所使用的第三方依賴包。在新建項(xiàng)目的時(shí)候，等半天就是在下載第三方依賴包。下載完成后會(huì)放在node_modules這個(gè)目錄中，后期我們可能會(huì)修改這個(gè)文件。
protractor.conf.js  也是一個(gè)做自動(dòng)化測(cè)試的配置文件
README.md           說(shuō)明文件
tslint.json         是tslint的配置文件，用來(lái)定義TypeScript代碼質(zhì)量檢查的規(guī)則，不用管它

src 目錄

app目錄             包含應(yīng)用的組件和模塊，我們要寫的代碼都在這個(gè)目錄
assets目錄        資源目錄，存儲(chǔ)靜態(tài)資源的  比如圖片
environments目錄    環(huán)境配置。Angular是支持多環(huán)境開(kāi)發(fā)的，我們可以在不同的環(huán)境下（開(kāi)發(fā)環(huán)境，測(cè)試環(huán)境，生產(chǎn)環(huán)境）共用一套代碼，主要用來(lái)配置環(huán)境的
index.html          入口。整個(gè)應(yīng)用的根html，程序啟動(dòng)就是訪問(wèn)這個(gè)頁(yè)面
main.ts             整個(gè)項(xiàng)目的入口點(diǎn)，Angular通過(guò)這個(gè)文件來(lái)啟動(dòng)項(xiàng)目
polyfills.ts        主要是用來(lái)導(dǎo)入一些必要庫(kù)，為了讓Angular能正常運(yùn)行在老版本下
styles.css          主要是放一些全局的樣式
tsconfig.app.json   TypeScript編譯器的配置,添加第三方依賴的時(shí)候會(huì)修改這個(gè)文件
tsconfig.spec.json  不用管
test.ts             也是自動(dòng)化測(cè)試用的
typings.d.ts        不用管

比較重點(diǎn)的：package.json, src-app, src-assets, index.html, styles.css

• package.json 里面定義了項(xiàng)目名稱 項(xiàng)目版本 以及需要的各種依賴
• src 目錄
  app目錄（重點(diǎn)）：app目錄是我們要編寫的代碼目錄。我們寫的代碼都是放在這個(gè)目錄。
  放我們的組件、服務(wù)以及模塊
  一個(gè)Angular程序至少需要一個(gè)模塊和一個(gè)組件。在我們新建項(xiàng)目的時(shí)候命令行已經(jīng)默認(rèn)生成出來(lái)了。
  
  ng01.png

app.component.ts：這個(gè)文件表示組件
組件是Angular應(yīng)用的基本構(gòu)建模塊，可以理解為一段帶有業(yè)務(wù)邏輯和數(shù)據(jù)的Html

app.component.ts :

ng02.png

組件相關(guān)概念：

1. 組件元數(shù)據(jù)裝飾器（@Component）
   簡(jiǎn)稱組件裝飾器，用來(lái)告知Angular框架如何處理一個(gè)TypeScript類.
   Component裝飾器包含多個(gè)屬性，這些屬性的值叫做元數(shù)據(jù)，Angular會(huì)根據(jù)這些元數(shù)據(jù)的值來(lái)渲染組件并執(zhí)行組件的邏輯

2. 模板（Template）--> html
   我們可以通過(guò)組件自帶的模板來(lái)定義組件的外觀，模板以html的形式存在，告訴Angular如何來(lái)渲染組件，一般來(lái)說(shuō)，模板看起來(lái)很像html，但是我們可以在模板中使用Angular的數(shù)據(jù)綁定語(yǔ)法，來(lái)呈現(xiàn)控制器中的數(shù)據(jù)。

3. 控制器（controller）
   控制器就是一個(gè)普通的typescript類，他會(huì)被@Component來(lái)裝飾，控制器會(huì)包含組件所有的屬性和方法，絕大多數(shù)的業(yè)務(wù)邏輯都是寫在控制器里的?？刂破魍ㄟ^(guò)數(shù)據(jù)綁定與模板來(lái)通訊，模板展現(xiàn)控制器的數(shù)據(jù)，控制器處理模板上發(fā)生的事件。

裝飾器，模板和控制器是組件的必備要素。還有一些可選的元素，比如：

• 輸入屬性（@inputs）? 是用來(lái)接收外部傳入的數(shù)據(jù)的,Angular的程序結(jié)構(gòu)就是一個(gè)組件樹(shù)，輸入屬性允許在組件樹(shù)種傳遞數(shù)據(jù)
• 提供器（providers）： 這個(gè)是用來(lái)做依賴注入的
• 生命周期鉤子（LifeCycle Hooks）： 一個(gè)組件從創(chuàng)建到銷毀的過(guò)程中會(huì)有多個(gè)鉤子會(huì)被觸發(fā)，類似于Android中的Activity的生命周期
  樣式表：組件可以關(guān)聯(lián)一些樣式表
• 動(dòng)畫（Animations）： Angular提供了一個(gè)動(dòng)畫包來(lái)幫助我們方便的創(chuàng)建一些跟組件相關(guān)的動(dòng)畫效果，比如淡入淡出等
• 輸出屬性（@Outputs）： 用來(lái)定義一些其他組件可能需要的事件或者用來(lái)在組件之間共享數(shù)據(jù)

app.module.ts 模塊
與AppComponent類似，模塊也需要裝飾器來(lái)裝飾。

ng03.png

Angular 命令

// 創(chuàng)建一個(gè)新的工作空間和初始應(yīng)用
ng new [name]

cd my-app
ng serve --open
// ng serve 命令會(huì)啟動(dòng)開(kāi)發(fā)服務(wù)器、監(jiān)視文件，并在這些文件發(fā)生更改時(shí)重建應(yīng)用。
// --open（或者只用 -o 縮寫）選項(xiàng)會(huì)自動(dòng)打開(kāi)你的瀏覽器，并訪問(wèn) http://localhost:4200/

Angular 基礎(chǔ)概念

模塊

將其組件和一組相關(guān)代碼（如服務(wù)）關(guān)聯(lián)起來(lái)

> ng generate module my-module-name
> 簡(jiǎn)寫 ng g m my-module-name
> 配置 ng g m my-module-name-routing 創(chuàng)建帶路由的模塊

組件

> ng g c parent/child
         - 快速新建一個(gè)parent目錄下的child組件
         - 查詢?cè)撀窂缴献钚〉哪K并加入到模塊中
ng g   // 創(chuàng)建新的東西，如組件等
ng g component   // 創(chuàng)建新組件
ng g component components/news // 新建news組件。
ng g component components      // 執(zhí)行這兩個(gè)命令后，如下圖

ng04.png

指令

包含特定邏輯和數(shù)據(jù)，不帶視圖，多用于特定模板標(biāo)記的邏輯功能

服務(wù)

對(duì)于與特定視圖無(wú)關(guān)的，并且想跨組件共享的數(shù)據(jù)或邏輯，可以創(chuàng)建服務(wù)類。可作為依賴注入對(duì)象注入到使用的組建中

數(shù)據(jù)綁定

在模板上通過(guò)標(biāo)記語(yǔ)言，數(shù)據(jù)傳給對(duì)應(yīng)的組件/指令，事件返回給使用者
[] 屬性綁定
() 事件綁定
[()] 雙向綁定

<input [ngModel]="data" (ngModuleChange)="myFunc($event)" [(ngModel)]='data1'>

路由

提供了一個(gè)服務(wù)，狀態(tài)視圖與URL的匹配

ng g m test1   // 創(chuàng)建一個(gè)test1的module
ng g m test2 --routing   // 創(chuàng)建一個(gè)帶路由的module

Angular CLI 常用命令

ng new my-project-name   // 創(chuàng)建一個(gè)新項(xiàng)目
ng build   // 構(gòu)建/編譯應(yīng)用
ng test   // 運(yùn)行單元測(cè)試
ng e2e   // 運(yùn)行端到端（end-to-end）測(cè)試
ng serve   // 啟動(dòng)一個(gè)小型web服務(wù)器，用于托管應(yīng)用
ng --help   // 不懂的時(shí)候用這個(gè)查
ng xxx --help   // xxx 某個(gè)命令

創(chuàng)建新的組件后，要在app module 中導(dǎo)入，并聲明

import { MessageComponent } from './message/message.component';
@NgModule({
  declarations: [
      MessageComponent
  ]
})