如何使用angular框架
這篇文章給大家分享的是有關(guān)如何使用angular框架的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過來看看吧。
陵城網(wǎng)站制作公司哪家好，找創(chuàng)新互聯(lián)！從網(wǎng)頁(yè)設(shè)計(jì)、網(wǎng)站建設(shè)、微信開發(fā)、APP開發(fā)、成都響應(yīng)式網(wǎng)站建設(shè)公司等網(wǎng)站項(xiàng)目制作，到程序開發(fā)，運(yùn)營(yíng)維護(hù)。創(chuàng)新互聯(lián)從2013年創(chuàng)立到現(xiàn)在10年的時(shí)間，我們擁有了豐富的建站經(jīng)驗(yàn)和運(yùn)維經(jīng)驗(yàn)，來保證我們的工作的順利進(jìn)行。專注于網(wǎng)站建設(shè)就選創(chuàng)新互聯(lián)。
簡(jiǎn)介
關(guān)于service worker，網(wǎng)絡(luò)上已經(jīng)有了較多的文章?？偟膩碚f它依靠緩存資源，攔截http請(qǐng)求，來幫助我們達(dá)到離線使用網(wǎng)站的效果。
而angular cli為了讓使用service worker更加便利，為開發(fā)者提供了一個(gè)配置窗口（ngsw-config.json）和一個(gè)與service worker通訊的服務(wù)（SwUpdate）。
啟用
1、新建項(xiàng)目后在項(xiàng)目根目錄下鍵入ng add @angular/pwa。
會(huì)為你的項(xiàng)目添加一些文件，其中包括上文提到的ngsw-config.json，為了即刻感受離線應(yīng)用的魅力，現(xiàn)暫不需配置。
2、安裝http-server npm install http-server -g
將用http-server啟用的服務(wù)器來加載應(yīng)用，這么做是為了模擬真實(shí)的生產(chǎn)環(huán)境，因?yàn)閚g serve環(huán)境下無法啟用service worker。
3、鍵入ng build --prod進(jìn)行打包。 打包完成后進(jìn)入dist下的項(xiàng)目根目錄下，鍵入http-server -p
4、打開瀏覽器進(jìn)入控制臺(tái)，以chrome為例，在network選項(xiàng)卡上勾選offline模擬離線使用。
此時(shí)重新刷新網(wǎng)頁(yè)發(fā)現(xiàn)頁(yè)面依然能夠在離線狀態(tài)下顯示，說明service worker已經(jīng)工作了。
配置
以上并沒有手動(dòng)配置ngsw-config.json，然而初始的配置還有許多不足，比如無法攔截緩存api請(qǐng)求。因此需要對(duì)該文件的配置參數(shù)做一個(gè)大概了解（點(diǎn)擊瀏覽官方配置說明）。
參考官方的說明，我們了解到可以配置靜態(tài)資源的緩存策略（配置項(xiàng)中的assetGroups）以及動(dòng)態(tài)資源的緩存策略（配置項(xiàng)中的dataGroups）。
靜態(tài)資源配置（assetGroups）
interface AssetGroup {
name: string;
installMode?: 'prefetch' | 'lazy';
updateMode?: 'prefetch' | 'lazy';
resources: {
files?: string[];
/** @deprecated As of v6 `versionedFiles` and `files` options have the same behavior. Use `files` instead. */
versionedFiles?: string[];
urls?: string[];
};
}這是該配置項(xiàng)的接口，下面對(duì)各個(gè)屬性做一個(gè)簡(jiǎn)要的說明：
resources屬性下可配置本地的靜態(tài)資源（resources.files）和通過cdn來的靜態(tài)資源（resources.urls）
name是需要編寫的該資源集合的唯一的名字
installMode配置的是你的網(wǎng)站應(yīng)用第一次在當(dāng)前瀏覽器加載后，service worker應(yīng)該進(jìn)行的緩存策略。選擇'prefetch'會(huì)將resources列出的資源一股腦兒的預(yù)先緩存起來，不管當(dāng)前是否有訪問到。選擇'lazy'則不會(huì)預(yù)先緩存，而是在用到時(shí)才會(huì)進(jìn)行緩存。
updateMode配置的是當(dāng)檢測(cè)到資源的版本改變之后，所進(jìn)行的資源緩存策略。
如何得知資源的版本發(fā)生了變化呢？angular service worker會(huì)對(duì)比資源內(nèi)容的hash值。如果hash值不同則版本不同。選擇'prefetch'會(huì)立即緩存更新的資源，選擇'lazy'會(huì)在用到時(shí)在進(jìn)行緩存。不過，這里要注意如果在installMode的配置中沒有選擇'lazy'模式，則這里的'lazy'模式也不會(huì)生效。
動(dòng)態(tài)資源配置（dataGroups）
export interface DataGroup {
name: string;
urls: string[];
version?: number;
cacheConfig: {
maxSize: number;
maxAge: string;
timeout?: string;
strategy?: 'freshness' | 'performance';
};
}這是緩存動(dòng)態(tài)資源的配置項(xiàng)，其實(shí)就是緩存的ajax、fetch的response，將這些api請(qǐng)求的響應(yīng)體進(jìn)行緩存后，就可以在離線狀態(tài)下使用。其中：
urls配置api的url
cacheConfig配置具體的緩存策略：
maxSize 緩存的最大條目數(shù)或響應(yīng)數(shù)，太多則會(huì)暫用系統(tǒng)資源
maxAge 過期時(shí)間，該項(xiàng)與下面提到的strategy策略配合，如果設(shè)置過長(zhǎng)，容易呈現(xiàn)老資源給用戶。
timeout是指的應(yīng)用發(fā)起真實(shí)網(wǎng)絡(luò)請(qǐng)求后的等待時(shí)間，如果超時(shí)將會(huì)配合下面提到的strategy進(jìn)行動(dòng)作
strategy策略，選擇'performance'會(huì)直接攔截網(wǎng)絡(luò)請(qǐng)求，返回緩存（前提是有緩存，并且沒有超過maxAge的時(shí)間），選擇'freshness'會(huì)在timeout超時(shí)的時(shí)候返回緩存。
與service worker通訊
與service worker通訊可以讓我們主動(dòng)做很多事情，而不是僅僅依賴于ngsw-config.json配置，通過依賴注入一個(gè)SwUpdate*服務(wù)，我們可以主動(dòng)要求查詢、更新、激活應(yīng)用的版本
感謝各位的閱讀！關(guān)于“如何使用angular框架”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！
名稱欄目：如何使用angular框架
分享網(wǎng)址：http://m.jiaotiyi.com/article/jgpsos.html