首頁 > 文章 > web前端 > Angular 5 快速入門範例分享

Angular 5 快速入門範例分享

小云云原創: 2018-05-18 16:25:432608瀏覽

大家對Angular 5了解多少呢？本文主要介紹了簡述Angular 5 快速入門，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟著小編過來看看吧，希望能幫助大家。

一、概述

儘管被稱為Angular5，實際上它只是這個誕生於2012年的前端框架的的第四個版本：

angular history

看起來差不多半年就發布一個新版本，不過實際上從重寫的版本2開始，開發介面與核心思想就穩定下來了，並基本上保持著與前序版本的兼容性。

在5這個新的版本中，Angular團隊將改進重點放在以下特性方面：

更容易建立漸進式Web應用— __P__rogressive __W__eb __A__pp
使用建置優化器剔除無用程式碼，以獲得更小的應用程式、更快的網路載入時間
使物化設計元件相容服務端渲染

PWA是Google提出的標準，旨在讓Web應用程式在行動終端上獲得媲美原生應用程式的使用者體驗。一個PWA應用程式主要利用Service Worker和瀏覽器快取來提省互動體驗，它不僅可以直接部署在手機桌面，而且可以離線應用：

pwa

二、引入angular環境

Angular推薦使用TypeScript來開發應用，這要求使用一個線上編譯器（JIT）即時編譯程式碼，或在開發期間採用預編譯器(AOT)提前編譯程式碼。

為了避免這個繁瑣的過程影響對Angular框架本質的思考，我們將這些必需品進行了必要的配置和打包，以便適應在線編寫和實驗。現在只需要引入一個庫a5-loader就可以了。

下圖是庫的構成示意，其中的藍色部件都打包在庫中：

a5-loader

你可能注意到Angular框架並不是藍色的。的確，我們沒有把它打包在a5-loader中，而是讓模組載入器（SystemJS）根據應用程式的需要自動載入。這麼做的目的，是為了讓應用程式碼，和後續課程中採用的後端建構方法保持一致。

如果你對這個庫有興趣，可以訪問github上的 http://github.com/hubwiz/a5-loader 倉庫。

三、創建Angular元件

Angular是面向元件的前端開發框架。如果你曾經從事過C/S圖形化應用的開發，應該要知道元件這個字的意思。基本上，組件代表著一些具有圖形介面，並且具有內在邏輯能力的程式單元。下圖列出了三種用於實作乒乓切換的元件：

#component sample

元件提供了很好的複用性，在一堆元件的基礎上，我們使用簡單的膠水程式碼就可以實現相當複雜的互動功能。

現在讓我們來建立Angular元件，程式碼相當簡單：

@Component({ selector: "ez-app", template: `<h1>Hello,angular5</h1>`})class EzComp{}

在Angular框架中，元件就是指一個應用了Component裝飾器的類別。 Component裝飾器的作用，就是為被裝飾的類別附加元資料資訊：

#annotations

Angular框架對應用程式進行編譯引導時，將使用這些元資料建構視圖。其中的兩個元資料非常重要：

selector：元件宿主元素的CSS選擇符，宣告了元件在DOM樹中的渲染錨點
template：元件的模板，框架將以這個模板為藍圖建立視圖

四、建立Angular模組

######################## ####Angular框架的核心是組件化，同時它的設計目標是適應大型應用的開發。因此，在應用開發中引入了模組（NgModule）的概念來組織不同的元件（及服務），一個Angular應用至少需要創建一個模組。 ######為了區別於JavaScript語言本身的模組概念，在本課程中將使用NG模組來表示一個Angular模組。 ######類似組件，NG模組就是一個應用了NgModule裝飾器的類別。例如，下面的程式碼創建了一個NG模組EzModule：###

@NgModule({
 imports: [ BrowserModule ],
 declarations: [ EzComp ],
 bootstrap: [ EzComp ]
})
class EzModule{}

同样，NgModule装饰器用来给被装饰的类附加模块元数据，可以查看被装饰类的__annotations__属性来观察这一结果：

ngmodule annotations

NgModule装饰器声明了一些关键的元数据，来通知框架需要载入哪些NG模块、编译哪些组件以及启动引导哪些组件：

imports：需要引入的外部NG模块
declarations：本模块创建的组件，加入到这个元数据中的组件才会被编译
bootstrap：声明启动引导哪个组件，必须是编译过的组件

需要强调的是，bootstrap元数据声明的组件必须是编译过的组件：它要么属于使用imports元数据引入的外部NG模块，要么是已经在declarations元数据中声明的本地组件。

NG模块BrowserModule定义于包@angular/platform-browser，它是Angular跨平台战略的重要组成部分。BrowserModule封装了浏览器平台下的核心功能实现，与之对应的其他平台实现还有：

