Angular 網站實例 – 使用者服務篇

mkdir service
第二步：產生使用者服務

ng generate service user –module user
使用 –module user，angular-cli 會主動將這個服務加入模組成為 provider，這個服務是全域的服務，也就是所有的元件 (component) 都可以使用。

第三步：加入後端網址，在 src/app/share 下加入

ng generate class app.config
第四步：修改 app.config.ts

export class AppConfig {
public readonly apiUrl = ‘http://localhost:3000/api’;
}
第五步：加入 share 模組

// … 省略
import { AppConfig } from ‘./app.config’;

// … 省略
@NgModule({
// …
providers: [AppConfig]

})
第六步： share 模組加入 indext.ts

export * from ‘./share.module’;
export * from ‘./app.config’;
設定介面 (Interface)
我們來增加兩個介面：使用者跟後端回應的介面
第一步：先造一個目錄 src/app/models

mkdir models
第二步：用 angular-cli 產生使用者介面

ng generate interface user
第三步：修改 user.ts

export interface User {
username: string;
password?: string;
rememberMe?: boolean;
}
第四步：用 angular-cli 產生後端回應介面

ng generate interface response
第五步：修改 response.ts

export interface Response {
success: boolean;
payload?: any;
}
第六步：建立 index.ts 在 src/app/models 下，這樣在元件做 import 時，只要指到這個目錄即可
src/app/models/index.ts

export * from ‘./user’;
export * from ‘./response’;
加入 HttpClient 模組
在 src/app/user/user.module.ts 加入

//… 省略
import { HttpClientModule } from ‘@angular/common/http’;
// … 省略
@NgModule({
imports: [
CommonModule,
UserRoutingModule,
ShareModule,
HttpClientModule
],
declarations: [LoginComponent],
providers: [UserService]
})
export class UserModule { }
使用者服務
這個服務要提供：使用者登入狀態及使用者名稱，我們會用到 BehaviorSubject 這個 Observable 來做，因為這些狀態隨時會改變。 直接看程式

import { Injectable } from ‘@angular/core’;
import { HttpClient, HttpErrorResponse } from ‘@angular/common/http’;

import { AppConfig } from ‘../../share’;
import { User, Response } from ‘../../models’;

import { Observable } from ‘rxjs/Observable’;
import { BehaviorSubject } from ‘rxjs/BehaviorSubject’;
import ‘rxjs/add/operator/map’;
import { of } from ‘rxjs/observable/of’;

@Injectable()
export class UserService {
loginStatus = new BehaviorSubject<boolean>(false);
currentUser = new BehaviorSubject<User>(null);
constructor(
private http: HttpClient,
private appConfig: AppConfig
) { }

loginServer(loginData): Observable<Response> {
let username = loginData.username.trim();
let password = loginData.password.trim();
return this.http.post<Response>(this.appConfig.apiUrl + ‘/users/authenticate’, { username: username, password: password });
}
login(loginData): Observable<boolean> {
return this.loginServer(loginData)
.map((res: Response) => {
if (res.success) {
this.loginStatus.next(true);
this.currentUser.next(loginData.username);
return true;
} else {
console.log(‘can not login’);
return false;
}
},
(err: HttpErrorResponse) => {
if (err.error instanceof Error) {
console.log(‘client-side error’);
} else {
console.log(‘server-side error’);
}
return of(false);
})
}
logout() {
this.loginStatus.next(false);
this.currentUser.next(null);