跳到主要內容

我得好好想想...為何要用AngularJS ? 何時要用AngularJS?



有人告訴我, AngularJS 是具有 MVC 架構的開發 Libary......是這樣嗎?

先想想, What's MVC? 
(節錄自wiki)
軟體工程開發時的架構模式
  • （控制器Controller）- 負責轉發請求，對請求進行處理。
  • （檢視View） - 介面設計人員進行圖形介面設計。
  • （模型Model） - 程式設計師編寫程式應有的功能（實作演算法等等）、資料庫專家進行資料管理和資料庫設計(可以實作具體的功能)。
ModelViewControllerDiagramZh.png

每個人對MVC的解讀稍有落差, 圖畫的也有差別, AngularJS 讓我覺得比較像這張圖....
(圖出自)


AngularJS 實現的MVC開發架構出現在DOM

* Model 指存放Data的物件, 可以是Key Value
* Controller 指class
* View 就是整個Dom

AngularJS is a framework that binds your HTML (views) to JavaScript objects (models). When your models change, the page updates automatically.

 這樣的架構讓前端人員必須打破舊有思維做設計, 針對不同的ID與Classname寫Event的時代要過去了 !

這種做法有什麼好處?

 A. 前端程式乾淨
B. 前端程式有彈性
C. 前端程式有共用性

 但什麼時候要用? 是令我頭痛的問題
多看看一些sample會更有感覺
http://tutorialzine.com/2013/08/learn-angularjs-5-examples/

總結

 在頁面不reload的狀況下, 要處理許多Event function 和 Data Object, 以往只能用越寫越多來解決, 因為跟著ID or Classname 可重複利用性也低, 終極目標還是快速、正確的開發, 如果能透過好的Libary解決也是一大福音

標籤：

留言

張貼留言

這個網誌中的熱門文章

Indexed Database API - Initail

As a front web developer, I could create UI faster or Optimize file to load page faster. But it hard to faster response time form server however 80-90% of the end-user response time is spent on the frontend. Nowadays we could use the Indexed Database API, or IndexedDB to reduce the request times. Less request times, less response time. What is IndexedDB ? IndexedDB is web browser standard interface for a local database of records holding simple values and hierarchical objects. IndexedDB was initially proposed by Oracle in 2009./* wiki */ What browsers would support IndexedDB ? Most browsers of hybrid devices support it exclude IE9-, Safari 7-,iOS Safari 7.1-, Opera Mini, Android Browser 4.3-./* caniuse.com */ When shall we use IndexedDB ? Save Money on web hosting Data index sort Data keyword search Keep data for period of time How to start it? //*************************************************************** //initDB //{Object}, {data: dbName, objectStore: storeName, ...
張貼留言
閱讀完整內容

最近設計的一組icon..太有APPLE風格被打槍了

張貼留言
閱讀完整內容

jQuery 的slideToggle太好用了

$ ( ".collapse" ) .each ( function ( index, value ) { $ ( this ) . click ( function ( evt ) { evt.preventDefault ( ) ; //prevent the default click event of the anchor tag. var target = $ ( this ) .attr ( "data-toggle" ) ; $ ( "." + target ) .slideToggle ( ) ; } ) ; } ) ; http://code-tricks.com/create-a-common-toggler-for-div-using-jquery/
張貼留言
閱讀完整內容