Angular 8 快速開發(fā)

1. 項目結(jié)構(gòu)簡述

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

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

2.1創(chuàng)建

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

有一些默認屬性需要注意。

默認新建的組件涨椒、服務(wù)摊鸡、守衛(wèi)...都會放在 src/app 目錄下，為了演示蚕冬，我們把所有的操作都放在一個叫做 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 個創(chuàng)建 1 個更新囤热。

4 個創(chuàng)建分別是 樣式文件猎提、 html文件、spec.ts測試文件旁蔼、.ts文件锨苏。

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

需要注意的是伞租，任何新建的組件想要在當(dāng)前 module 中被使用，都必須在當(dāng)前 module 中引入限佩。這個在操作多個 module 時葵诈，會有體會。

2.2 修改

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

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

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

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

這個標(biāo)簽就是我們新建的 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. 創(chuàng)建一個 service

3.1 創(chuàng)建

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

我們在 hello-world 文件夾創(chuàng)建了一個 hello world 組件的 service砖顷。

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

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

3.2 說明

我們來做一個多語言的 hello world 列表所森，數(shù)據(jù)由 service 提供囱持，由 component 展示，也順便做一個插入新的 hello world 到 service 中的 hello world 列表的業(yè)務(wù)焕济。

service

service 需要一個 string[]纷妆，存放 hello world

component

component 需要使用 ngFor 渲染 hello world
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>

需要注意的是，這里使用了 雙向綁定 如果這里報錯

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 請求數(shù)據(jù)

4.1 說明

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

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