Angular學習資料大全和常用文法彙總（讓後端程式員輕松上手）

前言：

　　首先為什麼要寫這樣的一篇文章呢？主要是因為前段時間寫過一些關于Angualr的相關實戰文章，有些愛學習的小夥伴對這方面比較感興趣，但是又不知道該怎麼入手（因為認識我的大多數小夥伴都是後端的同學），是以今天準備出一篇Angular學習資料彙總和日常開發中使用比較頻繁的文法總結。讓更多的後端程式員更好的了解學習Angualr，拓展自己的技術棧。

Angular簡介：

　　Angular 是一個應用設計架構與開發平台，用于建立高效、複雜、精緻的單頁面應用。

學習資料推薦：

Angular-GitHub倉庫位址：

https://github.com/angular/angular

Angualr官方文檔教程（推薦）：

　　對于我們而言無論是學習什麼技術，首先一點不要忽視了官網的重要性，而且Angular官網還有中文版的相對而言更容易上手。

https://angular.cn/docs

AngularJS 文檔教程 | 菜鳥教程：

https://www.runoob.com/angularjs/angularjs-tutorial.html

AngularJS 文檔教程 | W3Cschool：

https://www.w3cschool.cn/angularjs/

Angular入門，開發環境搭建，使用Angular CLI建立你的第一個Angular項目：

https://www.cnblogs.com/Can-daydayup/p/14166192.html

Angular 學習資源清單：

https://github.com/wendellhu95/blog/issues/10

https://zhuanlan.zhihu.com/p/36385830

Angular教程_Angular8 Angular9入門實戰視訊教程（推薦）：

對于一些初學者而言，假如不知道該怎麼做的話最好推薦先看看視訊，熟悉一下Angualr的開發的基本流程。

https://www.bilibili.com/video/BV1bt411e71b?from=search&seid=14846265447217622438

AngularJS視訊教程_免費AngularJS教程線上學習-php中文網課程：

https://www.php.cn/course/list/20.html

Angular實戰教程視訊：

https://www.bilibili.com/video/BV1i741157Fj?from=search&seid=14846265447217622438

Angular常用文法：

1、事件綁定（）:

<button (click) = "share()"> share </button>

2、click 點選事件：

<button (click) = "share()"> share </button>

3、ng-hide/ng-show設定應用部分是否可見：

<p ng-hide="true"> //隐藏
<p ng-hide="false">//顯示

4、ngModelChange選擇改變事件：

=============Html=============
 <div class="set-select">
    <label for="rankbutton">選擇平台</label>
    <select id="rankbutton" [(ngModel)]="platform" (ngModelChange)="set_platform()"> 
    <select id="rankbutton" [(ngModel)]="platform">
      <option *ngFor="let item of platforms" [value]='item.key'>{{item.value}}</option>
    </select>
  </div>

============Ts================
platform = 'wx';
platforms: any = [
    { key: 'wx', value: '微信' },
    { key: 'tt', value: '百度' },
    { key: 'wb', value: '微網誌' },
    { key: 'bjh', value: '抖音' },
    { key: 'zcool', value: '淘寶' },
  ];
  
set_platform() {
     this.platform
     console.log('this.platform:',this.platform)
   }

5、input事件在使用者輸入時觸發：

<input placeholder="input here" (input)="onInput($event)" />

6、屬性綁定 [ ] 文法：

<a [title]="product.name+'描述'">

`7、[(ngModel)]` ：雙向綁定：

NgModel 指令允許你顯示資料屬性并在使用者進行更改時更新該屬性。這是一個例子：

src/app/app.component.html (NgModel example)
content_copy
<input [(ngModel)]="currentItem.name" id="example-ngModel" name='currentName'> //注意某些情況下需要加name表示唯一辨別，不加的話可能會報錯

導入 FormsModule 以使用 ngModel

要想在雙向資料綁定中使用 ngModel 指令，必須先導入 FormsModule 并将其添加到 NgModule 的 imports 清單中。要了解關于 FormsModule 和 ngModel 的更多資訊，參閱表單一章。

記住，要導入 FormsModule 才能讓 [(ngModel)] 可用，如下所示：

src/app/app.module.ts (FormsModule import)
content_copy
import { FormsModule } from '@angular/forms'; // <--- JavaScript import from Angular
/* . . . */
@NgModule({
/* . . . */

imports: [
BrowserModule,
FormsModule // <--- import into the NgModule
],
/* . . . */
})
export class AppModule { }

https://angular.cn/guide/built-in-directives#ngModel

8、插值文法 `{{...}}：`

花括号之間的文本通常是元件屬性的名字。Angular 會把這個名字替換為響應元件屬性的字元串值。

<p>{{title}}</p>
<div><img src="{{itemImageUrl}}"></div>

9、Angular使用[InnerHtml]中正常顯示富文本内容：

<div class="text" [innerHTML]="richText"></div>

https://blog.csdn.net/a1056244734/article/details/106802008

10、Angular ngFor循環的使用:

屬性index、count、first、last、even、odd

