N。正如上個月提到的，現在可以開始處理 MEAN 堆棧的前端。也就是說，我們將深入探究 Angular。自本文撰寫之時起（可能在今后的幾年間），我們都會面臨一個問題，即 Angular 存在某種版本問題。

Angular 多年來一直是單頁面應用程序領域的主流產品。不過，在不斷發展的過程中，Angular 已成為一種不同的體系結構范式，導致“新式”Angular 變得與 Angular 向后不兼容。

這就給大部分開發者提出了一個棘手問題： 該使用哪個版本呢？

盡管對于此問題從來沒有一個放之四海而皆準的答案，但歷史表明，最終選用的還是更高版本（僅有為數不多的例外情況）。

這樣一來，就形成了基本的推薦做法： 如果是剛開始處理項目（即所謂的“未開發”項目），且沒有要維護或擴展的現有代碼，請使用最新最棒的穩定版框架。由于我的應用程序（我一直在開發的揚聲器分級門戶）絕對屬于未開發項目一類，因此在本系列專欄中，我將使用新版 Angular 2（將 Angular 1 視為原始產品）。

當然，很容易就會做出相反的決定。幸運的是，Internet 上有許多不錯的 Angular 教程（如果為了讓所有 Angular 1 教程編寫人員的辛苦工作不白費而選擇 Angular 1 的話，那也真夠行的）。

不過，我要警告的是，將 Angular 1 應用移植到 Angular 2 更相當于完全重寫。所以，請務必在今后規劃時將此問題考慮在內。

與此同時，我們將對 Angular 2 進行一些探索。

開始使用

若要使用任何一項新技術，首先需要編寫到處可見的“Hello World”。不過，我立即想到在生成 Angular 2“Hello World”應用時有兩件有意思的事情，需要在深入探究前討論。

第一件，使用諸如 Angular 之類的 Web 框架時，安裝過程通常非常輕量級，令人難以置信（與安裝新的編程語言、IDE 和數據庫等相比），因為大多數情況下，實際庫本身可以直接從 CDN 或主機服務器中提取。不過，對于大部分開發任務來說，最好是從本地文件系統運行庫，因為這是開始使用 Angular 2 時的默認方法，也是我將采用的方法。

第二件，首次運行 Angular 2 時克隆 Git 存儲庫。也就是說，開始使用時的默認方法是克隆 GitHub 上的現有 Git 存儲庫，這與 IDE 托管的“項目模板”恰恰相反。 其他語言和框架開始流行采用這種方法。這種方法的優勢顯而易見，不僅易于理解、無需維護（這一點可能是最重要的），還易于擴展，從而可以添加原始模板沒有的其他功能（結構、內容等）。

因此，假定已在計算機上安裝 Node.js（關注本系列專欄的讀者應已安裝），同時通過 Git 請求獲取 Angular 2“快速入門”項目：

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

假定這會連接到 GitHub 并成功克隆項目，現有大量文件駐留在“hello”子目錄中。對于簡單的“Hello World”應用程序，其實還有很多步驟絕對有必要執行，Angular 團隊也承認這一點。在存儲庫的自述文件中，特別聲明了要放置其他許多文件，以從頭培養一些好習慣，如對前端代碼執行單元測試和端到端 (e2e) 測試。

我們稍后將深入探究這些。現在，掃一眼目錄就會發現一些對 MEAN 開發者來說應該比較熟悉的內容：突出顯示的 package.json（npm 清單文件）和 tsconfig.json（TypeScript 配置文件）。

回顧一下，從源控件中拉取 Node.js 項目的標準做法是啟動依賴項。因此，在執行其他任何操作前，請先拉取依賴項，并通過執行以下命令對項目執行喚醒式調用，然后在瀏覽器中轉到端口 3000（實際上，在該端口運行本地 HTTP 服務器后，腳本通常就會立即為你打開一個端口）：

npm installnpm start

然后，就會看到 Web 框架親切的問候語，如圖 1?所示。

圖 1：歡迎使用 Angular 2 Web 框架

就其自身而言，知道一切正常運行總是令人高興，但除此之外程序員還想查看代碼。回到運行 HTTP 服務器的命令行管理程序，然后按 Ctrl+C 關閉一切。（或者，打開同一目錄的第二個命令行管理程序，哪種方法更容易就選擇哪種。）

下面我們來了解一下，好嗎？

代碼概覽

雖然在 Angular 2 應用程序中查找代碼的首選位置當然是 index.html 文件，但其實眼下此文件給人帶來的更多是困惑（而非幫助）；我們暫且不談這種方法，將在其他地方予以深究。

Angular 團隊最先承認“快速入門”的目錄結構并不可作為構建代碼結構的參考，但通常情況下，所有 Angular 2 應用都包含某種“源”目錄（而不是項目的主根），用來駐留應用程序。

（這樣一來，可以更輕松地進行捆綁，而無需拉取各種僅供開發者使用的文件，如 package.json。） 在“快速入門”中，此目錄被稱為“應用”，它包含三個文件：main.ts 以及 app.component.ts 和 app.module.ts（看起來緊密關聯的兩個文件）。

