angularJS 筆記

1. 客戶端模板

   客戶端模板即HTML片斷，angular負責裝配這些片斷和數據（模板的內容）。傳統的web應用視圖是在後臺裝配好之後再發送到瀏覽器，而angular中後臺只是將模板（html片斷，並不是完整的頁面）發送給瀏覽器，由前臺去組裝完整的頁面

2. 數據綁定

   經過聲明UI中的某個部分須要映射到每一個js屬性，而後讓他們自行同步

3. 依賴注入

   類（這裏是控制器）是須要簡單的獲取他們所依賴的東西，而不須要去建立他們

4. 指令

   angular中指令是對HTML的一種擴展

5. 控制器的職責

   · 爲應用中的模型設置初始狀態

   · 經過$scope對象把模型數據和函數暴露給視圖（UI模板）

   · 監視模型其他部分的變化，並採起相應的動做

6. 控制器的使用

   · 爲視圖中的每一塊功能區域建立一個控制器

   · 控制器與UI元素之間的綁定：

   靜態方式：經過ng-controller屬性

   動態方式：經過路由把控制器綁定到一個動態加載的DOM模板片斷上

   · 控制器嵌套

   父控制器對象上的$scope對象會被傳遞給子控制器的$scope，他們之間是繼承的關係

7. 數據模型的建立方式

   除了使用控制器顯式的經過$scope對象建立數據模型外，經過模板自身也能夠建立數據模型：

   · 經過表達式建立

   · 使用ng-model屬性

8. 使用$watch來監控數據模型的變化

   當數據模型中的某一個部分發生變化，$watch函數能夠向你發出通知

9. 使用module（模塊）來組織依賴

   9.1 服務

   服務都是單例對象（單個實例，standalone），他們用來執行某個任務。

   簡單的說，服務有點像全局函數，能夠被多個控制器共用。服務分自定義服務和系統服務（$打頭的服務）

   9.2 須要多少個模塊

   一個應用中通常只須要定義一個模塊就ok了

10. 路由和視圖

    視圖就是模板，是一個html片斷，angular經過路由服務$routeProvider來指定URL和視圖之間的對應關係，同時指定一個控制器來爲模板提供數據內容。

11. 與服務器交互

    $http服務提供了一個可擴展的與服務器交互的方法列表，實際應用中咱們能夠編寫一個基於該服務的自定義服務從而爲全部的控制器提供服務器數據交互服務。

    這裏和服務器交互數據是經過REST API接口來實現的，服務器只須要提供控制器所須要的數據便可，不須要提供任何關於數據該如何被顯示的信息

12. angularJS JQurey

    anjularjs與jquery能夠結合使用，這裏是一些須要注意的問題：

    12.1 document ready 事件

    When you are making a page out of multiple partials/fragments in AngularJS, the document ready event for JQuery seems to fire before the page is fully assembled

    參考：http://www.panda-os.com/2015/01/angularjs-jquery-dom-ready/#.VVG1ZfmqpBc

    這裏還有一篇待研究：

    http://www.ng-newsletter.com/posts/angular-for-the-jquery-developer.html
    

13. modal

    13.1 angular的模態框由模塊框模板和觸發模塊框的控件協同實現，這裏觸發控件必須在同一個控制器的做用下；

    13.2 模態框控制器由分模態框控制器和模態框實例控制器組成，前者負責生成模態框實例，模態框內部的的數據處理由模態框實例控制器實現；換句話說模態框控制器和實例控制器的$scope對象是不一樣的；

    13.3 一個an-controller屬性會建立一個控制器對象實例，不一樣的an-controller即便名稱相同（只是實例工廠同樣），實例也不一樣（$scope對象不一樣）

    總結：同一個控制器下的視圖元素要放在一塊兒（在html模板中），

14. 使用directive修改dom

15. ui-router

    15.1 參考

    http://www.funnyant.com/angularjs-ui-router/

    15.2 uirouter是一個狀態機

    15.3 urlRouterProvider

    urlRouterProvider僅用來描述router狀態機中沒有描述的狀況，如默認處理等

    15.4 頁面嵌套

    頁面嵌套是經過狀態名稱實現的，父狀態名.子狀態名 表示該子頁面將嵌套在父頁面中

    15.5 多頁面

    ui-router能夠經過ui-view指令在一個頁面中定義多個區域，不一樣的區域對應不一樣的模板和控制器

16. bower

    參考：http://wwsun.me/posts/bower-post.html

17. $apply

    當你在回調函數中更新$scope對象時，須要使用$apply顯式的提醒angular更新視圖，不然視圖不會更新

    refer:http://jimhoskins.com/2012/12/17/angularjs-and-apply.html

    http://www.angularjs.cn/A0a6

    
    

    18.  提交數據

        18.1 post數據類型需轉換成            

'Content-Type'：application/x-www-form-urlencoded

參考 : http://stackoverflow.com/questions/24710503/how-do-i-post-urlencoded-form-data-with-http-in-angularjs

        18.2 後臺數據模型需重載ActiveRecord的rules方法，不然字段不會更新

public function rules()
{
    return [
        [['display_cnt', 'width', 'height','user_id','name','province','city','district','area','address','description',
        'media_type','terminal_type','price'], 'required'],
    ];
}