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. 按下去等黑魔法跑完
Sign in with Wallet
Connect another wallet