隨手記的一些知識點,,沒有長篇大論的原理,,不喜勿噴 ^*_*^
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:’yyyy年MM月dd日’}}
Filter(子串匹配) 用來處理數組的,參數|filter:’過濾條件’
可以直接在{{}}中使用filter,跟在表達式後面用 | 分割
也可以多個filter連用,上一個filter的輸出將作爲下一個
filter的輸入
Json(格式化json對象)
limitTo(限制個數)
Lowercase(小寫)
Uppercase(大寫)
Number(數字)
orderBy(排序)