共用方式為

  • 發行項

2017 年 2 月

第 32 卷，第 2 期

本文章是由機器翻譯。

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

由Ted Neward | 2017 年 2 月

Ted Neward歡迎回來，MEANers。為所述的上個月，就可以開始使用 MEAN 堆疊，這表示一頭栽進 Angular 的前端。在撰寫本文時 （以及可能接下來幾年），其中會提供問題 — Angular 的身分識別問題的位元。角度已多年被裝訂位置的單一頁面應用程式的世界。不過，如 Angular 開發，它成長到不同的架構開發架構，而後如此一來，「 現代化 」 Angular 變成 Angular 具有的回溯相容。

大部分的開發人員剩下棘手的問題︰ 若要使用哪個版本？

雖然絕對沒有所謂一體適用問題的答案，，只有少數例外，較新版本最後 wins 顯示歷程記錄。這會導致基本法則︰ 如果您剛開始處理專案 （所謂 「 綠地 」 專案），而且沒有任何現有的程式碼，以維護或擴充，然後使用架構的最新且最大的穩定版本。因為我的應用程式 （小喇叭分級入口網站，我已經使用篇周圍） 絕對是 greenfield，就表示此資料行系列的網頁中，類別下我將使用原始產品最新版本的 Angular 和角度 1 的角度 2。

是，決定可能輕易地已經其他方法。幸運的是，網際網路保存數十個很好的角度教學課程 （和良好上不對，老兄，如果您選擇將所有這些角度 1 教學課程作者保持快樂的角度 1）。不過，會收到警告該 「 移轉 」 角度 1 應用程式的完整比較 Angular 2 所示重寫，因此請務必採取，考慮在將來計劃。

同時，我們來探索一些 Angular 2。

入門

使用任何新技術的第一個步驟是為它撰寫無所不在"Hello World"。兩個有趣的事情浮現時立即，尋找要 Angular 2 帶有太遠進入處理程序之前所討論的"Hello World"應用程式時。

首先，像是 Angular Web 架構，安裝程序通常幾乎非常輕量級 （相較於安裝新的程式設計語言的 Ide，資料庫等等），因為直接從 CDN，或從主機伺服器，在實際的程式庫本身可以擷取的大部分的情況。對於大多數的開發工作，最好是讓程式庫執行關閉本機檔案系統，但因為這是預設的方式開始角度 2，這是我要採用的路徑。

第二，角度 2 選擇其首次引進透過 Git 儲存機制 — 換句話說，預設的 「 開始 」 方法是複製現有 Git 儲存機制 github，而不是 IDE 裝載 「 專案範本] 即可。 這是一種方法，才能使用其他語言與其他架構的資料流正在啟動。它有不同的優點是容易理解，只是一般維護和 (或許是最重要) 很容易延伸為包括沒有原始範本的其他功能 （結構、 內容等）。

因此，假設您的電腦 （它應該已在這一系列步驟一路做下來的讀者） 上有安裝 Node.js，開始角度 2 「 快速入門 」 專案是 Git 要求︰

git clone https://github.com/angular/quickstart.git hello

假設這會連接到 GitHub，並順利複製專案，有大量的檔案現在，請將"hello"子目錄中。有更多，事實上，比似乎一定是簡單"Hello World"應用程式，然後角度小組一樣多。在儲存機制的讀我檔案，它們特別聲明他們正在配置數目來提升一些好的習慣從一開始，例如單位，以及端對端 (e2e) 測試的前端程式碼的其他檔案。

