概覽

在高的層次上，Angular Universal有兩個主要方面：

服務端渲染意味著生成指定路由頁面的全部HTML

在瀏覽器將服務器視圖轉換為客戶端視圖

服務端渲染有兩種不同的處理方式。第一種選擇是預渲染你的應用，也就是說你可以使用Universal構建工具（例如 gulp，grunt，broccoli，webpack等）來在構建期間為所有路由生成靜態HTML。然后你可以把靜態HTML部署到CDN。這個方法的好處是高伸縮性和高性能。缺點是靈活性不如第二種方法。

第二種方法是在web服務器對每一個請求動態重渲染你的應用。也有一些緩存選項來提高伸縮性和性能，但是你需要對每個請求在Angular Universal上下文中運行你的應用代碼。

Angular Universal最初被構建用來和node.js后端協同工作。對大多數流行的node.js服務器端框架例如Express或Hapi.js都有適配器。處node.js之外，Angular Universal具有ASP.NET核心支持。我們希望在不久的未來提供對Java，PHP和Python的支持。

服務端渲染的步驟

預渲染的步驟：

通過構建工具生成靜態HTML

部署HTML到CDN

CDN提供服務器視圖

服務器視圖到客戶端視圖的轉換（后面說）

重渲染的步驟

HTTP GET請求發送到服務器

服務器為預加載（Preboot）生成包含已渲染的HTML和內聯JavaScript的頁面。（并且出于緩存的目的，你也可以選擇性的添加序列化的數據）

服務器視圖到客戶端視圖的轉換（后面說）

服務器視圖到客戶端視圖的轉換

瀏覽器從服務器收到初始化數據（負載，payload）

用戶看到服務器視圖

預加載創建隱藏的div，被用來進行客戶端啟動和記錄事件

瀏覽器對其他的資源進行異步請求（例如圖片，JS，CSS等）

一旦外部資源加載完畢，Angular客戶端再次啟動

客戶端視圖被渲染到預加載時創建的div中

啟動完成，Angular客戶端調用preboot.done()

預加載事件重新執行，為了反應用戶在Angular啟動之前造成的改變而對應用狀態進行調整（例如在文本框中輸入，點擊按鈕等）

預加載將可見的服務器視圖div轉換為隱藏的客戶端視圖div

最后，預加載在可見的客戶端視圖執行一些善后，包括設置焦點。

注意這些工作中的大多數時可以配置的并且可以對你的情況進行調整。例如，你可以精確地控制預加載怎樣監聽事件、重新執行他們和服務器視圖到客戶端視圖的轉換。也有一些性能優化選項。

入門

初始配置

有很多可能的對于Angular Universal的配置。為了快速入門，我們把注意力放在大多數共同的步驟上：?
- Angular 2?
- Node.js后端?
- Webpack

1.Angular 2 應用

我們不會回顧怎樣創建Angular 2 應用。如果你沒有創建過一個Angular 2 應用，請參閱相關文檔。

2.安裝依賴

在你的應用根目錄執行

> npm install body-parser angular2-universal preboot express --save > typings install node express body-parser serve-static express-serve-static-core mime --ambient

3.添加一個服務器

創建一個文件叫做server.js在你的應用根目錄，包含下面的代碼。讀其中的注釋，根據你的Angular 2 應用做一些適當的調整。

//polyfills必須是node import的第一個東西 import 'angular2-universal/polyfills'; import * as path from 'path'; import * as express from 'express';// Angular 2 Universal import {provideRouter} from '@angular/router'; import {enableProdMode} from '@angular/core'; import {expressEngine,BASE_URL,REQUEST_URL,ORIGIN_URL,NODE_LOCATION_PROVIDERS,NODE_HTTP_PROVIDERS,ExpressEngineConfig } from 'angular2-universal';// 把這行替換為你Angular 2 的根組件 import {App, routes} from './app';const app = express(); const ROOT = path.join(path.resolve(__dirname, '..'));enableProdMode();// Express 視圖 app.engine('.html', expressEngine); app.set('views', __dirname); app.set('view engine', 'html');function ngApp(req, res) {let baseUrl = '/';let url = req.originalUrl || '/';let config: ExpressEngineConfig = {directives: [ App ],// 在到達服務器的所用請求之間共享的依賴platformProviders: [{provide: ORIGIN_URL, useValue: 'http://localhost:3000'},{provide: BASE_URL, useValue: baseUrl},],// 為每個請求重復創建的依賴providers: [{provide: REQUEST_URL, useValue: url},provideRouter(routes),NODE_LOCATION_PROVIDERS,NODE_HTTP_PROVIDERS,],// 如果為true，服務器會在所有異步完成后返回響應async: true,// 如果你想要預加載，你需要為app根設置選擇器// 你可以在這里包含一些預加載選項（在其他文檔中解釋）preboot: false // { appRoot: 'app' }};res.render('index', config); }// 服務靜態文件 app.use(express.static(ROOT, {index: false}));// 將所有請求發送到Angular Universal // 如果你想要Express處理某些路由（例如一個API），要調整這里 app.get('/', ngApp); app.get('/home', ngApp); app.get('/about', ngApp);// 服務 app.listen(3000, () => {console.log('Listening on: http://localhost:3000'); });

4.開啟服務

node server.js

總結

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

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