新建ng工程

有問題多看官網文檔https://www.angular.cn/guide/quickstart

 

1 在遠程倉庫創建 1個徹底空的倉庫，不要創建readme.MD  ng cli建立時會建立readme.MD

   在本地上級路徑(好比~/dev)啓動控制檯  git clone .... 出現子文件夾，

2 新建angular工程  工程名 XXX就是上面git同名文件夾名

ng new XXX 
cd ./XXX

會建立一堆東西，vscode下XXX下新建這麼多東西。

新的ng7/8 直接把路由模塊app-routing.module.ts給建立好了，比文檔裏講的還方便。包括在app.component.html下連

<router-outlet></router-outlet>都添加好了

全家桶就是這麼霸氣 233

3 新建組件 

ng g component YYY

會在XXX/src/app下建立組件YYY文件夾以及各類文件 而後app.modules 等裏註冊這個YYY組件。

  比本身手工建立組件太方便多了

 4新建服務

ng g service XXX

任何邏輯代碼 包括純函數,web訪問  等等,都要封裝成service

好比,讀取本地json

1新建1個服務

2在app.module.ts裏

import { HttpClientModule } from '@angular/common/http'; imports: [ BrowserModule,  HttpClientModule, AppRoutingModule ],

在服務構造函數裏傳入 

 constructor(private http: HttpClient) { }

爲何呢?由於

3 要在服務裏搞1個方法(get), 在get方法裏要用httpClient  而返回值封成observable

import { Injectable } from '@angular/core'; import { HttpClient, HttpHeaders } from '@angular/common/http'; import { Observable, of } from 'rxjs'; @Injectable({ providedIn: 'root' }) export class XXXService { private url = 'api/heroes';  // URL to web api
 constructor(private http: HttpClient) { }  get(): Observable<any> { return this.http.get("./assets/mock_data.json"); } }

最後，在1個組件裏使用這個服務，也要添加兩行

import { XXXService } from '../xxx.service';

.... constructor(private xxxService: XXXService) { }
....

 

 

確實，ng相似java, 不少廢話，必定要把一個簡單的動詞(get)封裝到1個名詞上（XXXService）.

這種強制一切都是對象的，過分OOP，確實有點煩人。

可是，ng是全家桶的框架，意義在於：當前端不是個人核心域的時候，我不會爲了得到90%的爽，而被10%的不爽卡死。去精細定製router 狀態管理等等等各類東西

爲此，寧肯稍微容忍這種不爽。 反正業務代碼都在service裏

其實倒未必有多解耦，只是擼得相對無腦，確定不如函數式精煉。