Angular Basic

官方文件: https://angular.io/guide/setup-local

1	npm install -g @angular/cli

1	ng new account-manager

從AngularJS到Angular

https://angular.io/guide/ajs-quick-reference

Angular 詞彙表 https://angular.tw/guide/glossary

設定Routing

./src/app/app-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { Component1 } from './component1/component1.component';
import { Component2 } from './component2/component2.component';

const routes: Routes = [
  { path: '', component: Component1 },
  { path: 'component2', component: Component2 },
  { path: '**', redirectTo: '/', pathMatch: 'full' },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

其中的const routes就是用來自訂網址導向哪個component的設定

const routes: Routes = [
  { path: '', component: Component1 },
  { path: 'component2', component: Component2 },
  { path: '**', redirectTo: '/', pathMatch: 'full' },
];

./src/app/app.component.html

1	<router-outlet></router-outlet>

使用HTTPClient

1	import { HttpClient } from '@angular/common/http';

export class Component2 implements OnInit {
	
    constructor(private http: HttpClient) {}    

    get_data = function():void{
        this.http
            .get("http://localhost:3000/data", 
                 {observe:'body', responseType: 'json'})
            .subscribe((data)=>{
            this.data = data;
           
            // console.log(this.data)
        })
    }

}

設定伺服器導回根目錄

問題: 當build後用http-server或live-server卻無法開啟 /component2 之類的網址?

解答:

用http-server或live-server開啟 /index.html 是沒問題的，但是當它找不到 /component2/index.html 時，就會報錯。因此要設定在找不到時，回到根目錄找尋/index.html。

在官方文件中也有提到，Routed apps must fallback to index.html。

https://angular.io/guide/deployment#routed-apps-must-fallback-to-indexhtml

以live-server為例，在cmd中加入 --entry-fire=./index.html

1	live-server --entry-file=./index.html

或是安裝angular-http-server，然後在cmd中指定其根目錄

1	angular-http-server --path ./dist

控制build部署時的URL

問題: 當build且deploy至有handler的伺服器時找不到main.js?

解答:

例如，輸出的資料夾為 /dist，則 /dist/index.html 所預設的是在同一資料夾裡的 /dist/main.js，連結則為 main.js。當handler想要避免把檔案都塞在根目錄下，而是放在 /SOMEWHERE/ 下時，要如何將路徑從main.js修改為/SOMEWHERE/main.js呢?

答案是，在ng build後方加上參數 --deploy-url=/SOMEWHERE/。

更多參數: https://angular.io/cli/build

使用RxJS設定Loading的計時器

問題: 如何用RxJS來設定Loading圖示的計時器?

解答:

首先，引入rxjs的 Subject，以及將會使用到的operator: debounceTime及 tap

1 2	import { Subject } from 'rxjs'; import { debounceTime, tap } from 'rxjs/operators';

Subject是一種可以被多方監聽的Observable。

A Subject is like an Observable, but can multicast to many Observers. Subjects are like EventEmitters: they maintain a registry of many listeners.

https://rxjs-dev.firebaseapp.com/guide/subject

首先，建立一個Subject的實例，把它叫做is_editing_xxx$。請注意結尾是用 $ 來提示這是一個Subject。

我們在ngOnInit中呼叫這個Subject，讓它執行一個pipe，其中先啟動Loading圖示，經過1000毫秒後，關閉Loading圖示。然後我們訂閱這個Subject。

接著，在需要使用這個Subject的地方，例如click_sth中，我們寫下 this.is_editing_xxx$.next()，就會讓它執行下一步。

is_editing_xxx$ = new Subject<string>();

ngOnInit(){
    this.is_editing_xxx$.pipe(
        tap(() => { this.loading_userconfig = true; }),
        debounceTime(1000),
        tap(() => {
            this.loading_userconfig = false;
        })
    ).subscribe();
    
}

click_sth(){
    this.is_editing_xxx$.next();
}

另一種寫法是創造一個變數 is_editing_xxx，注意，這個變數的結尾沒有$的符號，如此一來，我們不需要在ngOnInit中，就可以設定 is_editing_xxx$ 的pipe和訂閱它。

is_editing_xxx$ = new Subject<string>();

is_editing_xxx = this.is_editing_xxx$
    .pipe(
        tap(() => { this.loading_userconfig = true; }),
        debounceTime(1000),
        tap(() => {
            this.loading_userconfig = false;
        }))
    .subscribe();

ngOnInit(){     
}

click_sth(){
    this.is_editing_xxx$.next();
}