指令
angularjs屬性以ng-attr開頭挤土,但是可以使用data-ng-attr來讓網(wǎng)頁對html5有效
ng-app 定義應(yīng)用程序的根元素
ng-bind綁定html元素到對應(yīng)程序數(shù)據(jù)
ng-click定義元素被單擊時的行為
ng-controller為應(yīng)用程序定義控制器對象
ng-disabled綁定應(yīng)用程序數(shù)據(jù)到HTML的disabled屬性
ng-init為應(yīng)用程序定義初始值
ng-model綁定應(yīng)用程序數(shù)據(jù)到html元素
ng-repeat為控制器中的每個數(shù)據(jù)定義一個模版
ng-show顯示或隱藏html元素
MVC
model:數(shù)據(jù)模型層
view:視圖層,負(fù)責(zé)展示
controller:業(yè)務(wù)邏輯和控制邏輯
優(yōu)點(diǎn):代碼模塊化 代碼邏輯比較清晰、可移植性高请琳,后期維護(hù)方便檩坚、代碼服用疙赠,代碼規(guī)模越來越大的時候交掏,切分職責(zé)是大勢所趨
缺點(diǎn):運(yùn)行效率稍微低一點(diǎn)刨肃。
一個基于angularjs應(yīng)用:先定義一個ng-app的模塊古拴,然后通過給該模塊注入controller模塊和service模塊來給頁面添加數(shù)據(jù)等各種操作。
綁定數(shù)據(jù)
在controller注入使用$scope真友,$scope是一個對象黄痪,我們給$scope添加的屬性或者方法都可以在template里直接使用。$scope的作用域受controller所限盔然,不同的同級controller之間的$scope互補(bǔ)干擾桅打。
如果在不同的同級之間的controller中使用$rootScope來綁定數(shù)據(jù)或者方法,則可以相互通用愈案。
controller的作用域相當(dāng)于javascript中的function的作用域油额,內(nèi)層controller可以訪問外層controller
在controller以及其他服務(wù)中,如果需要用到其他的模塊 需要注入刻帚,類似java spring框架中的依賴注入,
比如 function($scope){},,同時有時候?yàn)榱伺浜洗a壓縮注入時需要特別注意,['$scope',function($scope){}]
html標(biāo)簽
angularjs在原有的標(biāo)簽上添加了自己的ng方法涩嚣,將所有的事件通過ng-事件名來實(shí)現(xiàn)
比如在jq中on/off 實(shí)現(xiàn)的事件都可以用ng-來實(shí)現(xiàn)
ng-class來給元素添加class
ng-style來給元素添加樣式
ng-change來給元素添加change事件
ng-click來給元素添加click事件
....
然后通過controller里的$scope對象來給這些添加樣式崇众,方法等。
$apply $watch
因?yàn)?scope這個對象是angularjs自己封裝的航厚,如果外部函數(shù)調(diào)用 比如js自帶的setTimeout 以及jq的dom操作等等 來給$scope的屬性做變化顷歌,這種變化是無效的
這個時候就需要在$scope.$apple的環(huán)境下才能給$scope做變化
例:
$scope.age = 23;
setTimeout(function(){
$scope.$apply(function(){
$scope.age = 24;
})
},1000)
$watch用來監(jiān)聽某個$scope或者$rootScope的屬性變化,設(shè)置監(jiān)聽的時候給的是屬性名幔睬,并不是$scope.屬性名;
angular自定義方法
angularjs中定義了很多方法來更簡介的去開發(fā)
比如
angular.isArray
angular.isDate
angular.isDefined
angular.uppercase
angular.copy
angular.forEach
等等可以直接在官方文檔里看
在angularjs使用jq的方式:在引入angularjs之前引入jquery眯漩,然后通過$scope.$apply來監(jiān)聽使用jq方法后的變化
過濾器
angularjs有自己的filter服務(wù),可以對html數(shù)據(jù)進(jìn)行處理后再顯示
比如{{name|uppercase}}
可以利用filter進(jìn)行大小寫切換,json格式化赦抖,date格式化舱卡,number格式化,貨幣格式化队萤,根據(jù)條件過濾信息轮锥,排序等
filter可以在template中使用也可以在controller中使用
provide 服務(wù)
angularjs里的provide服務(wù)就是為了給MVC中的model使用,如果把數(shù)據(jù)都塞在controller會顯得很臃腫要尔,所以現(xiàn)在獨(dú)自放在model中更易于分離開發(fā)
angularjs提供了3種服務(wù)
- provider:這種服務(wù)必須寫this.$get = function(){};同時 這也是唯一一種能傳入config的服務(wù)舍杜,如果你要在service啟動之前要對模塊范圍進(jìn)行配置,這就必要用到provider了
- factory:可以直接返回字符串
- service:這種服務(wù)被注入到controller后赵辕,相當(dāng)與new了一個對象既绩,service中寫的this.屬性方法都可以直接被調(diào)用,还惠,不能直接返回字符串
網(wǎng)絡(luò)相關(guān)
$http
angularjs封裝了http的相關(guān)方法饲握,我們只要注入$http之后就可以使用他的方法去進(jìn)行網(wǎng)絡(luò)請求
$http.post
$http.get
$http.jsonp
都可以進(jìn)行相關(guān)的success和error回調(diào)
$location
window.location方法相似
1.暴露當(dāng)前地址欄的URL,獲取并監(jiān)聽URL 吸重,改變URL
2.當(dāng)出現(xiàn)(改變地址欄互拾,點(diǎn)擊了后腿按鈕,點(diǎn)擊了一個鏈接)情況時同步URL
3.一系列方法來獲取URL對象的具體內(nèi)容(host嚎幸,port等)
但是在angularjs中URL改變并不會加載整個頁面颜矿,如果想重新加載重新頁面就需要使用$window.location.href
$cacheFactory
相當(dāng)于一個小型數(shù)據(jù)庫,適用于不同控制器之間的數(shù)據(jù)傳遞
$sce
$sce用來配合ng-bind-html來使用來加載html內(nèi)容