最近學(xué)習(xí)angularjs基礎(chǔ)來配合ionic開發(fā)

指令

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

MVC.png

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ù)

  1. provider:這種服務(wù)必須寫this.$get = function(){};同時 這也是唯一一種能傳入config的服務(wù)舍杜,如果你要在service啟動之前要對模塊范圍進(jìn)行配置,這就必要用到provider了
  2. factory:可以直接返回字符串
  3. 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)容

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末嫉晶,一起剝皮案震驚了整個濱河市骑疆,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌替废,老刑警劉巖箍铭,帶你破解...
    沈念sama閱讀 218,386評論 6 506
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異椎镣,居然都是意外死亡诈火,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,142評論 3 394
  • 文/潘曉璐 我一進(jìn)店門状答,熙熙樓的掌柜王于貴愁眉苦臉地迎上來冷守,“玉大人,你說我怎么就攤上這事惊科∨囊。” “怎么了?”我有些...
    開封第一講書人閱讀 164,704評論 0 353
  • 文/不壞的土叔 我叫張陵馆截,是天一觀的道長充活。 經(jīng)常有香客問我蜂莉,道長,這世上最難降的妖魔是什么混卵? 我笑而不...
    開封第一講書人閱讀 58,702評論 1 294
  • 正文 為了忘掉前任映穗,我火速辦了婚禮,結(jié)果婚禮上淮菠,老公的妹妹穿的比我還像新娘男公。我一直安慰自己,他們只是感情好合陵,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,716評論 6 392
  • 文/花漫 我一把揭開白布枢赔。 她就那樣靜靜地躺著,像睡著了一般拥知。 火紅的嫁衣襯著肌膚如雪踏拜。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,573評論 1 305
  • 那天低剔,我揣著相機(jī)與錄音速梗,去河邊找鬼。 笑死襟齿,一個胖子當(dāng)著我的面吹牛姻锁,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播猜欺,決...
    沈念sama閱讀 40,314評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼位隶,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了开皿?” 一聲冷哼從身側(cè)響起涧黄,我...
    開封第一講書人閱讀 39,230評論 0 276
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎赋荆,沒想到半個月后笋妥,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,680評論 1 314
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡窄潭,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,873評論 3 336
  • 正文 我和宋清朗相戀三年春宣,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片嫉你。...
    茶點(diǎn)故事閱讀 39,991評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡信认,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出均抽,到底是詐尸還是另有隱情,我是刑警寧澤其掂,帶...
    沈念sama閱讀 35,706評論 5 346
  • 正文 年R本政府宣布油挥,位于F島的核電站,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏深寥。R本人自食惡果不足惜攘乒,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,329評論 3 330
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望惋鹅。 院中可真熱鬧则酝,春花似錦、人聲如沸闰集。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,910評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽武鲁。三九已至爽雄,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間沐鼠,已是汗流浹背挚瘟。 一陣腳步聲響...
    開封第一講書人閱讀 33,038評論 1 270
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留饲梭,地道東北人乘盖。 一個月前我還...
    沈念sama閱讀 48,158評論 3 370
  • 正文 我出身青樓,卻偏偏與公主長得像憔涉,于是被迫代替她去往敵國和親订框。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,941評論 2 355

推薦閱讀更多精彩內(nèi)容

  • AngularJS是什么监氢?AngularJs(后面就簡稱ng了)是一個用于設(shè)計(jì)動態(tài)web應(yīng)用的結(jié)構(gòu)框架布蔗。首先,它是...
    200813閱讀 1,607評論 0 3
  • 通過AngularJS仿豆瓣一刻的案例:https://github.com/zhongxiaolian/doub...
    中小戀閱讀 1,759評論 1 21
  • AngularJS是什么 AngularJS的官方文檔這樣介紹它: 完全使用JavaScript編寫的客戶端技術(shù)浪腐。...
    oWSQo閱讀 1,313評論 0 10
  • ng-model 指令ng-model 指令 綁定 HTML 元素 到應(yīng)用程序數(shù)據(jù)纵揍。ng-model 指令也可以:...
    壬萬er閱讀 869評論 0 2
  • 國慶長假馬上就要到了。許多人都在籌劃著旅游的事情议街,我的行程嗎泽谨?當(dāng)然是回家啊。 上周臨走的時候特漩,S媽媽給我們裝東西帶...
    這一只果是大小姐閱讀 330評論 0 0