前言
想來想去，概念這些東西不怎麼想講，更多的是想講點實戰性的內容。
所以有些東西跳過去了，小夥伴們請去看官方文件哈；跳躍性的前進，寫的不好多包涵。。。
基礎概念
國內的官網–基礎
- 詞彙表(又名計算機術語–angular2 &
es6 &
es7) - 速查表:又名demo寫法表,裡面涵蓋了很多寫法，相當於一本小字典
- 關於ng2的一堆為什麼: 閱讀後可以加速你的理解程度
- NG2的架構概覽：多讀多看-切記切記切記！！！！！！！
對應的國際官網
英文水平比較好的推薦國際官網，這邊的API更新很及時
angular-cli 啟動
src是開發目錄，生產打包後會產生一個dist目錄；
初步說下你從啟動到瀏覽器看到app works!依賴了哪些檔案，有哪些作用
- index.html
<
!doctype html>
<
html>
<
head>
<
meta charset="utf-8">
<
title>
NgTestdemo<
/title>
<
!--規定所有url的預設目標由誰開始-->
<
base href="/">
<
meta name="viewport" content="width=device-width, initial-scale=1">
<
link rel="icon" type="image/x-icon" href="favicon.ico">
<
/head>
<
body>
<
!--根元件-->
<
app-root>
Loading...<
/app-root>
<
/body>
<
/html>
複製程式碼- main.ts
// 引入生產模式，控制關閉開發模式的，函式來的import {
enableProdMode
} from '@angular/core';
// app啟動引導模組，必須引入import {
platformBrowserDynamic
} from '@angular/platform-browser-dynamic';
// 根模組import {
AppModule
} from './app/app.module';
// 環境配置檔案，可以寫入介面路徑什麼的。。dev,prod各一份import {
environment
} from './environments/environment';
if (environment.production) {
enableProdMode();
}// 載入程式啟動platformBrowserDynamic().bootstrapModule(AppModule);
複製程式碼-
polyfill.ts : 要相容到ie10,安裝裡面對應的膩子（polyfill）..有詳細的註釋
-
typings.d.ts : 全域性變數宣告的檔案
- testconfig.*.json: 不同模式下呼叫的tsconfig配置檔案
-
app目錄下(分的很徹底，寫起來跟常規基本一樣)
- app.component.css : 根樣式檔案，配置了scss就是.scss
-
app.component.html : 根html
<
!--Mustache包括的是雙向資料繫結-->
<
h1>
{{title
}
} <
/h1>
複製程式碼 - app.component.spec.ts: 測試用例，夠繁瑣，以後再說
-
app.components.ts：元件邏輯處理
// 匯入裝飾器：裝飾器可以理解為一些函式的封裝，使其書寫起來非常簡潔明瞭 import {
Component
} from '@angular/core';
@Component({
selector: 'app-root', // 自定義元素 templateUrl: './app.component.html', // 元件關聯的html頁面 styleUrls: ['./app.component.css'] // 元件自身的樣式
}) // 匯出對應的元件 export class AppComponent {
title = 'app works!';
// 宣告一個public的變數並且賦值
}複製程式碼 -
app.module.ts：模組
// 瀏覽器的NG模組 import {
BrowserModule
} from '@angular/platform-browser';
// 這也是一個裝飾器，用來定義模組和元件相關的，比如服務，元件元素，指令，匯入匯出模組的識別 // 每個模組的定義必須有這個才能生效，ng2的開發模式就是類似一個樹，從根節點無限發散 import {
NgModule
} from '@angular/core';
// 表單模組，比如你要在元件內用到一些表單元素或者資料繫結，不然會報錯 import {
FormsModule
} from '@angular/forms';
// rest風格的請求模組 import {
HttpModule
} from '@angular/http';
import {
AppComponent
} from './app.component';
@NgModule({
declarations: [ // 指令和元件的放在這裡 AppComponent ], imports: [ // 比如你要引用那些模組的功能就要引入 BrowserModule, FormsModule, HttpModule ], providers: [], // 服務 bootstrap: [AppComponent] // 啟動的模組，一個app一般只有一個啟動模組！！一般！！
}) export class AppModule {
}複製程式碼
常見模板指令用法解釋
{{item | SliceStr:1:2:': 可以響應元件內對應的item欄位值變化，
...'}
}|是管道，支援多個管道，支援內建管道和自定義管道，:跟隨是管道的引數，後續文件我寫一個如何自定義管道的文章[]=":繫結元件內的值[單向，資料流向檢視]，指令，原生html控制元件的自身屬性[value,src,class,style]等，雙引號內支援條件表示式[不完全等同於js條件表示式]或者方法亦或者變數，
"(click)=": 事件繫結[檢視觸發改變資料來源]，同上，支援表示式和方法。。特殊之處後面解釋
"[(target)]: 雙向資料繫結，檢視和資料來源同步改動。。一般用於表單比較多。
繫結賦值的條件表示式的特殊之處：
-
不支援：
- 賦值 (=, +=, -=, …)
- new運算子
- 使用;
或,的鏈式表示式 - 自增或自減操作符 (++和–)
- 不支援位運算|和&
-
支援：
- 邏輯運算(|| , &
&
) - 三目運算子( true ? true : false )
- 直接賦值運算(item = 2);
- 變數傳遞
- 空值保護運算子(
?.)item?.a?.b: 會判斷item是否有a這個值，防止undefined或者null讓檢視渲染報錯
- 邏輯運算(|| , &
最最最常用的內建指令
- 樣式繫結(
ngClass)[ngClass]或者[ngStyle]:可以傳遞一個物件，用來動態判斷增加多個樣式[class.a]或者[style.font-size]:單一操作類或者某個行內樣式
- 資料遍歷(
*ngFor)*ngFor=": 可以用這個來遍歷陣列物件，
let i of item;
let index = index"let index = index意思是建立一個區域性遍歷把當前遍歷的索引儲存到你的自定義變數index
- 動態渲染(
*ngIf)*ngIf=": 比如loading到檢視全部渲染就經常用到這個,當前不在乎低版本的可以用
item"[hidden]來控制切換，因為*ngIf這種動態渲染節點的還是有一定的效能消耗的。。
總結
這一篇沒有涉及到路由這些和表單這些；
準備拆成兩個文章來說；
- 路由的配置及懶載入這些，
- 模板驅動的表單及響應式表單[巢狀表單響應等]，Enter鍵觸發搜尋等。。
哦，還少說了服務這塊，看著安排，這些說完之後就直接開搞一些小玩意，比如自定義管道，上傳元件，自定義指令這些。。。發現文章有錯誤的，或者有更好講解的，請留言指出，我會及時修正，謝謝！
其他的一丟丟廢話：若是學會了ng2技術棧，其實你過程接觸了Typescript，Rxjs，es6&等
7