Angular2+ 基本知識匯總
Angular是Google推出的Web前端開發框架，從12年發布起就受到了強烈的關註，他首次提出了雙向綁定的概念，讓人耳目一新。
Angular 2特性
就在2016年9月中旬，時隔4年，Google正式發布了Angular的第二代開發框架Angular 2，2017年3月推出了Angular4。Angular 5 出來了，不過你也不用太過擔心，因為不論是Angular 4 還是Angular 5，其內核依然是Angular 2。從 2.0 版本開始出的新版本會保持向後兼容，不會出現 1 到 2 這麽大的變化.
這個架構圖展現了 Angular 應用中的 8 個主要構造塊：
- 模塊 (module)
- 組件 (component)
- 模板 (template)
- 元數據 (metadata)
- 數據綁定 (data binding)
- 指令 (directive)
- 服務 (service)
- 依賴註入 (dependency injection)
- 1. 模塊 (module)
Angular 應用是模塊化的，並且 Angular 有自己的模塊系統，它被稱為 Angular 模塊或 NgModules。
Angular 或者 Ionic 新建的項目，都會存在一個根模塊，默認名是 AppModule。如果你使用了模塊化來創建應用，包括 AppModule，每個都會存在一個 @NgModule 裝飾器的類(很像 java 中的註解，但官方命名叫裝飾器)。新建的頁面，如果不使用懶加載，都要在 @NgModule 中先聲明後使用。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
//app.module.ts
import { NgModule } from ‘@angular/core‘; import { BrowserModule } from ‘@angular/platform-browser‘; @NgModule({ imports: [ BrowserModule ], providers: [ Logger ], declarations: [ AppComponent ], exports: [ AppComponent ], bootstrap: [ AppComponent ] }) export class AppModule { } |
- imports 本模塊聲明的組件模板需要的類所在的其它模塊。
- providers 服務的創建者，並加入到全局服務列表中，可用於應用任何部分。
- declarations 聲明本模塊中擁有的視圖類。Angular 有三種視圖類：組件、指令和管道。
- exports declarations 的子集，可用於其它模塊的組件模板。
- bootstrap 指定應用的主視圖（稱為根組件），它是所有其它視圖的宿主。只有根模塊才能設置 bootstrap 屬性。
- 2. 組件 (component)、模板 (template)、元數據 (metadata)
//hero-list.component.ts
@Component({
selector: ‘hero-list‘,
templateUrl: ‘./hero-list.component.html‘,
providers: [ HeroService ]
})
export class HeroListComponent implements OnInit {
/* . . . */
}
組件就是一個類，是Angular的核心。@Component 是組件元數據裝飾器，用來修飾一個組件，他能接受一個配置對象， Angular 會基於這些信息創建和展示組件及其視圖。
- selector：CSS 選擇器，它告訴 Angular 在父級 HTML 中查找 <hero-list> 標簽，創建並插入該組件。
- templateUrl：組件 HTML 模板的模塊相對地址，如果使用 template 來寫的話是用“`”這個符號來直接編寫 HTML 代碼。
- providers：組件所需服務的依賴註入。
metadata
元數據裝飾器用類似的方式來指導 Angular 的行為。 例如 @Input、@Output、@Injectable
等是一些最常用的裝飾器。
- 1. 數據綁定 (data binding)
這裏一共展示四種數據綁定，看一下示例代碼：
1) //插值表達式 顯示組件的hero.name屬性的值
<li>{{hero.name}}</li>
2) //屬性綁定 把父組件selectedHero的值傳到子組件的hero屬性中，也可以把組件中的屬性綁定到模板中元素的dom屬性上。
<hero-detail [hero]="selectedHero"></hero-detail>
3) //事件綁定 用戶點擊英雄的名字時調用組件的selectHero方法
<li (click)="selectHero(hero)"></li>
4) //雙向綁定 數據屬性值通過屬性綁定從組件流到輸入框。用戶的修改通過事件綁定流回組件，把屬性值設置為最新的值
<input [(ngModel)]="hero.name">
- 4. 指令 (directive)
嚴格來說組件就是一個指令，但是組件非常獨特，並在 Angular 中位於中心地位，所以在架構概覽中，我們把組件從指令中獨立了出來。
我們這裏提到的指令有兩種類型：
結構型 structural 指令和屬性 attribute 型指令。
1) 結構型指令是 ngFor、ngIf 這種的，通過在 DOM 中添加、移除和替換元素來修改布局。
2) 屬性型指令是 ngModel 這種的，用來修改一個現有元素的外觀或行為。
Angular 還有少量指令，它們或者修改結構布局（例如 ngSwitch ）， 或者修改 DOM 元素和組件的各個方面（例如 ngStyle 和 ngClass）。
- 5. 服務 (service)
服務是用來封裝可重用的業務邏輯
- 6. 依賴註入 (dependency injection)
依賴註入是提供類的新實例的一種方式，還負責處理類所需的全部依賴。大多數依賴都是服務。 Angular 使用依賴註入來提供新組件以及組件所需的服務。
比如我們要給某組件導入HeroService這個服務，看這段代碼：
constructor(private service: HeroService) {
...
}
這個constructor就是構造函數，依賴註入在 constructor 中進行。前面寫上 private、public（在構造函數內寫上public會自動創建類的成員變量），這是 TypeScript 語法。
當 Angular 創建組件時，會首先為組件所需的服務請求一個註入器 injector。我們必須先用註入器 injector 為 HeroService 註冊一個提供商 provider（服務）。
看一下下面的代碼，意思就是我們必須在 providers 寫上才能用（如果不在組件中註冊，則需要在模塊中註冊）
@Component({
selector: ‘hero-list‘,
templateUrl: ‘./hero-list.component.html‘,
providers: [ HeroService ]
})
依賴註入主要用來導入服務。
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 |
新建一個模塊 |
npm install -g @angular/cli
ng new my-app
cd my-app
ng serve –open
ng server –port 4321 --disable-host-check
生成組件的命令：
ng g component **
創建 UserComponent 組件：ng g component user
angular-cli工具自動為我們生成的相關基本文件和代碼
調試
Ng server的compiling
F12-source-webpack
易錯：Typescript的類型
項目
bootstrap 安裝 ngx-bootstrap
npm install ngx-bootstrap bootstrap –save
bootstrap 安裝需要些配置，可以網上找下或者在index.html中引入
可能缺少jq
$ npm install jquery
參考：
https://www.cnblogs.com/zhuzy/p/8031718.html
ngx-bootstrap網址 http://ngx-bootstrap.com/#/buttons
如何在Angular4中引入jquery
npm install --save jquery
npm install @types/jquery --save
然後在組件中引入jquery即可使用：
import * as $ from ‘jquery‘;
路由
Http
form
跨域
1.開機配置nginx（192.168.1.5），運行nginx
2.運行 ng server --disable-host-check
3.
前端請求：http://edu.xk.com/
html： http://edu.xk.com/xkweb/
接口請求：http://edu.xk.com/xkapi
refrence
Angular中文文檔 https://www.angular.cn/docs
英文版 https://angular.io/guide/quickstart
其中有live example：
https://stackblitz.com/angular/nlvrooxxdvy?file=src%2Fapp%2Fheroes%2Fheroes.component.ts
TypeScript中文文檔 (https://www.tslang.cn/docs/handbook/basic-types.html)
Angular2+ 基本知識匯總