建站
咨詢
售后
建站咨詢
新聞中心
應(yīng)用外殼
應(yīng)用外殼是一種在構(gòu)建期間借助路由渲染部分應(yīng)用的方法。它可以通過快速啟動(dòng)一個(gè)靜態(tài)渲染頁面（所有頁面的公共骨架）來改善用戶體驗(yàn)。與此同時(shí)，瀏覽器會(huì)下載完整的客戶端版本，并在代碼加載后自動(dòng)切換到完整版。
成都創(chuàng)新互聯(lián)堅(jiān)持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：成都做網(wǎng)站、網(wǎng)站建設(shè)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿足客戶于互聯(lián)網(wǎng)時(shí)代的瓦房店網(wǎng)站設(shè)計(jì)、移動(dòng)媒體設(shè)計(jì)的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！
這能讓用戶快速看到應(yīng)用中第一個(gè)有意義的畫面，因?yàn)闉g覽器可以渲染出 HTML 和 CSS，而無需初始化任何 JavaScript。
欲知詳情，參閱應(yīng)用外殼模型。
第 1 步：準(zhǔn)備本應(yīng)用
可以用下列 CLI 命令來執(zhí)行本操作：
ng new my-app --routing對(duì)于既有應(yīng)用，你必須手動(dòng)添加 ?RouterModule ?并在應(yīng)用中定義 ?
第 2 步：創(chuàng)建應(yīng)用外殼
使用 CLI 自動(dòng)創(chuàng)建一個(gè)應(yīng)用外殼。
ng generate app-shell執(zhí)行完這個(gè)命令，你會(huì)發(fā)現(xiàn) ?Angular.json? 配置文件中已經(jīng)增加了兩個(gè)新目標(biāo)，并做了一些其它更改。
"server": {
"builder": "@angular-devkit/build-angular:server",
"defaultConfiguration": "production",
"options": {
"outputPath": "dist/my-app/server",
"main": "src/main.server.ts",
"tsConfig": "tsconfig.server.json"
},
"configurations": {
"development": {
"outputHashing": "none",
},
"production": {
"outputHashing": "media",
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"sourceMap": false,
"optimization": true
}
}
},
"app-shell": {
"builder": "@angular-devkit/build-angular:app-shell",
"defaultConfiguration": "production",
"options": {
"route": "shell"
},
"configurations": {
"development": {
"browserTarget": "my-app:build:development",
"serverTarget": "my-app:server:development",
},
"production": {
"browserTarget": "my-app:build:production",
"serverTarget": "my-app:server:production"
}
}
}第 3 步：驗(yàn)證該應(yīng)用是使用應(yīng)用外殼的內(nèi)容構(gòu)建的
使用 CLI 構(gòu)建目標(biāo) ?app-shell?。
ng run my-app:app-shell:development或使用產(chǎn)品環(huán)境配置。
ng run my-app:app-shell:production要驗(yàn)證構(gòu)建輸出，請(qǐng)打開 ?dist/my-app/browser/index.html?。尋找默認(rèn)的文本 ?app-shell works!? 就可以驗(yàn)證這個(gè)應(yīng)用外殼路由確實(shí)是作為輸出的一部分渲染出來的。
本文標(biāo)題：創(chuàng)新互聯(lián)Angular教程：Angular應(yīng)用外殼
本文地址：http://www.dlmjj.cn/article/ccciesc.html
