程式設計師雜談 - 如何使用 MEAN： Angular CRUD

由 Ted Neward | 2017 年 5 月

Ted Neward 歡迎回來，MEANers。

上個月我探討了角度元件 — 模組、元件、服務和其他人 — 在準備如何建立這些元件的一些深入探勘 (msdn.com/magazine/mt795191)。

我們現在就開始將這些元件概念套用到更實際的項目。

命令列工具

元件的概念之前，沒有我想要提供一個快速筆記。有些讀者寄出我詢問 Git 專案是否唯一能開始使用角度的專案。它們以表示這是唯一能開始的概念在 dubiousness。因為它們也懷疑，則根本很難。使用 npm 封裝呼叫角度 cli 的角度會可以就地取得最起碼的結構。用法非常簡單︰安裝、執行產生器、回答一些問題，然後︰

npm install -g @angular/cli
ng new my-app
cd my-app
ng serve

這會在我應用程式子目錄中建立新的應用程式和 ng 提供會有效地 npm 開始，並開始執行的本機 Web 伺服器和 transpile 檔案是在編輯長時間執行程序的情況。

不論您使用，一種方法一定會得到與建構"hello world"應用程式。但是請記住，請參閱 < 嚴重撰寫您的專案開始時，該樣板大多會修改/取代。因此，您若要開始使用的實際路徑並不會長期造成太大影響。使用何種方法都更方便。

元件

思考如何結構視覺化應用程式時，傳統的 GUI 桌上型電腦、伺服器為基礎的 Web 應用程式或 SPA 應用程式 — 它有助於識別「組件」的可以根據應用程式。大部分的應用程式，例如，有差別的頁首或頁尾，通常是某種類型的功能表列或功能表結構，並更一般化內容區域。然後，在其中有較細項，視應用程式和構成網域實體的目標而定。一個這類的分析仍的傳統「主版詳細資料」 UI 方法以在使用者第一次瀏覽網域實體的大型概觀（通常是可搜尋）清單中選取一個，將移到該網域實體的詳細檢視。通常，可以透過某種類型的按鈕或切換，通常預設為啟動的唯讀檢視的唯讀及可編輯狀態之間翻轉詳細的檢視。

這個金鑰是考量元件︰方便界限哪裡？如果想要顯示讓討論演講者，並且讓使用者在應用程式提供項目的應用程式是他們的意見反應的元件是很明顯。（如同最撰寫的範例中，它們可以被。）幾個元件會執行寫入 — 因此做出很好的第一個步驟，由於所涉及的任何使用者輸入或可編輯的狀態，以及一些會有點複雜，因為它們可能會需要輸入和狀態變更的反應。所有元件的索引鍵是一致性的較高程度: 元件應該基本上是緊密地調整「整數」代表「 thing 」，該「 thing 」可能是任何內容。

首先我要定義該「 thing 」成為一個簡單的頁尾元件，將會顯示包含目前年份的著作權訊息。

著作權

現在，就能開始使用第一個元件。假設您有完全建構的專案（這表示您已被丟棄未上次 GreetingsComponent），要建立新的 UI 元件，以顯示應用程式的主頁面底部的頁尾。理想情況下，此元件應該會顯示「著作權 (c) （目前的年份）（公司）」頁面上，跨出現任何位置。假設是此元件的使用者會將其放置在頁面底部，但很有可能一些奇怪的 UI/UX 實際需要到下（也許是法律免責聲明？），因此我們不要它將會出現在頁面上任何強式猜測。

新元件的起點是建立它。雖然永遠是以手動方式建立檔案和目錄的選項，我喜歡的工具會為我執行重複的項目。因此我要借助角度 cli ng 工具，以及這次，請它為我產生元件︰

$ ng generate component footer
installing component
  create src/app/footer/footer.component.css
  create src/app/footer/footer.component.html
  create src/app/footer/footer.component.spec.ts
  create src/app/footer/footer.component.ts
  update src/app/app.module.ts

產生的檔案不是魔法，任何項目，您已了解他們︰頁尾目錄包含 FooterComponent 建構程式碼，並包含 TypeScript 原始程式檔、 CSS 和 HTML 檔案以供 UI、和。 spec.ts 專為測試此元件的檔案。它也已更新的應用程式的模組檔案（和，果然，如果您查看在該檔案，它已更新以包含頁尾檔案，然後匯入指示詞）。如果伺服器仍在執行，並可讓瀏覽器視窗開啟它，那麼就會有短暫的重繪閃動的 [載入...]，然後應用程式會顯示一次。（不會顯示因為沒有變更 UI，但重繪閃動是因為修改 app.module.ts 檔案重新載入應用程式）。因為這是最容易想像如何將想要使用特定的元件，讓我們開始 footer.component.html 檔案中的 HTML 範本。而且事實上，首先我們要如何使用它。

<h1>
  {{title}}
</h1>
<footer owner="Neward &amp; Associates, LLC" />

這可能表示 FooterComponent 程式碼，需要輸入的變數（如我在上個月的專欄中討論），然後也將會反映在 HTML (footer.component.html) 的內部 currentYear 變數︰

<p>Copyright (c) {{currentYear}} {{owner}}</p>

