Angular學習資料大全和常用語法匯總（讓後端程式設計師輕鬆上手）
前言：
首先為什麼要寫這樣的一篇文章呢？主要是因為前段時間寫過一些關於Angualr的相關實戰文章，有些愛學習的小夥伴對這方面比較感興趣，但是又不知道該怎麼入手（因為認識我的大多數小夥伴都是後端的同學），所以今天準備出一篇Angular學習資料匯總和日常開發中使用比較頻繁的語法。讓更多的後端程式設計師更好的了解學習Angualr，拓展自己的技術棧。
Angular簡介：
Angular 是一個應用設計框架與開發平台，用於創建高效、複雜、精緻的單頁面應用。
學習資料推薦：
Angular-GitHub倉庫地址：
Angualr官方文檔教程（推薦）：
對於我們而言無論是學習什麼技術，首先一點不要忽視了官網的重要性，而且Angular官網還有中文版的相對而言更容易上手。
AngularJS 文檔教程 | 菜鳥教程：
AngularJS 文檔教程 | W3Cschool：
Angular入門，開發環境搭建，使用Angular CLI創建你的第一個Angular項目：
Angular 學習資源清單：
Angular教程_Angular8 Angular9入門實戰影片教程（推薦）：
對於一些初學者而言，假如不知道該怎麼做的話最好推薦先看看影片，熟悉一下Angualr的開發的基本流程。
//www.bilibili.com/video/BV1bt411e71b?from=search&seid=14846265447217622438
AngularJS影片教程_免費AngularJS教程在線學習-php中文網課程：
Angular實戰教程影片：
//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 { }
8、插值語法 {{...}}：
花括弧之間的文本通常是組件屬性的名字。Angular 會把這個名字替換為響應組件屬性的字元串值。
<p>{{title}}</p>
<div><img src="{{itemImageUrl}}"></div>
9、Angular使用[InnerHtml]中正常顯示富文本內容：
<div class="text" [innerHTML]="richText"></div>
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>
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>
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>
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 元素的值 |
