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