一、實(shí)現(xiàn)todoList的demo

? ? 功能很簡單，提供一個(gè)文本框，用戶輸入回車后添加新條目。每個(gè)條目可以在待處理和處理中兩個(gè)區(qū)域間切換，每個(gè)條目都可以被刪除，大致的界面如下圖所示：

?

二、處理邏輯

? ? 首先將前臺(tái)的input文本框和后臺(tái)的變量雙向綁定，然后后臺(tái)需要一個(gè)list數(shù)組保存多個(gè)事項(xiàng)，html頁面將list中的對象遍歷顯示，每一個(gè)遍歷的元素都需要一個(gè)刪除按鈕，以及切換按鈕，前者觸發(fā)后臺(tái)數(shù)據(jù)刪除list中的對應(yīng)對象，后者觸發(fā)后臺(tái)改變list中對應(yīng)對象的屬性，從而改變對象在前臺(tái)的顯示位置，具體的html代碼如下圖所示，這里有一點(diǎn)需要注意，沒有辦法同時(shí)在一個(gè)標(biāo)簽內(nèi)同時(shí)使用*ngFor和*ngIf兩個(gè)屬性，否則編譯時(shí)會(huì)報(bào)錯(cuò)。

? ? 在這里有一個(gè)細(xì)節(jié)需要注意，不要把slice與splice弄混淆。

? ? slice(start,end)：方法可從已有數(shù)組中返回選定的元素，返回一個(gè)新數(shù)組，包含從start到end（不包含該元素）的數(shù)組元素。

? ? splice(index,number,additem1,additem2)：該方法向或者從數(shù)組中添加或者刪除項(xiàng)目，返回被刪除的項(xiàng)目（該方法會(huì)改變原數(shù)組）。后臺(tái)的具體代碼如下所示：

?

三、實(shí)現(xiàn)數(shù)據(jù)緩存

? ? 如何實(shí)現(xiàn)數(shù)據(jù)緩存？也就是頁面刷新后，添加的數(shù)據(jù)依然可見？

? ? 首先需要知道什么叫服務(wù)？

? ? 在AngularJs中所有的頁面都可以作為組件來對待，但是有一些公共業(yè)務(wù)邏輯，在多個(gè)組件中都會(huì)用到，這時(shí)我們可以把它提取成一個(gè)服務(wù)。

? ? 創(chuàng)建服務(wù)的方式和創(chuàng)建組件的方式類似，使用AngularCLI創(chuàng)建，使用如下命令：

? ? ng g service my-new-service

? ? 在項(xiàng)目的根目錄中創(chuàng)建服務(wù)(先在app目錄下創(chuàng)建services文件夾)，最終會(huì)生成兩個(gè)文件，一個(gè)開發(fā)文件，一個(gè)測試文件，如下圖所示：

? ? ng g service services/storage

? ?

? ? 在生成的類中添加一個(gè)方法setItem(key,value)，localStorage.setItem(key,JSON.stringify(value))，添加一個(gè)方法getItem(key)，return JSON.parse(localStorage.getItem(key))，添加一個(gè)方法removeItem(key)，localStorage.removeItem(key)，保存數(shù)據(jù)的時(shí)候需要將對象轉(zhuǎn)換為json字符串，獲取數(shù)據(jù)時(shí)需要轉(zhuǎn)換為Json對象。

? ? 這樣服務(wù)就算是封裝好了，但是需要在app.module中引入服務(wù)，注入服務(wù)，并且在其他組件引入服務(wù)。

? ? 1、引入服務(wù)：import {StorageService} from ‘./services/storage.service’ ? （注意：路徑一定要寫對）

??? 2、注入服務(wù)：providers:[StorageService] ? ? ?

? ??

? ? 創(chuàng)建服務(wù)的方式一（不推薦）：

? ? 直接在相應(yīng)組件的ts文件創(chuàng)建StorageService對象，就可以使用該服務(wù)

? ? public storage = new StorageService();

? ? this.storage.setItem(“”);

?

? ? 創(chuàng)建服務(wù)的方式二（推薦）：

? ? 在構(gòu)造函數(shù)中依賴注入服務(wù)(什么叫做依賴注入)

? ? constructor(private storage:StorageService){

? ? ?? //注入后就可以使用this.storage來調(diào)用storage中的服務(wù)

? ? }

? ? 具體編寫邏輯：

? ? 每次新增條目的時(shí)候：從storage獲取數(shù)據(jù)，如果有數(shù)據(jù)，就將新的數(shù)據(jù)加入其中，重新寫入storage，如果storage中沒有數(shù)據(jù)，直接將新的對象放到storage服務(wù)中，如下圖所示：

? ? 轉(zhuǎn)換條目的時(shí)候：直接將整個(gè)list重新保存到storage服務(wù)中，如下圖所示：

?

? ? 頁面初始化的時(shí)候：將storage中的數(shù)據(jù)綁定到list中，如下圖所示：

?

轉(zhuǎn)載于:https://www.cnblogs.com/mrnx2004/p/9671320.html

與50位技術(shù)專家面對面20年技術(shù)見證，附贈(zèng)技術(shù)全景圖

總結(jié)

以上是生活随笔為你收集整理的初探AngularJs框架（三）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。