現在，剩下的就是填入 FooterComponent 本身 (footer.component.ts)，在變數中所示**[圖 1**。

[圖 1 CopyrightComponent

import { Component, Input, OnInit } from '@angular/core';
@Component({
  selector: 'footer',
  templateUrl: './footer.component.html',
  styleUrls: ['./footer.component.css']
})
export class FooterComponent implements OnInit {
  currentYear: string;
  @Input() owner: string;
  constructor() { }
  ngOnInit() {
    var d = new Date();
    this.currentYear = d.getFullYear().toString();
    console.log("Current year is ", this.currentYear);
  }
}

請注意，「選取器」中的值 @Component 裝飾項目預設為應用程式頁尾，尾相符合; HTML 使用量已變更這顯然是根據標記應該看起來美觀引數。（某些可能會想應用程式的前置詞，但我發現有些多餘）。無論您的喜好設定的選取器值將會定義使用其他元件，因此一致"style"將會移遠針對一段時間的多個混淆，而開發、偵錯和部署多個元件的 HTML 範本中使用的語法。

測試啊，測試

其中一項建構出談到偵錯，是。 spec.ts 檔案，定義一組基本的單元測試的元件，叫用 npm 測試或 ng 測試執行時執行的測試套件的一部分。(測試設備設為自動選取所有。引進 spec.ts 檔案，在應用程式子目錄中，因此它會挑選 FooterComponent 測試目前的總檔案。) 我們將不會太多細節（還），了解測試**[圖 2**顯示 FooterComponent 測試的外觀。

[圖 2 FooterComponent 測試

import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
import { DebugElement } from '@angular/core';

import { FooterComponent } from './footer.component';

describe('FooterComponent', () => {
  let component: FooterComponent;
  let fixture: ComponentFixture<FooterComponent>;
  let de: DebugElement;
  let el: HTMLElement;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ FooterComponent ]
    })
    .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(FooterComponent);
    component = fixture.componentInstance;
    de = fixture.debugElement.query(By.css('p'));

    component.owner = "ACME, Inc";
    fixture.detectChanges();

    el = de.nativeElement;
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });

  it('should know the current year', () => {
    const currentYear = "" + new Date().getFullYear();
    expect(component.currentYear).toEqual(currentYear);
  });

  it('should know the owner', () => {
    expect(component.owner).toEqual("ACME, Inc");
  });

  it('should render message in a p tag', async(() => {
    expect(el.textContent).toContain("Copyright (c)");
    expect(el.textContent).toContain(new Date().getFullYear().toString());
    expect(el.textContent).toContain("ACME, Inc");
  }));
});

要花了一些時間，在其他架構撰寫單元測試的讀者，這不算太完全無法解讀;wit:

描述建立單元測試組件，做為所有測試定義其中的執行範圍/內容增加一倍。它提供一個地方，例如，欄位做為一部分的每個測試的停止回應。(永遠不會嘗試使用這些測試跨; 永遠假設，並確定 —，欄位會重設之前和之後的每個測試。)
beforeEach，正如其名，是每個測試之前執行的程式碼區塊。
它會定義所組成的描述和（這當然是有問題的測試）的程式碼區塊執行的測試。
預期是 fluent 介面，定義一組的期望應保存，則為 true。如果沒有，測試會被視為已失敗。

瀏覽器視窗時執行（使用 npm 測試或 ng 測試），將會開啟，並指出傳遞本質 — 與否 — 受測程式碼。此程序，如果每次 transpiling 之後變更檔案時，在背景中，執行（由完成的 npm 伺服器或 ng 提供程序），測試將會自動執行一次，提供幾近即時反應在程式碼是否通過 muster。

在此情況下，兩個 beforeEach 區塊所執行的一些標準的現成指令設定，包括通常會出現的擁有者資料通過範本，並測試以確保擁有者已成功傳送中的資料，該 currentYear 已正確計算，和 < p > 標記，在範本中，進行轉譯時，會包含著作權訊息的適當部分。

然後，當然，瀏覽器視窗，其中包含整個應用程式也應該會顯示新的訊息。

總結

在某個時點期間逐步完成開啟的每個所謂角度開發人員之旅的 Angular，那里提供其中認知負擔似乎比優點; 太高的點「畢竟「他們可能無所不能，「我真正想要做的所有已著作權將訊息放在頁面底部！」這是其中 Angular、像許多環境中，一定為憑，在於似乎難的簡單方法。說，不全真 — 可以輕鬆地只拖放在原始 HTML 和靜態文字，而在 AppComponent 底部的頁尾，也會有變更下一個年度，然後一次當公司取得取得，且以後，當年度的日期變更，而之後的年份，依此類推。

建構一個元件的 act 永遠不會做為自由地掌握做的只「卸除一些 HTML 」拖曳到頁面動作。了解難題會有的時間，不過，應用程式縮放比例設定的複雜和開發人員被迫要記住每一頁的頁尾會出現。藉由在元件封裝頁尾，開發人員可以只使用它而不必擔心頁尾是如何決定哪些訊息將會顯示。與同樣地，如果某些稍後法律的情況需要更完整的訊息，例如包括授權模型，此頁面會提供給世界中，您可以變更它在其中一個 — 只有一個 —，因而，變更會以無訊息模式會波及整個系統的其餘部分而不需要手動介入。

沒有仍值得探索的內容。在此同時，祝各位寫程式！

Ted Neward是西雅圖 polytechnology 顧問、講師和良師，目前正在使用的開發人員關聯在主管為 Smartsheet.com。他已寫入超過 100 個文件、撰寫和與他人合著過十書籍和世界各地的運作方式。與他連絡 ted@tedneward.com 或閱讀他的部落格 blogs.tedneward.com。

由於閱本篇文章的下列技術專家︰ Ward Bell

Share via

程式設計師雜談 - 如何使用 MEAN： Angular CRUD

命令列工具

元件

著作權

測試啊，測試

總結

其他資源