檢查的稍後會出現。現在，透過目錄一眼就會顯示兩件事，應該很熟悉 MEANers: package.json （npm 資訊清單檔案） 和 tsconfig.json （TypeScript 組態檔） 突顯立即。回想一下，當提取出原始檔控制的 Node.js 專案的標準作法是開機帶到相依性將、 因此再進行其他動作，提取 [相依性和提供給這個專案喚醒呼叫，藉由執行下列命令，然後瀏覽至連接埠 3000 在瀏覽器 （事實上，指令碼會開啟通常其中一個為您本機的 HTTP 伺服器正在執行該連接埠一旦。）:

npm install

npm start

中所示，焉的 Web 架構暖問候語**[圖 1**。

Hello 角度 2 Web 架構
[圖 1 Hello 角度 2 Web 架構

在和本身，最好是一律知道的一切都正常運作，但程式設計人員想要查看程式碼。回到執行 HTTP 伺服器的命令列殼層，然後按 Ctrl + C 來關閉所有項目。（或者，開啟同一個目錄的第二個命令列殼層，兩者中較容易）。

我們來看，我們應該嗎？

嗨，程式碼

當然，首先您可以查詢來尋找 Angular 2 應用程式中的程式碼 index.html 檔案，但這其實會更令人困惑，而無法協助現在;目前為止，讓我們維持原狀，並挖掘周圍其他位置。

角度小組會第一個承認快速入門的目錄結構不設計為如何組織程式碼中，此規範性指南，但 Angular 2 的所有應用程式通常會有某種形式的 「 來源 」 所在的目錄中應用程式關閉主專案的根目錄。（這更方便包裝沒有納入各種開發人員專用的檔案，例如 package.json。） 在 Quickstart 中，這個目錄稱為 「 應用程式 」，其中包含三個檔案︰ main.ts 和 related—app.component.ts 和 app.module.ts 仔細看起來的兩個檔案。(注意 TypeScript transpiler 會修改這些檔案在原地，，因此目錄可能包含不只是這些檔案，但是會更明顯，它們所有相關聯 — 比方說，main.ts 會產生 main.js 和 main.js.map)。首先，main.ts，明確說明其用途是 — 是 Angular 2 應用程式的主要進入點，但其他兩個都有點較少。不過，讓我們看看這三個。

進入點︰ Main.ts

稍微隱密一開始是 main.ts 內容︰

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';
platformBrowserDynamic().bootstrapModule(AppModule);

這是不完全清除。不過，我們來看它拼湊各個部分。您知道我中最後一個資料行的另一個檔案，「 匯入 」 陳述式會提取符號中的 TypeScript 和您所見，它會從匯入符號兩個不同的地方。PlatformBrowserDynamic，第一個來自某處角度的程式庫，所以這是可能標準的現成指令開機帶 Angular 2 環境和程式庫。（最後一行肯定對於這。） 第二個，不過，匯入從本機檔案，app.module，疑似聽起來就像是它應該包含您的程式碼。

大多數的情況下，main.ts 維持不變的任何項目相關的應用程式至少住在模組檔案 (app.module.ts)，角度 2 開發過程中，但永遠是有助於您了解內容。（雖然不建議在此時，如果您遵循從 index.html 的軌跡，就可以找到 main.js 取得透過 System.js 模組載入器機制載入的位置。） 這表示，然後在 app.module 動作函式進行和其關聯的大部分。

應用程式的模組︰ App.module.ts

其前身，像是 Angular 2 關心許多模組化成可管理的位元組大小區塊的應用程式程式碼，這樣做，是將整個應用程式項目放入單一位置，說話的角度 2 中的第一個步驟是模組。因此，此檔案將會納入幾個角度 2 概念，再於宣告應用程式模組，接著使用和︰

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent }  from './app.component';
@NgModule({
  imports:      [ BrowserModule ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

同樣地，目前為止，這主要是所有的 import 陳述式︰ 首先，納入一些 Angular 2 相關的文件 （NgModule 和 BrowserModule），然後匯入應用程式元件，我將介紹每秒。但是請注意，NgModule 是 （如上一篇專欄中討論） TypeScript 裝飾項目 — 基本上，這是什麼讓角度 2 具有預期同時並可讓開發人員會使用架構，以便保持專注於應用程式特定功能的應用程式特定類別 （也就此處所謂 AppModule） 上的所有功能。

它是了解 Angular 2 會隔離到模組和元件的程式碼和功能的增強式態勢實際上相當重要。這將會重複不斷地在 Angular 2 中，而角度 1 可以考慮增加或減少不以任何方式排列程式碼中，開發人員選擇 （或，多半選擇不完全組織） 佈景主題。Angular 2 中的程式庫會迫使開發人員立即面對組織配置。Angular 2 可讓您選擇您的模組和元件的大小，但是您必須將它們組織成模組和元件，所以了完全視資料粒度。這只是 「 角度方法，」，您必須遵循的程序。

NgModule 裝飾項目會提供有關此模組，包括哪些它相依於哪些宣告的模組匯出 （其中您會看到用於第二個） 的中繼資料以及哪些啟動需要進行。NgModule 有數個選項可以在這裡，傳遞，且當 Angular 2 應用程式越來越複雜，這些清單也會成長。書籤一些放置您將會回到這裡通常此檔案。

Hello World 元件︰ App.component.ts

討論的最後一個位元是實際的應用程式元件 — 只有一個，到目前為止 — 定義 UI (所有一行，反正)。這是 app.component.ts 檔案︰

import { Component } from '@angular/core';
@Component({
  selector: 'my-app',
  template: `<h1>Hello {{name}}</h1>`,
})
export class AppComponent  { name = 'Angular'; }

同樣地，元件相依的角度 2 建構 — 元件裝飾項目，讓它從角度的程式庫內的適當位置匯入。然後它會宣告匯出的類別，稱為 AppComponent，要角度的元件，具有兩個參數︰ 選取器和範本。範本非常簡單︰ 這是套用此元件會宣告 （與 ECMAScript 字串插補的繫結，在此情況下 HTML 中的 「 名稱 」 參數完成） 的 HTML 片段。因為會比較大，有時會出現此範本可以或至少大於單行 HTML 這裡所定義，而不是 「 範本 」 您也可以使用 templateUrl 來指定要在其中找到這個範本，您將會執行更新版本的型態出現在外部檔案。

選取器參數是更細微。它會宣告在 UI 中此元件所在套用。實際上說，這表示，任何一處我應用程式標記出現在 HTML 中，改為套用此元件。您還不知道任何<my-app>標記到目前為止，但這只是因為這個特定的標記會宣告內的 index.html 檔案 （我還沒討論到）︰</my-app>

<!DOCTYPE html>
<html>
  <head>
    <title>Angular QuickStart</title>
    <!-- bunch of other stuff snipped for simplicity -->
  </head>
  <body>
    <my-app>Loading AppComponent content here ...</my-app>
  </body>
</html>

請注意如何我應用程式標記包圍文字;這主要是預留位置文字，可能或可能不會出現，視瀏覽器載入和呈現應用程式的速度而定。

總結

這只是簡單"Hello World"; 的工作似乎只要撰寫簡單的 HTML，並省略其他部分都更為容易。不過，大部分的 「 角度方法 」 是建置應用程式離開元件，而不只是為了彈 HTML 和 CSS 及 JS 隨處可見，而且種類的組織和結構夾帶額外負荷。事實上，幾乎什麼我為止所討論的 90%是基本上 Angular 額外負荷。應用程式成長的大小，因為額外負荷會按比例縮小，，並將應用程式開發人員專注於他們的應用程式 」 肉 「 完全。而那正是應用程式架構應執行的工作。

當然，不過，我們還沒結束。沒有更多的角度來瀏覽，2，我們有最起碼應用程式中建立，開機。在未來的資料行，我將探討建立元件，特別執行一些基本 CRUD （開始使用記憶體中 「 資料庫 」） 的演講者清單周圍，以及如何 Angular 2 可以簡化將所有項目直接保留。擱置緊密。更多其他尚未來臨。直到然後、 快樂撰寫程式碼 ！

Ted Neward是西雅圖 polytechnology 顧問、 講師及指導。 他已寫入 100 個以上的文章，是 F #MVP、 具有作者及合著者著作。與他連絡ted@tedneward.com如果您想要讓他來自與您的小組，或是閱讀他的部落格blogs.tedneward.com。

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