文章目錄

• 前言
• 一、Angular是什么？
• 二、使用步驟
• • 1.安裝node.js
  • 2.安裝angular/cli(僅一次)
  • 3.創建angular項目
• 三、核心概念及用法
• • 1.angular核心概念之一：模塊 （module）
  • 2.angular核心概念之二：組件 （component）
  • • 自定義組件的步驟
    • 創建組件的簡化工具
  • 3.angular核心概念之三：數據綁定和指令
  • • (1）HTML綁定：{{}}
    • (2) 屬性綁定：{{}} or []
    • (3) 事件綁定：（）
    • (4) 指令綁定：* 或 []
    • (5) 雙向數據綁定指令：[()]
  • 4.angular核心概念之四：指令系統（預定義指令+自定義指令）
  • • (1）循環綁定：*ngFor
    • (2） 選擇綁定：*ngIf
    • (3）樣式綁定：[ngStyle]
    • (4）樣式綁定：[ngClass]
    • (5）特殊的選擇綁定（了解即可）
    • (6）雙向數據綁定指令：[(ngModel)]——重點
    • 如何自定義指令?
    • 小節
  • 5.angular核心概念之五：過濾器
  • • 自定義管道的步驟：
  • 6.angular核心概念之六：服務和依賴注入——抽象&重點！
  • • 創建服務對象的步驟：
• 總結

---

前言

本文將用最簡約的語言介紹angular的基本概念及相關快捷指令等，便于開發者快速入門學習以及日常工作中的使用。（ps：筆記內容源于b站學習資源觀后整理及個人總結。）

---

一、Angular是什么？

• Angular是Google開發的開源web前端框架。

• 作為三大框架之首，是現在網上使用量最大的框架。

• 基于typescript，和react，vue相比更適合中大型企業級項目。

• 必備基礎 html,css,js,es6。

二、使用步驟

1.安裝node.js

//查看node.js版本 node -v//查看npm版本（自動安好） npm -v

2.安裝angular/cli(僅一次)

//二選一即可，建議安裝cnpm代替npm。 npm install -g@angular/cli cnpm install -g@angular/cli// 安好后可以查看angular版本 ng -v

3.創建angular項目

先在本地目錄下創建一個新的文件夾，例如angular1文件夾。

cd angular1

給新建的angular項目起名，例如angulardemo01。

//二選一 ng new angulardemo01 ng n angulardemo01

之后的兩步直接選N , SCSS即可。

系統自動安裝依賴，也可以ctr+c結束自行安裝：cnpm install。

安好后cd到對應目錄下。

cd c:// cd angular1 cd angulardemo01

打開項目

//三選一 Ng serve --open ng s --o npm start

三、核心概念及用法

1.angular核心概念之一：模塊 （module）

• 就是一個抽象的容器，用于對組件進行分組。
• 整個應用初始時有且只有一個主模塊 AppModule。

2.angular核心概念之二：組件 （component）

• 是一段可以反復使用的頁面片段，如頁頭、輪播、手風琴。
• 組件（component）=模板（template）+腳本（script）+樣式（style）。
• 在NG(angular)中，任何一個組件都必須聲明在一個模塊中。
• 組件可以當作屬性使用（selector里加[]），或者是元素標簽使用（selector里什么都不加）。

自定義組件的步驟

（1）創建組件class:

@component({ selector:'app-myc01', templateUrl:'./myc01.component.html'， //或template:'<h2></h2>'， styleUrls:['./myc01.component.css'] })export class myc01Component{}

(2)在某個模塊中注冊組件class:

//app.module.ts declarations:[AppComponent,myc01Component]

(3)使用已經注冊過的組件:(任意一個dom里，除了自己)

//app.component.html <myc01></myc01>

創建組件的簡化工具

//任選其一 ng generate component 組件名 ng g component 組件名 ng g c 組件名//上述不好用，可如下任選其一。npx可用于執行當前項目中node_modules/.bin目錄下的可執行文件。 npx ng generate component 組件名 npx ng g component 組件名

3.angular核心概念之三：數據綁定和指令

(1）HTML綁定：{{}}

• 創建對象不可以（ng表達式中禁止出現new）
• json序列化不可以（ng表達式中json是undefined）

(2) 屬性綁定：{{}} or []

• 形式1：直接在屬性上用{{}}。<p title="{{msg}}">
• 形式2：使用[]做屬性綁定 。<p [title]="msg">
• 屬性綁定可以綁定變量、常量。注意綁定常量字符串需要引號。<p [title]="'消息是'+msg">
• 注意：屬性綁定通常賦值為變量，如果賦值為常量（如字符串常量），必須用引號括起來。

(3) 事件綁定：（）

• 事件名用（）括起來，處理函數名后必須有（）。(click)="zengjia()"

(4) 指令綁定：* 或 []

• 詳見下節

(5) 雙向數據綁定指令：[()]

• 詳見下節

4.angular核心概念之四：指令系統（預定義指令+自定義指令）

(1）循環綁定：*ngFor

<any *ngFor="let 臨時變量 of 數據"><any *ngFor="let 臨時變量 of 數據; let i=index;"><any *ngFor="let 臨時變量 of 數據; index as i">

(2） 選擇綁定：*ngIf

//如果布爾表達式為false，則當前元素從dom樹上刪除 <any *ngIf="布爾表達式"> <any *ngIf="布爾表達式；else ELSE塊的編號">…</any><ng-template #ELSE塊的編號> <any>…</any> </ng-template>

(3）樣式綁定：[ngStyle]

詳見之前寫的文章: 巧用angular指令系統——樣式綁定（ngClass和 ngStyle的使用詳解）

• ngStyle綁定的值必須是一個對象！對象屬性就是css樣式名。<any [ngStyle]="obj">

(4）樣式綁定：[ngClass]

詳見之前寫的文章: 巧用angular指令系統——樣式綁定（ngClass和 ngStyle的使用詳解）

• ngClass綁定的值必須是一個對象！對象屬性就是 class名，屬性值為true\false,true的話該class就出現，否則該class不出現。<any [ngClass]="obj">

(5）特殊的選擇綁定（了解即可）

(6）雙向數據綁定指令：[(ngModel)]——重點

• 方向1：model=>view,模型變則視圖變,用[]綁定
• 方向2：view=>model,視圖（表單元素）變則模型變，用（）綁定
  <input/select/textarea [(ngModel)]="uname">

注意：

• 如果想直接監視模型數據改變，可以綁定ngModelChange事件。
• ngModel指令不在CommonModule模塊中，而在FormsModule中，使用之前必須在主模塊中導入該模塊：

//app.module.ts: @NgModule({ imports:[BrowserModule，FormsModule] })

如何自定義指令?

• 自定義指令都是作為元素屬性來使用的，selector應該是【指令名】

ng g directive 指令名

小節

angular預定義指令分三類：
（1）組件指令：NG中component繼承自Directive。是一種特殊的指令。
（2） 結構型指令：會影響dom樹結構，必須使用星號開頭，如*ngFor,*ngIf。
（3） 屬性型指令：不會影響dom樹結構，只是影響元素外觀或行為，必須用[ ]括起來，如[ngClass]，[ngStyle]。

5.angular核心概念之五：過濾器

• filter：過濾器，用于在view中呈現數據時顯示為另一種格式。
• 過濾器的本質是一個函數,接受原始數據轉換為新的格式進行輸出：function(oldVal){ 處理 return newVal }
• 使用過濾器：{{ e.salary | 過濾器名}}
• angular 2.x，過濾器更名為“管道（pipe）”

自定義管道的步驟：

（1）創建管道class，實現轉換功能。管道執行過濾任務的是一個固定的函數，transform(val){ }。

@Pipe({name:'sex'}) export class SexPipe{ transform(val){return…} }

（2）在模塊中注冊管道

//app.module.ts declarations:[SexPipe]

（3）在模板視圖中使用管道

{{e.empSex|sex}}<p [title]="empSex|sex">

說明：管道的transform方法除了val還可以接受其他參數，調用管道時用冒號為這些參數賦值，例如：{{e.empSex|sex:'en'}}

創建管道對象的簡便工具：ng g pipe 管道名

預定義管道：

• lowercase ：轉換為小寫 {{ename|lowercase}}

• uppercase ：轉換為大寫 {{ename|uppercase}}

• titlecase ：轉換為首字母大寫{{ename|titlecase}}

• slice:只顯示字符串的一部分。如下從索引0開始不包括索引3{{ename|slice:0:3}}

• json：把js對象序列化為JSON字符串:{{obj | json}}

• number:把數字轉換為具有指定整數位和小數位的字符串{{ num | number}}
  {{ e.salary | number:'4.1-4'}} //含義：整數至少四位，小數點后至少一位最多四位

• currency:將數字轉換為貨幣格式字符串：貨幣符號+三位一逗號+二位小數。
  {{ e.salary | currency}}
  {{ e.salary | currency:'$'}}

• date：把數字轉換為日期字符串
  {{ num | date:'yyyy-MM-dd HH:mm:ss' }}

6.angular核心概念之六：服務和依賴注入——抽象&重點！

Service:服務，angular認為：組件 是與用戶交互的一種對象，其中的內容都應該與用戶操作有關系的；而與用戶操作無關的內容都應該剝離出去，放在“服務對象”中，為組件服務；例如：日志記錄，計時統計 ，數據服務器的訪問……

所有的服務對象都是“可被注入的”

創建服務對象的步驟：

1.創建服務對象

export class LogService{}

2.聲明服務提供者

方式一：創建的服務對象是“單例的”——不論多少個組件使用該服務，只創建一個服務。 常用，保證服務中沒有屬性，該方式是可行的，否則有覆蓋問題。

//根模塊級服務對象@injectable({providedin:'root'})

方式二：（等同方式一）

//app.module.ts providers:[LogService]

方式三：每個組件對應的服務對象都是新建出來的。 在當前組件中聲明，僅用于當前組件的服務提供

@injectable() export class LogService{} ---------------------------------@Component({ ... providers:[LogServce] //組件級服務對象 })export class LoginComponent{}

3.在組件中聲明依賴，服務提供者就會自動注入進來，組件直接使用服務對象即可.
服務對象都是在某個組件中使用。

export class xxComponent{ constructor(log:LogService){ //此處的log變量就會被注入為LogService的實例 } }

簡化工具：ng g service 服務名

總結

以上就是今天要講的內容，本文僅僅簡單介紹了angular的使用與一些概念，扎實的掌握還需要日積月累的學習與實踐的經驗總結，讓我們一起加油，小伙伴們有什么問題與質疑歡迎留言一起討論喲！

總結

以上是生活随笔為你收集整理的Angular基本概念及用法总结的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。