index屬性提供目前對象的索引
count提供目前資料集的長度，類似于datasource.length
first傳回目前清單項是否為第一個
last傳回目前清單項是否為最後一個
even傳回目前清單項index是否為偶數，通常用在增加樣式用來區分行與行之間
odd傳回目前清單項index是否為奇數

<ul>
<li *ngFor="let item of datasource; let o=odd,let e=even" [ngClass]="{odd-action: o,even-action: e}">
<card-item [item]="item"></card-item>
</li>
</ul>

https://www.jianshu.com/p/a35dc3e283cd

11、AngularJS `ng-repeat` 循環使用：

<h1 ng-repeat="x in records">{{x}}</h1>

<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
  $scope.records = [
    "菜鳥教程1",
    "菜鳥教程2",
    "菜鳥教程3",
    "菜鳥教程4",
  ]
});
</script>

12、Angular ng-if判斷使用：

//在angular中沒有else隻能都通過ng-if來判斷
<p ng-if="OwnStatus==0">準備中</p>
<p ng-if="OwnStatus==1">進行中</p>
<p ng-if="OwnStatus==2">已經完成</p>

13、this.router.navigateByUrl跳轉：

<button (click)="Transfer()">頁面調轉</button> 

在typescript中引用Route：
import { Router } from '@angular/router';

在構造函數裡注入：
constructor(private router: Router) { }

調轉事件：
Transfer() {
    //調轉到指定的頁面
    this.router.navigateByUrl("workspace/ClassInfo");  
  }

14、routerlink跳轉：

routerLink本身支援兩種寫法：

<a routerLink="UserDetail"></a>
<a [routerLink]="['UserDetail']"></a>

15、[angular]周遊Array的方法：for, forEach, every，some：

for…of：

let someArray = [1, "string", false];

for (let entry of someArray) {
console.log(entry); // 1, "string", false
}

for循環：

let someArray = [1, "string", false];

for (var i = 0; i < someArray.length; i ++) {
console.log(someArray[i]); // 1, "string", false
}

for…in：

let list = [4, 5, 6];

for (let i in list) {
console.log(i); // "0", "1", "2",
}

for (let i of list) {
console.log(i); // "4", "5", "6"
}

forEach：

forEach其實是JavaScript的循環文法，TypeScript作為JavaScript的文法超集，當然預設也是支援的。

let list = [4, 5, 6];
list.forEach((val, idx, array) => {
// val: 目前值
// idx：目前index
// array: Array
});

every和some：

every和some也都是JavaScript的循環文法，TypeScript作為JavaScript的文法超集，當然預設也是支援的。因為forEach在iteration中是無法傳回的，是以可以使用every和some來取代forEach。

let list = [4, 5, 6];
list.every((val, idx, array) => {
// val: 目前值
// idx：目前index
// array: Array
return true; // Continues
// Return false will quit the iteration
});

參考文章：https://www.jianshu.com/p/2f0c4d81e934

AngularJS 指令大全：

指令	描述
ng-app	定義應用程式的根元素。
ng-bind	綁定 HTML 元素到應用程式資料
ng-bind-html	綁定 HTML 元素的 innerHTML 到應用程式資料，并移除 HTML 字元串中危險字元
ng-bind-template	規定要使用模闆替換的文本内容
ng-blur	規定 blur 事件的行為
ng-change	規定在内容改變時要執行的表達式
ng-checked	規定元素是否被選中
ng-class	指定 HTML 元素使用的 CSS 類
ng-class-even	類似 ng-class，但隻在偶數行起作用
ng-class-odd	類似 ng-class，但隻在奇數行起作用
ng-click	定義元素被點選時的行為
ng-cloak	在應用正要加載時防止其閃爍
ng-controller	定義應用的控制器對象
ng-copy	規定拷貝事件的行為
ng-csp	修改内容的安全政策
ng-cut	規定剪切事件的行為
ng-dblclick	規定輕按兩下事件的行為
ng-disabled	規定一個元素是否被禁用
ng-focus	規定聚焦事件的行為
ng-form	指定 HTML 表單繼承控制器表單
ng-hide	隐藏或顯示 HTML 元素
ng-href	為 the <a> 元素指定連結
ng-if	如果條件為 false 移除 HTML 元素
ng-include	在應用中包含 HTML 檔案
ng-init	定義應用的初始化值
ng-jq	定義應用必須使用到的庫，如：jQuery
ng-keydown	規定按下按鍵事件的行為
ng-keypress
ng-keyup	規定松開按鍵事件的行為
ng-list	将文本轉換為清單 (數組)
ng-model	綁定 HTML 控制器的值到應用資料
ng-model-options	規定如何更新模型
ng-mousedown	規定按下滑鼠按鍵時的行為
ng-mouseenter	規定滑鼠指針穿過元素時的行為
ng-mouseleave	規定滑鼠指針離開元素時的行為
ng-mousemove	規定滑鼠指針在指定的元素中移動時的行為
ng-mouseover	規定滑鼠指針位于元素上方時的行為
ng-mouseup	規定當在元素上松開滑鼠按鈕時的行為
ng-non-bindable	規定元素或子元素不能綁定資料
ng-open	指定元素的 open 屬性
ng-options	在 <select> 清單中指定 <options>
ng-paste	規定粘貼事件的行為
ng-pluralize	根據本地化規則顯示資訊
ng-readonly	指定元素的 readonly 屬性
ng-repeat	定義集合中每項資料的模闆
ng-selected	指定元素的 selected 屬性
ng-show	顯示或隐藏 HTML 元素
ng-src	指定 <img> 元素的 src 屬性
ng-srcset	指定 <img> 元素的 srcset 屬性
ng-style	指定元素的 style 屬性
ng-submit	規定 onsubmit 事件發生時執行的表達式
ng-switch	規定顯示或隐藏子元素的條件
ng-transclude	規定填充的目标位置
ng-value	規定 input 元素的值