ServerModule：服务端实现
WorkerAppModule：WebWorker实现

通常情况下开发Web应用时，我们都需要引入BrowserModule这一NG模块。

五、启动Angular应用

前面课程中，我们已经创建了一个组件和一个NG模块，不过似乎只是定义了一堆的元数据，几乎没有写太多有价值的代码。
但这就是Angular框架的一个特点：声明式开发。这些元数据是用来向框架声明如何引导启动应用程序的重要信息。

启动代码很简单，引入platformBrowserDynamic()工厂函数、创建平台实例、启动指定模块：

import { platformBrowserDynamic } from "@angular/platform-browser-dynamic"
const pref = platformBrowserDynamic()
pref.bootstrapModule(EzModule)

√ 平台对象：PlatformRef

platformBrowserDynamic()函数返回一个PlatformRef对象（Angular对平台的抽象），这个函数最重要的作用，在于其内部创建了一个即时（__J__ust __I__n __T__ime）编译器，可以在线实时编译NG模块和组件，这也是它被称为动态（Dynamic）的原因：

dynamic bootstrap

平台对象的bootstrapModule()方法用来启动指定的NG模块，启动的绝大部分工作，在于利用JIT编译器编译NG模块和组件，当这些编译工作都完成后，则根据启动模块的bootstrap元信息，渲染指定的组件。

六、为什么这么复杂？

可能你已经感觉有点复杂了：只是为了写一个Hello,World，就要写这么多代码。

事实上这些复杂性是随着Angular的发展逐步引入的，从好的一方面说，是提供给开发者的可选项逐渐增多了，适用场景变多了。

比如，在Angular2正式版之前，都没有NG模块的概念，你只要写一个组件就可以直接启动应用了。Angular团队的预期应用场景是大规模前端应用开发，因此显式的NG模块声明要求也是容易理解的。不过即使是小型的应用，由于可以只使用一个NG模块，因此这一点的复杂性增加倒也不多，只是增加了学习和运用这个新概念的成本。

另一个显而易见的复杂性，在于多平台战略的引入。Angular希望让应用可以跨越浏览器、服务器等多个平台（基本）直接运行。因此免不了抽象一个中间层出来，我们需要在应用中显式地选择相应的平台实现模块：

multiple platform

第三个复杂性来源于对预编译（AOT：Ahead Of Time）的支持。在早期，Angular只有即时编译（JIT：Just In Time），也就是说应用代码是在运行时编译的。即时编译的第一个问题是在应用中需要打包编译器代码，这增加了最终发布的应用代码的
大小；另一个问题在于编译需要时间，这增加了用户打开应用的等待时间。因此现在的Angular是同时支持JIT和AOT的，但启动JIT编译的应用，和启动AOT编译的应用，在目前需要显式地进行选择：

aot vs. jit

對於Angular而言，編譯將入口NG模組定義轉換為NG模組工廠（NgModuleFactory）。對JIT而言，這一步是隱含在bootstrapModule()中的。而對於AOT而言，生成模組工廠就結束了，應用啟動時使用bootstrapModuleFactory()呼叫生成的模組工廠即可。

儘管AOT編譯通常在建置階段運用，我們可以在瀏覽器裡模擬這個分兩步驟的過程。

七、理解Angular的初衷

#除了框架本身的功能強大所導致的複雜性，Angular的另一個複雜性來源在於其高度封裝的宣告式API，讓開發者難以揣摩、洞察框架的實作機制，因此使用起來就很心虛，一旦出現問題則難以分析排錯：

angular error

不能把Angular當作黑盒來使用。

一方面原因在於，Angular是以其聲明式的模板語法為核心提供API開發介面的，開發者書寫的模板，經過框架相當複雜的編譯處理，才渲染出最終的視圖對象。如果不嘗試了解從模板到視圖物件這個過程究竟發生了什麼，我相信你總是會有一種失控的感覺。

另一方面原因在於，Angular是一個框架，它搭好了應用程式的架子，留了一些空隙讓開發者填充。如果不盡可能地了解框架的運作機制，很難充分地利用好框架。

開發Angular的出發點，是為了實作用HTML來寫使用者介面，想想一個靜態網頁有多容易開發，你就知道這是多麼好的想法：

html challenge

原生HTML的問題在於，首先它需要藉助於JavaScript才能實現過得去的用戶交互，其次它只有那麼多標籤可用，難以擔當開發用戶界面的大任。

既然瀏覽器不能直接解釋678a08dd1e3fccb2d90f7a6fcf4c7af5這樣的標籤，Angular團隊就引入了編譯器的概念：
在送給瀏覽器之前，先把有擴充標籤的HTML翻譯成瀏覽器支援的原生HTML：

html compiler

Angular 5 快速入門範例分享

相關文章