目錄

1. 項(xiàng)目結(jié)構(gòu)簡(jiǎn)述。
2. 創(chuàng)建一個(gè) component。
3. 創(chuàng)建一個(gè) service。
4. http 請(qǐng)求數(shù)據(jù)。
5. 附 GitHub 源碼

1. 項(xiàng)目結(jié)構(gòu)簡(jiǎn)述

.
├── angular.json
├── e2e
├── node_modules
├── package.json
├── src
└── tsconfig.json
angular.json 是 ng 8 的配置文件。
src 幾乎我們所有的代碼相關(guān)操作都在這個(gè)里面
e2e 測(cè)試使用 其他的一般不會(huì)用到

2. 創(chuàng)建一個(gè) component

2.1創(chuàng)建

創(chuàng)建一個(gè)組件的基本命令 ng g c 組件名。

在終端輸入命令（目錄在項(xiàng)目根目錄即可）

有一些默認(rèn)屬性需要注意。

默認(rèn)新建的組件、服務(wù)、守衛(wèi)...都會(huì)放在 src/app 目錄下，為了演示，我們把所有的操作都放在一個(gè)叫做 first-app 的目錄下吧。

ng g c first-app/helloWorld

目錄不用提前創(chuàng)建

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 個(gè)創(chuàng)建 1 個(gè)更新。

4 個(gè)創(chuàng)建分別是 樣式文件、 html文件、spec.ts測(cè)試文件、.ts文件。

1 個(gè)更新是在當(dāng)前 module 自動(dòng)引入了我們新建的組件，可以打開(kāi) app.module.ts 查看。

需要注意的是，任何新建的組件想要在當(dāng)前 module 中被使用，都必須在當(dāng)前 module 中引入。這個(gè)在操作多個(gè) module 時(shí)，會(huì)有體會(huì)。

2.2 修改

2.2.1 在殼組件中添加 hello-world 組件

關(guān)于 app.component 組件
app.component 組件即殼組件，他是應(yīng)用程序執(zhí)行后默認(rèn)加載組件。
殼組件同樣默認(rèn)由 4 個(gè)文件組成。

將如下內(nèi)容寫入 app.component.html 中：

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

這個(gè)標(biāo)簽就是我們新建的 hello world 組件，名字是從 hello-world.component.ts 文件的 @Component 裝飾器的 selector 選擇器的值中獲取的。app- 是 cli 默認(rèn)添加的前綴

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

2.2.2 修改 hello-world 組件

<h3>你好世界</h3>

2.2.3 查看效果

ng s -o

我這里就不貼圖了。

3. 創(chuàng)建一個(gè) service

3.1 創(chuàng)建

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

我們?cè)?hello-world 文件夾創(chuàng)建了一個(gè) hello world 組件的 service。

當(dāng)然，這只是我們主觀意識(shí)上的 component 與 service 的關(guān)系，實(shí)際上他們目前只能算是住在同一個(gè)屋子里的兩個(gè)互相不認(rèn)識(shí)的人，妙的是碰巧倆人都姓 hello-world。

關(guān)于 service
service 目前可以大致理解為處理業(yè)務(wù)的腳本文件。他們通常帶有可注入裝飾器（@Injectable()）并以注入的形式被使用。
component 和 service 都是 class，只是通過(guò)不同的裝飾器獲得了不同的表現(xiàn)。

3.2 說(shuō)明

我們來(lái)做一個(gè)多語(yǔ)言的 hello world 列表，數(shù)據(jù)由 service 提供，由 component 展示，也順便做一個(gè)插入新的 hello world 到 service 中的 hello world 列表的業(yè)務(wù)。

service

1. service 需要一個(gè) 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() {}

  /**
   * 初始化數(shù)據(jù)
   */
  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>

需要注意的是，這里使用了 雙向綁定 如果這里報(bào)錯(cuò)

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, ...],
...

至此，就可以正常運(yùn)行了。
如果你的 ng s 仍在運(yùn)行，刷新頁(yè)面即可。

4. http 請(qǐng)求數(shù)據(jù)

4.1 說(shuō)明

目前我們的數(shù)據(jù)是從 service.init 中裝載的，現(xiàn)在我們要把他修改為從外部獲取數(shù)據(jù)。
由于目前沒(méi)有 api 可用（你也可以自己寫一個(gè)來(lái)實(shí)際嘗試），因此我們采用請(qǐng)求 json 文件的形式來(lái)獲取數(shù)據(jù)。當(dāng)然其效果是相同的。

4.2 新建 json 文件

在 src/assets 目錄下，新建一個(gè) 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) {}

  /**
   * 初始化數(shù)據(jù)
   */
  public init(): void {
    this._http.get(this.url).subscribe((data: { helloWorlds: string[] }) => {
      this.helloWorlds = data.helloWorlds;
    });
  }
}

4.5 查看效果

至此
新建 component、新建 service、HttpClient Restfull 獲取數(shù)據(jù)，都已經(jīng)有涉及到了，也提到了一點(diǎn)雙向綁定，代碼可能會(huì)有不合理的地方，歡迎大家來(lái)指正，也希望能幫到看過(guò)此篇的童鞋。

5. GitHub

項(xiàng)目源碼