資訊專欄INFORMATION COLUMN
摘要：每個自定義指令都可以實現(xiàn)這個方法，當模版引擎在鏈接模版的時候會回調指令的方法，調用時將當前的和作為參數(shù)傳進來。
前端開發(fā)大部分時候面對兩類問題：一是業(yè)務邏輯，二是界面展示邏輯。在一個管理系統(tǒng)或互聯(lián)網(wǎng)產(chǎn)品中，我們首先會通過業(yè)務數(shù)據(jù)對整個業(yè)務系統(tǒng)建模。所謂業(yè)務邏輯，反映到程序層面就是對一些業(yè)務數(shù)據(jù)的增刪改查操作；同時我們也需要將這些業(yè)務邏輯的操作結果反饋給用戶，這就是界面展示邏輯。比如當你在發(fā)布一條微博，在業(yè)務邏輯上是多了一條微博數(shù)據(jù)，同時在界面上也需要將這條數(shù)據(jù)呈現(xiàn)出來。在我看來，用戶界面本質上就是業(yè)務數(shù)據(jù)的一種對用戶友好的展示形態(tài)。一個理想的前端架構是將業(yè)務邏輯和界面展示邏輯完全分離，兩者獨立變化，互不影響。在我們考慮業(yè)務邏輯的時候，就不要考慮界面展示的問題；在考慮界面展示問題的時候，就不要考慮業(yè)務邏輯的問題。如果將兩者耦合在一起，那么在面對復雜問題的時候可能就會左右為難，無從下手。
MVC模式的主要目的就是將業(yè)務邏輯和界面展示分離。雖然對于C(Controller)是有爭議的，但是M(model)和V(view)是普遍認同的。將業(yè)務邏輯和界面展示分離的關鍵也在model和view的分離。angular是一個非常優(yōu)秀的MV*框架，非常好的體現(xiàn)了MVC的思想，本文將從該角度來介紹angular的一些使用心得。
需求這是一個后來管理頁面，用來設置各個客戶端的banner顯示。頁面主要有以下功能：
1.編輯banner信息，可以設置banner的類型和上傳banner圖片。
2.刪除和插入。
3.上下移動banner順序。
4.保存。
不考慮頁面展示，我們可以先實現(xiàn)業(yè)務邏輯。各個端banner列表的邏輯是一樣的，只是類型以及與后臺的交互接口不一樣。我們可以將banner的這些列表邏輯定義成一個service，不同端的列表都可以重用這個service。其定義如下。
這個service的實現(xiàn)非常簡單，就是對一個banner數(shù)組進行增刪改查。
實現(xiàn)界面展示邏輯實現(xiàn)完業(yè)務邏輯我們再來解決界面展示的問題。angular提供了一個非常強大的模版引擎,通過指令和表達式就能將數(shù)據(jù)呈現(xiàn)到界面。如何才能模版中使用這些業(yè)務數(shù)據(jù)和方法呢？我們需要將這些數(shù)據(jù)和方法寫到scope對象中,scope對象定義了對應模版能夠使用的數(shù)據(jù)和方法。bannerCollection service的attach(scope)方法就是將對應的banner數(shù)據(jù)和方法寫到scope對象中以便能在模版中使用。下面的代碼是在mobile controller中使用bannerCollection service,并通過其attach方法和對應的scope對象綁定。
將數(shù)據(jù)和方法注冊到scope對象后，我們就可以在模版中使用了。下圖是模版的一部分。
ng-repeat指令用來展示banner列表，雙花括號用來輸出數(shù)據(jù)，ng-click用來響應用點擊。angular框架提供了許多非常有用的內(nèi)建指令，基本上能滿足我們大部分的需求了。除了內(nèi)建指令，angular還為我們提供了自定義指令的接口，通過自定義指令我們可以擴展出非常豐富的web組件。在這個banner管理頁面中，有個上傳banner圖片的功能，我們就可以將其封裝成一個指令。
如上圖，該指令的實現(xiàn)主要在link方法中。每個自定義指令都可以實現(xiàn)這個方法，當模版引擎在鏈接模版的時候會回調指令的link方法，調用時將當前的scope和element作為參數(shù)傳進來。link方法非常重要,它體現(xiàn)了指令的本質：scope到element之間的一個橋梁，其實也就是model到view的一個橋梁。我們可以在這個link方法中監(jiān)聽element的事件來響應用戶操作并修改scope中的數(shù)據(jù)；也可以監(jiān)聽scope中數(shù)據(jù)的變化將其反映到用戶界面上。scope對象有個$watch方法，可以通過該方法去監(jiān)聽scope中需要關心的數(shù)據(jù)的變化。
在這個圖片上傳的指令中，我們在link方法中監(jiān)聽了用戶選擇文件的事件。當用戶選擇文件后，通過post請求將圖片上傳到后臺生成url和dsfid，同時更新scope中的img數(shù)據(jù)；ng-repeat指令在監(jiān)聽到scope中img數(shù)據(jù)的變化后又會刷新相應的界面展示。
angular為我們提供了一個非常好的業(yè)務邏輯和界面展示邏輯分離的機制，極大地簡化了前端開發(fā)。特別對于數(shù)據(jù)型應用，angular是非常好的選擇。
文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉載請注明本文地址：http://m.hztianpu.com/yun/78889.html
摘要：前端知識點總結一概述基于命令行的開發(fā)方式編譯工作集成了打包工具。。。。在瀏覽器中接管展現(xiàn)應用的內(nèi)容，并根據(jù)我們提供的操作指令響應用戶的交互。在開發(fā)時，八大組成部分模塊組件模板自帶的標簽指令綁定相關的的語法元數(shù)據(jù)告訴如何處理一個類。 前端知識點總結——Angular 一、Angular概述 基于命令行的開發(fā)方式？ ①hot reload ②編譯工作 ③集成了webpack打包工具 。。。...
摘要：延伸閱讀學習與實踐資料索引與前端工程化實踐前端每周清單半年盤點之篇前端每周清單半年盤點之與篇前端每周清單半年盤點之篇 前端每周清單專注前端領域內(nèi)容，以對外文資料的搜集為主，幫助開發(fā)者了解一周前端熱點；分為新聞熱點、開發(fā)教程、工程實踐、深度閱讀、開源項目、巔峰人生等欄目。歡迎關注【前端之巔】微信公眾號（ID：frontshow），及時獲取前端每周清單；本文則是對于半年來發(fā)布的前端每周清單...
摘要：我們使用了模式書寫，并引入了思想，這些以前只在里見到的設計，現(xiàn)在里也有體現(xiàn)，并且在本章中會著重講解多的協(xié)作。如果之前寫過，那對于這種書寫方式一定無比熟悉。每次數(shù)據(jù)的變更，無論是還是，都將變化冒泡到，然后由再向下逐級推送各組件是否重繪。 前集回顧 在上一章里我們講了如何在angular2下開發(fā)一個component(還沒做的趕緊去學吧)。我們使用了Unidirectional Data ...
摘要：上顯示出來時間本地系統(tǒng)顯示時間發(fā)送前控制臺打印出來瀏覽器網(wǎng)絡中監(jiān)測顯示解決方案只有在發(fā)送時間類型的數(shù)據(jù)時會進行轉換，導致相差個小時，但是我發(fā)送前就將其轉換成字符串，就不會造成這樣的結果了。 創(chuàng)建時間 使用new Date(),可以看見有5種構造函數(shù) showImg(https://segmentfault.com/img/remote/1460000013946509); co...
摘要：本篇文章就記錄我的做微信分享信息定制的過程和踩坑總結。但是，這就要求在每個組件中都加微信分享代碼，會導致維護困難。 在微信瀏覽器內(nèi)打開任何網(wǎng)頁，若不配置分享接口，微信會默認使用如下信息作為分享信息： 默認標題：HTML的title 默認連接：當前頁面的地址，即location.href 默認圖片：會取當前頁面body內(nèi)最前面的一張符合條件的圖片（尺寸必須大于300px × 300px...
閱讀 1494·2021-09-23 11:21
閱讀 3170·2019-08-30 14:14
閱讀 3247·2019-08-30 13:56
閱讀 4260·2019-08-30 11:20
閱讀 2018·2019-08-29 17:23
閱讀 2836·2019-08-29 16:14
閱讀 1760·2019-08-28 18:18
閱讀 1543·2019-08-26 12:14