https://www.runoob.com/angularjs/angularjs-reference.html

作者：追逐時光者

作者簡介：一個熱愛程式設計，善于分享，喜歡學習、探索、嘗試新事物，新技術的程式猿。

本文版權歸作者和部落格園共有，歡迎轉載，但未經作者同意必須保留此段聲明，且在文章頁面明顯位置給出原文連接配接，否則保留追究法律責任的權利。如果該篇文章對您有幫助的話，可以點一下右下角的【♥推薦♥】，希望能夠持續的為大家帶來好的技術文章，文中可能存在描述不正确或錯誤的地方，歡迎指正、補充，不勝感激！

Angular學習資料大全和常用文法彙總（讓後端程式員輕松上手）

前言：

Angular簡介：

學習資料推薦：

Angular-GitHub倉庫位址：

Angualr官方文檔教程（推薦）：

AngularJS 文檔教程 | 菜鳥教程：

AngularJS 文檔教程 | W3Cschool：

Angular入門，開發環境搭建，使用Angular CLI建立你的第一個Angular項目：

Angular 學習資源清單：

Angular教程_Angular8 Angular9入門實戰視訊教程（推薦）：

AngularJS視訊教程_免費AngularJS教程線上學習-php中文網課程：

Angular實戰教程視訊：

Angular常用文法：

1、事件綁定（）:

2、click 點選事件：

3、ng-hide/ng-show設定應用部分是否可見：

4、ngModelChange選擇改變事件：

5、input事件在使用者輸入時觸發：

6、屬性綁定 [ ] 文法：

`7、[(ngModel)]` ：雙向綁定：

8、插值文法 `{{...}}：`

9、Angular使用[InnerHtml]中正常顯示富文本内容：

10、Angular ngFor循環的使用:

11、AngularJS `ng-repeat` 循環使用：

12、Angular ng-if判斷使用：

13、this.router.navigateByUrl跳轉：

14、routerlink跳轉：

15、[angular]周遊Array的方法：for, forEach, every，some：

AngularJS 指令大全：

繼續閱讀

Angular實戰之使用NG-ZORRO建立一個企業級中背景架構（入門篇）

（已解決）'ng' 不是内部或外部指令，也不是可運作的程式或批處理檔案

Angular實戰之使用NG-ZORRO建立一個企業級中背景架構（進階篇）

Angular入門，開發環境搭建，使用Angular CLI建立你的第一個Angular項目

解決Cannot find module '@angular/compiler-cli'

Angular實戰之使用NG-ZORRO建立一個企業級中背景架構

【AngularJS】4.AngularJS $scope裡面的$apply方法和$watch方法

【錯誤處理】Angular報錯：ERROR in MessageDetailComponent is not an NgModule

【AngularJS】2.AngularJS依賴注入中代碼壓縮的問題

Angular學習資料大全和常用文法彙總（讓後端程式員輕松上手）

前言：

Angular簡介：

學習資料推薦：

Angular-GitHub倉庫位址：

Angualr官方文檔教程（推薦）：

AngularJS 文檔教程 | 菜鳥教程：

AngularJS 文檔教程 | W3Cschool：

Angular入門，開發環境搭建，使用Angular CLI建立你的第一個Angular項目：

Angular 學習資源清單：

Angular教程_Angular8 Angular9入門實戰視訊教程（推薦）：

AngularJS視訊教程_免費AngularJS教程線上學習-php中文網課程：

Angular實戰教程視訊：

Angular常用文法：

1、事件綁定 （）:

2、click 點選事件：

3、ng-hide/ng-show設定應用部分是否可見：

4、ngModelChange選擇改變事件：

5、input事件在使用者輸入時觸發：

6、屬性綁定 [ ] 文法：

7、[(ngModel)] ：雙向綁定：

8、插值文法 {{...}}：

9、Angular使用[InnerHtml]中正常顯示富文本内容：

10、Angular ngFor循環的使用:

11、AngularJS ng-repeat 循環使用：

12、Angular ng-if判斷使用：

13、this.router.navigateByUrl跳轉：

14、routerlink跳轉：

15、[angular]周遊Array的方法：for, forEach, every，some：

AngularJS 指令大全：

繼續閱讀

1、事件綁定（）:

`7、[(ngModel)]` ：雙向綁定：

8、插值文法 `{{...}}：`

11、AngularJS `ng-repeat` 循環使用：