目录

1. 项目结构简述。
2. 创建一个 component。
3. 创建一个 service。
4. http 请求数据。
5. 附 GitHub 源码

1. 项目结构简述

.
├── angular.json
├── e2e
├── node_modules
├── package.json
├── src
└── tsconfig.json
angular.json 是 ng 8 的配置文件。
src 几乎我们所有的代码相关操作都在这个里面
e2e 测试使用 其他的一般不会用到

2. 创建一个 component

2.1创建

创建一个组件的基本命令 ng g c 组件名。

在终端输入命令（目录在项目根目录即可）

有一些默认属性需要注意。

默认新建的组件、服务、守卫...都会放在 src/app 目录下，为了演示，我们把所有的操作都放在一个叫做 first-app 的目录下吧。

ng g c first-app/helloWorld

目录不用提前创建

robinu@bey-pc:~/workspace/ng.apps/garden-sunflower$ ng g c first-app/helloWorld
CREATE src/app/first-app/hello-world/hello-world.component.sass (0 bytes)
CREATE src/app/first-app/hello-world/hello-world.component.html (30 bytes)
CREATE src/app/first-app/hello-world/hello-world.component.spec.ts (657 bytes)
CREATE src/app/first-app/hello-world/hello-world.component.ts (289 bytes)
UPDATE src/app/app.module.ts (699 bytes)

好了。
├── first-app
│ └── hello-world
│ ├── hello-world.component.html
│ ├── hello-world.component.sass
│ ├── hello-world.component.spec.ts
│ └── hello-world.component.ts
4 个创建 1 个更新。

4 个创建分别是 样式文件、 html文件、spec.ts测试文件、.ts文件。

1 个更新是在当前 module 自动引入了我们新建的组件，可以打开 app.module.ts 查看。

需要注意的是，任何新建的组件想要在当前 module 中被使用，都必须在当前 module 中引入。这个在操作多个 module 时，会有体会。

2.2 修改

2.2.1 在壳组件中添加 hello-world 组件

关于 app.component 组件
app.component 组件即壳组件，他是应用程序执行后默认加载组件。
壳组件同样默认由 4 个文件组成。

将如下内容写入 app.component.html 中：

<app-hello-world></app-hello-world>

这个标签就是我们新建的 hello world 组件，名字是从 hello-world.component.ts 文件的 @Component 装饰器的 selector 选择器的值中获取的。app- 是 cli 默认添加的前缀

@Component({
  selector: 'app-hello-world',

2.2.2 修改 hello-world 组件

<h3>你好世界</h3>

2.2.3 查看效果

ng s -o

我这里就不贴图了。

3. 创建一个 service

3.1 创建

ng g s first-app/hello-world/helloWorld

我们在 hello-world 文件夹创建了一个 hello world 组件的 service。

当然，这只是我们主观意识上的 component 与 service 的关系，实际上他们目前只能算是住在同一个屋子里的两个互相不认识的人，妙的是碰巧俩人都姓 hello-world。

关于 service
service 目前可以大致理解为处理业务的脚本文件。他们通常带有可注入装饰器（@Injectable()）并以注入的形式被使用。
component 和 service 都是 class，只是通过不同的装饰器获得了不同的表现。

3.2 说明

我们来做一个多语言的 hello world 列表，数据由 service 提供，由 component 展示，也顺便做一个插入新的 hello world 到 service 中的 hello world 列表的业务。

service

1. service 需要一个 string[]，存放 hello world

component

1. component 需要使用 ngFor 渲染 hello world
2. component 需要提供 添加 hello world 的方式

3.3 修改 service

hello-world.service.ts

import { Injectable } from "@angular/core";

@Injectable({
  providedIn: "root"
})
export class HelloWorldService {
  /**
   * hello world 列表
   */
  public helloWorlds: string[] = [];

  constructor() {}

  /**
   * 初始化数据
   */
  public init(): void {
    this.helloWorlds = ["你好世界", "مرحبا بالعالم", "Salut tout le monde"];
  }
}

3.4 修改 component

hello-world.component.ts

import { Component, OnInit } from "@angular/core";
import { HelloWorldService } from "./hello-world.service";

@Component({
  selector: "app-hello-world",
  templateUrl: "./hello-world.component.html",
  styleUrls: ["./hello-world.component.sass"]
})
export class HelloWorldComponent implements OnInit {
  public hd: string = "";
  constructor(public hwS: HelloWorldService) {}

  ngOnInit() {
    this.hwS.init();
  }

  public append(): void {
    if (this.hd.trim() === "") return;
    this.hwS.helloWorlds.push(this.hd);
    this.hd = "";
  }
}

hello-world.component.html

<ul>
  <li *ngFor="let item of hwS.helloWorlds">
    {{item}}
  </li>
</ul>

<input type="text" [(ngModel)]="hd">
<button (click)="append()">添加</button>

需要注意的是，这里使用了 双向绑定 如果这里报错

Can't bind to 'ngModel' since it isn't a known property of 'input'

那就需要在 app.module.ts 中引入 FormsModule

...
import { FormsModule } from "@angular/forms";
...
imports: [..., FormsModule, ...],
...

至此，就可以正常运行了。
如果你的 ng s 仍在运行，刷新页面即可。

4. http 请求数据

4.1 说明

目前我们的数据是从 service.init 中装载的，现在我们要把他修改为从外部获取数据。
由于目前没有 api 可用（你也可以自己写一个来实际尝试），因此我们采用请求 json 文件的形式来获取数据。当然其效果是相同的。

4.2 新建 json 文件

在 src/assets 目录下，新建一个 datasource.json 文件。

{
  "helloWorlds": [
    "你好世界",
    "Hello World"
  ]
}

4.3 引入 HttpClientModule

app.module.ts

import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";
import { FormsModule } from "@angular/forms";

import { HttpClientModule } from "@angular/common/http"; /** here */

import { AppRoutingModule } from "./app-routing.module";
import { AppComponent } from "./app.component";
import { PlanComponent } from "./plan/plan.component";
import { SearchBarComponent } from "./search-bar/search-bar.component";
import { HelloWorldComponent } from "./first-app/hello-world/hello-world.component";

@NgModule({
  declarations: [
    AppComponent,
    PlanComponent,
    SearchBarComponent,
    HelloWorldComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    AppRoutingModule,
    HttpClientModule /** here */
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

4.4 修改 service

hello-world.service.ts

import { Injectable } from "@angular/core";
import { HttpClient } from "@angular/common/http";

@Injectable({
  providedIn: "root"
})
export class HelloWorldService {
  /**
   * hello world 列表
   */
  public helloWorlds: string[] = [];
  readonly url = "assets/datasource.json";

  constructor(private _http: HttpClient) {}

  /**
   * 初始化数据
   */
  public init(): void {
    this._http.get(this.url).subscribe((data: { helloWorlds: string[] }) => {
      this.helloWorlds = data.helloWorlds;
    });
  }
}

4.5 查看效果

至此
新建 component、新建 service、HttpClient Restfull 获取数据，都已经有涉及到了，也提到了一点双向绑定，代码可能会有不合理的地方，欢迎大家来指正，也希望能帮到看过此篇的童鞋。

5. GitHub

项目源码