新建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里

其实倒未必有多解耦，只是撸得相对无脑，肯定不如函数式精炼。