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

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

巴特西

新建ng工程

最新文章

热门文章