---
# System prepended metadata

title: Angular JS
tags: [全端, 筆記, JS, Angular]

---

Angular JS
===
###### tags: `JS` `筆記` `Angular` `全端`

# Angular CLI

## ng new demo
**參數:**
```
[--routing]
```

會創造一個名為 `demo` 的資料夾, 這就是我們新增的專案
- routing
  Angular CLI 會新增 app-routing.module.ts 檔案

## ng serve
**參數:**
``` 
[--port (number)] ...
```

預設在 localhost 的 4200 port 開啟伺服器

## ne generate
**參數:**
```
((component | service | module | pipe ...) (name))
```

快速創造元件

# NPM (Node Package Manager)

## npm start
會 run `package.json` 其中的 `scripts` 屬性的 `start` 裡面所寫的指令

# Directives

> Angular 的指令分為三大種

## Component Directives

- ng-container
  - html code 中不會出現此 tag
    - 但裡面的內容一開始就會顯示

- ng-template
  - html code 中不會出現此 tag
    - 但裡面的內容一開始不會出現

## Attribute Directives

### Binding

#### Pre-Configuration
- app.module.ts
```typescript=
import { FormsModule } from '@angular/forms';

...

import: [
    ...
    FormsModule
]

...
```

#### Interpolation (內嵌)

```htmlmixed=
<a>{{ count }}</a>
```

#### Property Binding

```htmlmixed=
<a [title]="property"></a>
<a title="{{ property }}"></a>

<a [ngClass]="{property: expression}"></a>
<a [ngStyle]="{'font-size': count*10 + 'px'}"></a>
<a [ngStyle]="{'font-size.px': count*10}"></a>
```

#### Event Binding

```htmlmixed=
<button (click)="function()"></button>
```

#### Two-way Binding

```htmlmixed=
<input [(ngModel)]="text">
```


## Structual Directives

> 這種指令會透過新增或刪除 DOM 元素來變更 DOM 結構

### ngIf

```htmlmixed=
<p *ngIf="flag; else myTag">Yes!</p>
<ng-template #myTag>
    <p>No...</p>
</ng-template>
```

### ngFor

```htmlmixed=
<div *ngFor="let item of array; let i = index; let f = first; let l = last; let o = odd; let e = even">
    <div *ngIf="o">
        <h1>{{ i + ' ' + item.title }}</h1>
        <p>{{ item.content }}</p>
    </div>
</div>
```

### ngSwitch

```htmlmixed=
<div [ngSwitch]="shadow">
    <div *ngSwitchCase="0">Zeroooo</div>
    <div *ngSwitchCase="1">One?!</div>
    <div *ngSwitchDefault>Default, Yeah</div>
</div>
```

# Pipes

```htmlembedded=
{{ My | First | Pipe }}
```

## Custom Pipes

### meow.pipe.ts
```typescript=
import { Pipe, PipeTransform } from '@angular/core';

@Pipe({name: 'meow'})
export class MeowPipe implements PipeTransform {
  transform(value: string): string {
    let result = '';
    for (let i of value) {
      result += i;
      result += '喵';
    }

    return result;
  }
}
```

```typescript=
@Pipe({name: 'meow'})
```
Pipe 的名稱

```typescript
transform(value: string): string{
...
}
```
value 就是 Pipe 的 Input, 並會輸出 string

### app.module.ts
```typescript=
import { MeowPipe } from './meow.pipe';

...

@NgModule({
  declarations: [
    ...
    MeowPipe
  ],
  
...

```

# With Jquery
1. 先下載 Jquery
    ```shell
    npm install jquery --save
    ```

2. 更改 Angular.json
    有用到的 script 都要放進來
    - angular.json
    ```json=
    {
        ...
        "projects": {
            ...
            "architect": {
                ...
                "build": {
                    ...
                    "scripts": {
                        // Put scripts here
                        "node_modules/jquery/dist/jquery.min.js"
                    }
                }
            }
        }
    }
    ```

3. 對需要使用 Jquery 語法的元件做一些更改
    html 不需要動, 主要是 .ts 需要更改
    - example.component.ts
    ```typescript=
    import { Component, OnInit, ElementRef } from '@angular/core';

    ...
    export class SliderWrapComponent implements OnInit {

      constructor(
        private elementRef: ElementRef
      ) { }

      ngOnInit() {
      }

    // 使用 Jquery 時，沒用 angular 的情況下
    // 只要直接在有使用 Jquery 語法的 html 碼後引用 script 即可
    // 但是在有用 angular 的情況下不能這樣用
    // 要在 ngAfterViewInit() 產生 script tag
      ngAfterViewInit() {
        const jquery1 = document.createElement('script');
        jquery1.type = 'text/javascript';
        
        // 這個連結是要用使用者輸入 URL 的角度，而不是在檔案系統中的相對位置
        jquery1.src = 'assets/js/rs-plugin/js/jquery.themepunch.plugins.min.js';
        this.elementRef.nativeElement.appendChild(jquery1);
      }
    }
    ```
# API
## import module
import { HttpClientModule } from '@angular/common/http';
@NgModule({
  declarations: [
    AppComponent,
    HeaderComponent,
    TestComponent,
    MeowPipe,
    MeowItemComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})

## Data Service
在 constructor 注入 HttpClient 類別的物件 httpClient
```
constructor(private httpClient: HttpClient)
{}
```

**Chrome 套件**
- CORS

## Interface
為 json 裡的物件創一個 Interface
```shell
ng g i InterfaceName
```

**VS code 套件**
- Json to TS
  - 使用方式:
    1. F1
    2. 打 'Json to TS' 
    3. 複製要轉的Json
    4. 開啟 interface.ts
    5. 按下去等黑魔法跑完
