angularjs簡單筆記

隨手記的一些知識點,,沒有長篇大論的原理,,不喜勿噴 ^*_*^

Angularjs可以構建一個單一頁面應用(SPAs),整個頁面不跳轉,通過AJAX進行局部刷新

Angularjs:雙向數據綁定,可以避免書寫大量的初始代碼

         Html內容會被再次渲染,本來是靜態的html標籤,變爲了動態的頁面模塊

         依賴注入

angularjs中儘量不要使用全局變量

Angularjs--執行流程

  1、啓動(startup-展示“hello world

  2、執行期(runtime-angularjs執行概覽

  3、作用域(scope-視圖和控制器的集合區

  4、控制器(controller-應用的行爲

  5、模型(model-應用的數據

  6、指令(dirctives-擴展html語法

  7、過濾器(filters-數據本地化

  8、注入器(injector-聚合你的應用

  9、模塊(module-配置注入器

  10$-angularjs的命名空間

MVC解耦 各司其職

1、雙向數據綁定(ng模塊):{{el}}  作用域:簡單的數據對象

  Angularjs模塊:代表一個完整的業務功能的單元

  模塊初始化函數:angular.module(“模塊名稱”,[]); 返回新創建的模塊,或者已經存在的模       

                  

            第一個參數:模塊名稱

            第二個參數:當前函數依賴列表組合,有利於代碼重用

一個模塊包含:view(html代碼)controller(js代碼,作爲數據的搬運工)

爲了防止函數再次變爲全局變量,違反了angularjs最初的意願,所以,一般使用方式是不接收,直接調用:

angular.module("myApp",[])
        .controller("init",function($scope){
            $scope.msg = "xiaohong";
        });

一個controller對應的是一個html片段的初始化過程

  手動啓動ng-app,啓動模塊:angular.bootstrap(documnt,[‘myapp’])

  如果在body中使用ng-app 每個頁面只能有一個自動啓動的ng-app

也可以同時對多個片段進行處理:

<body ng-app = "myapp">
<div ng-controller="haha">
    <span>hello {{usname}}</span>
</div>
<div ng-controller="init">
<span>nihao {{msg}}</span>
</div>
</body>
<script src = "angular.min.js"></script>
<script>
angular.module("myapp",[])
        .controller("haha",function ($scope){
            $scope.usname = "world";
        }).controller("init",function ($scope){
            $scope.msg = "164896465146";
        });

</script>

 

2、作用域:兩種

$rootScope 根作用域,對應的是一個模塊,每個模塊有一個rootScope

$scope:子作用域,對應一個html片段,一個ng-controller標記一個scope,不同的  

        controller之間要進行數據交互,只能用rootScope進行依賴注入

   (先從小範圍找,在從大範圍找)

強制向上找變量:使用$parent   $parent.uname;

 

 Ng-repeat :遍歷數據對象 比如說user對象:

      Ng-repeat = user in users”  users$scope作用域中的一個對象

3、過濾器

       作用是接受一個輸入,通過某個規則進行處理,然後返回處理後的結果,主要用在

       數據的格式化上

Angularjs內置了一些過濾器,他們是

 Currency(貨幣){{money | currency:’}}默認是美元符號

Date(日期){{birthday | date:’yyyyMMdd’}}

Filter(子串匹配) 用來處理數組的,參數|filter:過濾條件’ 

         可以直接在{{}}中使用filter,跟在表達式後面用 | 分割

        也可以多個filter連用,上一個filter的輸出將作爲下一個

        filter的輸入

Json(格式化json對象)

limitTo(限制個數)

Lowercase(小寫)

Uppercase(大寫)

Number(數字)

orderBy(排序)

 


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章