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

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