（請注意，因為 TypeScript 轉譯器會就地修改這些文件，所以此目錄可能不止包含這些文件，但更顯而易見的是，所有這些文件都互相關聯，例如，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 的專欄就會知道，“import”語句會從另一個文件中拉取符號。如你所見，它正在從兩個不同的位置導入符號。

第一個語句中的 platformBrowserDynamic 來自 Angular 庫的某個位置，因此這可能是啟動 Angular 2 環境和庫的標準樣本。（最后一行代碼明確證實了這一點。） 然而，第二個語句從本地文件 app.module 導入，這聽上去很像是必須包含你的代碼。

大部分情況下，在整個 Angular 2 開發過程中 main.ts 保持不變，與應用程序相關的一切反正都位于模塊文件 (app.module.ts) 中，但了解上下文總是非常有用的。

（如果跟蹤 index.html 的痕跡，最終會發現通過 System.js 模塊加載程序機制加載 main.js 的位置，盡管此時并不推薦這樣做。） 也就是說，大部分操作是在 app.module 及其關系中執行。

應用程序模塊： App.module.ts

與上一版一樣，Angular 2 致力于將應用程序代碼模塊化為可管理的小塊，這樣做首先需要將整個應用程序內的元素放到一個位置（Angular 2 將其稱為“模塊”）。因此，該文件將拉取幾個 Angular 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 修飾器，這也是為什么 Angular 2 提供所需的全部功能，同時還允許開發者使用框架專心開發應用程序專有類（本文稱為“AppModule”）的應用程序專有功能。

Angular 2 在將代碼和功能分入各個模塊和組件方面采取強硬立場，了解這一點實際上非常重要。這將是 Angular 2 中不斷重復的主題，而在 Angular 1 中，我們可以將代碼看作是大致按開發者選擇的任意方式排列（但開發者多半是選擇根本不進行排列）。

在 Angular 2 中，庫強制開發者即時應對組織架構。使用 Angular 2，可以根據需要選擇模塊和組件的粒度，但毋庸置疑，必須將代碼和功能分入各個模塊和組件。這就是 Angular 的獨到之處，必須予以遵循。

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'; }

同樣，組件依賴 Angular 2 構造（組件修飾器），因此它是從 Angular 庫內部的相應位置導入。然后，使用兩個參數（選擇器和模板）將導出的類 AppComponent 聲明為 Angular 組件。

模板的作用很容易理解： 這是應用于聲明此組件的 HTML 片段（包括 ECMAScript 字符串內插綁定，在此示例中，為 HTML 中的“name”參數）。

因為此模板有時可能會有點大，或至少比此處指定的一行 HTML 要大，所以除了使用“template”外，還可以使用 templateUrl 來指定用于查找模板的外部文件（將在之后的典型情景中這樣做）。

選擇器參數更加細微，它聲明此組件在 UI 中應用到的位置。實際上，這意味著，只要“my-app”標記在 HTML 中顯示，就會應用此組件。到目前為止，還沒有看到任何 <my-app> 標記，完全是因為這個特殊的標記是在 index.html 文件內部進行聲明（我尚未對此進行介紹）：

<!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>

請注意，“my-app”標記括住了一些文本，這主要是占位符文本，可能顯示，也可能不顯示，具體視瀏覽器加載和呈現應用程序的速度而定。

總結

生成簡單的“Hello World”需要完成大量工作；如果只要直接編寫 HTML，省掉剩下的工作，似乎會輕松得多。不過，Angular 的獨到之處主要是在組件的基礎上生成應用程序（而不光是到處都編寫 HTML、CSS 和 JS），此類組織和結構是有開銷的。

事實上，到目前為止我所介紹的 90% 基本上都是 Angular 開銷。隨著應用程序不斷變大，開銷會按比例縮減，讓應用程序開發者可以將全部精力集中在體現應用程序的精髓上。而這恰恰正是應用程序框架應起到的作用。

不過，相關介紹自然尚未完結。Angular 2 還有很多要探索的地方，我們有一個準應用程序有待生成和啟動。

在今后的專欄中，我將探索如何創建組件，特別是對揚聲器列表執行一些基本的 CRUD（從內存中的“數據庫”入手），以及 Angular 2 是如何讓一切變得簡單易操作的。請耐心等待，未來會有更多精彩內容。在那以前，祝你編碼愉快！

---

Ted Neward?是本部位于西雅圖的 Polytechnology 公司的顧問、講師和導師。他是一位 F #MVP，寫過 100 多篇文章，獨自撰寫并與人合著過十幾本書。

如果您有興趣請他參與您的團隊工作，請通過?ted@tedneward.com?與他聯系，或通過?blogs.tedneward.com?訪問其博客。

衷心感謝以下技術專家對本文的審閱： Ward Bell

原文地址：https://msdn.microsoft.com/zh-cn/magazine/mt793274

---

.NET社區新聞，深度好文，微信中搜索dotNET跨平臺或掃描二維碼關注

內容轉載自公眾號

微軟中國MSDN 了解更多

贊賞

總結

以上是生活随笔為你收集整理的使用 Angular的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。