前言：

　　首先為什麼要寫這樣的一篇文章呢？主要是因為前段時間寫過一些關於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>

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 指令大全：

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