AngularJS-1.5

AngularJS的優(yōu)點(diǎn)谅将?

實(shí)現(xiàn)了數(shù)據(jù)积暖、表現(xiàn)去扣、邏輯分離
擴(kuò)展了HTML的功能

什么是MVC风喇?

M:Model 模型——數(shù)據(jù)層
V:View 視圖——表現(xiàn)層
C:Controller 控制器——業(yè)務(wù)邏輯層
實(shí)現(xiàn)各層之間的完全分離宁改,MVC只是手段,目的是實(shí)現(xiàn)代碼的復(fù)用魂莫。

什么是雙向數(shù)據(jù)綁定还蹲?

簡單來說數(shù)據(jù)既可以流入,也可以流出。如ng-model="要綁定的變量"谜喊,可以實(shí)現(xiàn)數(shù)據(jù)的雙向綁定潭兽。

什么是依賴注入?

例如:正常使用的函數(shù)參數(shù)是由使用者決定的斗遏,依賴注入的意思是函數(shù)的參數(shù)是由定義者決定的山卦。某個(gè)對象內(nèi)部需要另一個(gè)對象,由系統(tǒng)根據(jù)需要自動(dòng)注入進(jìn)去最易。

使用controller控制器的注意事項(xiàng)

不要操作DOM(用directive指令操作DOM)
不要做輸入輸出格式化怒坯,這種問題交給表單處理
不要用控制器作用域共享數(shù)據(jù),要使用factory藻懒、service、provider等服務(wù)

ng-bind="要綁定的變量"與模版({{綁定的數(shù)據(jù)}})區(qū)別视译?

ng-bind可以將數(shù)據(jù)寫入到元素內(nèi)嬉荆,并且是覆蓋寫入;模版的寫入更加靈活酷含;共同點(diǎn):與js不能實(shí)現(xiàn)互通鄙早。

學(xué)習(xí)AngularJS的重要事項(xiàng)(非常重要)

angular和JavaScript不互通(函數(shù)不互通、變量也不互通椅亚、事件也不互通)
Angular的開發(fā)模式和傳統(tǒng)開發(fā)模式完全不同限番,Angular是以數(shù)據(jù)為核心,所有的UI交互都通過數(shù)據(jù)的變化來實(shí)現(xiàn)呀舔,Angular接管了UI弥虐,例如value的賦值操作在Angular中會(huì)失效。

ng-app=""的作用是什么媚赖?

確定Angular的作用范圍霜瘪。Angular的模塊。

通過事件對象獲取元素惧磺,并轉(zhuǎn)為jq對象

ng-click="fn(event)"scope.fn=function(event){angular.element(event.target).text("string")}

ng-controller=""的作用是什么颖对?

確定Angular模塊的控制層,這個(gè)控制層可以分為多個(gè)磨隘。做為Angular和JS交互的橋梁缤底。注意:控制器嵌套關(guān)系可以形成作用于鏈,在子類控制器找不到的變量可以從父控制器拷貝一份出來番捂。這時(shí)當(dāng)父變量改變時(shí)个唧,自變量不會(huì)改變。不推薦這種用法白嘁。

ng-init="a=1;b=2"的作用是什么坑鱼?

初始化數(shù)據(jù)。放在父級元素。

ng-include="'xxxxxxxxx'"

可以引入html頁面
或者用ng-include scr="'xxxxxxxxx'"
注意:引入的是一個(gè)string

ng-repeat的內(nèi)置變量

{{index}}//當(dāng)前索引 {{first}}//是否為第一個(gè)元素
{{middle}}//是否為中間的元素 {{last}}//是否為最后一個(gè)元素

$scope的作用是什么鲁沥?

綁定屬性和方法呼股。

$apply()臟檢查的作用?

用于監(jiān)控當(dāng)前控制器scope綁定的屬性是否發(fā)生了變化画恰,如果發(fā)生了變化彭谁,更新View層。scope.$apply()允扇;//檢查所有綁定的屬性是否發(fā)生改變

angular.forEache($scope.屬性,function(item,index){});

在Angular的HTML的三元運(yùn)算符缠局?

模版中可以使用三元運(yùn)算符。

ng-class的兩種使用方式考润?

class="{{數(shù)據(jù)}}"或者ng-class=“數(shù)組”狭园。
class="{{a:表達(dá)式}}"http://表達(dá)式為true,返回類樣式
ng-class-even="'偶數(shù)'"
ng-class-odd="'奇數(shù)'"

ng-switch的用法

        <ul ng-switch on="status">
            <li ng-switch-when="true">true</li>
            <li ng-switch-when="false">false</li>
        </ul>

ng-style的兩種使用方式糊治?

style="{{數(shù)據(jù)(字符串)}}"或者ng-style="JSON數(shù)據(jù)"唱矛。

ng-repeat與ng-事件放在一起使用產(chǎn)生的影響?

會(huì)對ng-事件="變量賦值"井辜,這個(gè)變量賦值會(huì)失效绎谦。

controller中函數(shù)的依賴注入各個(gè)參數(shù)如何使用?

1.scope:用于綁定數(shù)據(jù)和函數(shù)粥脚。 2.http:為Angular的內(nèi)部ajax窃肠;http.get/post/jsopn("url",{params:{a:1,b:2,cb:"callback"},responseType:"json"}).success(function(res){}).error(function(res){})。 3.interval:Angular的內(nèi)部的定時(shí)器刷允;interval(function(){},時(shí)間)冤留;清理定時(shí)器interval.cancel(變量名)。

4.timeout:Angular的內(nèi)部的定時(shí)器恃锉;timeout(function(){},時(shí)間)搀菩;清理定時(shí)器$timeout.cancel(變量名)。

scope中的watch()和$apply()方法如何使用破托?

scope.watch("數(shù)據(jù)變量",function(newValue,oldValue){},true),true為深度監(jiān)視肪跋;scope.apply()在使用Angular以外的代碼更新數(shù)據(jù)時(shí),需要用$apply()手動(dòng)臟檢查土砂。

自帶過濾器的使用

|number:數(shù)字//保留幾位小數(shù)州既,四舍五入
|currency:字符串//例如在數(shù)字前面加¥符號等等 |date:"yyyy-MM-dd hh:mm:ss"http://整理時(shí)間格式 |limitTo:數(shù)字//保留數(shù)組的長度 |lowercase//轉(zhuǎn)小寫 |uppercase//轉(zhuǎn)大寫 |filter:value值//過濾 |filter:自定義方法名scope.自定義方法名=function(obj){//會(huì)遍歷要過濾的每一個(gè)值,根據(jù)return的bool結(jié)果確定哪個(gè)值會(huì)被過濾}
|orderby:字符串//排序,在字符串前加-號為倒序排列

如何在控制器內(nèi)部使用過濾器

filter注入到控制器中 var temp=filter("過濾器名",參數(shù))(要過濾的值);

如何自定義過濾器?

app.filter("name",function(){
這一層的函數(shù)只會(huì)執(zhí)行一次
return function(input,agrs){
業(yè)務(wù)邏輯;(會(huì)根據(jù)過濾器使用次數(shù)而加載)
return 數(shù)據(jù)萝映;
}
})

內(nèi)置指令

如何自定義指令(組件)吴叶?

app.directive("name",function(){ //name中不能含有_ -等特殊字符
return {
restrict :"ECMA", // E:元素 C:class M:注釋 A:屬性 <--! directive:name -->必須帶空格
template:'html',
replace:true, // 是否去掉外殼
transclude:true //包裹
}
})
<span ng-transclude></span>或者<ng-transclude></ng-tansclude> 把html原有的內(nèi)容包裹進(jìn)來

自定義模塊如何使用?

可以通過["模塊的名字1","模塊的名字2","模塊的名字3"]序臂,模塊的依賴注入實(shí)現(xiàn)filter,directive,controller的繼承蚌卤,也可實(shí)現(xiàn)他們的剝離实束。注意:一個(gè)html頁面只能引入一個(gè)模塊。

控制器的自定義依賴注入項(xiàng)如何使用逊彭?

1.factory
app.factory("name",function(){
return 數(shù)據(jù);//可以返回任意類型的數(shù)據(jù)
})
2.provider
app.provider("name",function(){
this.$get=function(){
return 數(shù)據(jù);
}
})
3.service
app.service("name",function(){
this.變量=數(shù)據(jù);//只能返回引用類型
})
4.constant //注意:這個(gè)不能修飾
app.constant("name",數(shù)據(jù));
5.value
app.value("name",數(shù)據(jù))
只有綁定對象才能實(shí)現(xiàn)數(shù)據(jù)共享

如何實(shí)現(xiàn)依賴項(xiàng)的修飾咸灿?

app.decorator("自定義依賴項(xiàng)的名字",function(delegate){ 對delegate進(jìn)行邏輯操作 delegate就是數(shù)據(jù) returndelegate;
})

controller之間的數(shù)據(jù)傳遞(父子關(guān)系)如何實(shí)現(xiàn)?

通過html嵌套實(shí)現(xiàn)controller的父子級關(guān)系侮叮。子控制器可以直接得到父控制器的數(shù)據(jù)避矢。子控制器得到的是父控制器數(shù)據(jù)的拷貝版本。
通過scope.emit("name",數(shù)據(jù)) //向父級發(fā)射數(shù)據(jù)
通過scope.broadcast("name",數(shù)據(jù)) //向子級傳播數(shù)據(jù)
通過scope.on("name",function(event,data){
//data為數(shù)據(jù) event為事件
})

controller之間的數(shù)據(jù)傳遞(非父子關(guān)系)如何實(shí)現(xiàn)囊榜?

通過自定義依賴實(shí)現(xiàn)數(shù)據(jù)的共享审胸。

如何使用路由?

    <script src="引入route.js文件"/>
    <script src="引入路由使用的controller文件"/>
    <a href="#/文件路徑"></a>
    <ng-view></ng-view>
    angular.module("name",["ngRoute"]);
    app.config(function($routeProvider){
            $routeProvider.when().when("/name",{templateUrl:"路徑",controller:"name"}).when();
    })

如何延時(shí)加載卸勺?

    在when()的json里砂沛,resolve:{
            delay:function($q){
                    setTimeout(function(){delay.resolve()},3000)
            }
            return delay.promise
    }

$routeParams功能?

放在controller的依賴中曙求,通過$routeParams.tyep獲取route的name尺上。

routeChangeStart開始、routeChangeSuccess結(jié)束圆到、$routeChangeError失敗,功能卑吭?

scope.on("name",function(){業(yè)務(wù)邏輯})

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末芽淡,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子豆赏,更是在濱河造成了極大的恐慌挣菲,老刑警劉巖,帶你破解...
    沈念sama閱讀 217,509評論 6 504
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件掷邦,死亡現(xiàn)場離奇詭異白胀,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)抚岗,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,806評論 3 394
  • 文/潘曉璐 我一進(jìn)店門或杠,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人宣蔚,你說我怎么就攤上這事向抢。” “怎么了胚委?”我有些...
    開封第一講書人閱讀 163,875評論 0 354
  • 文/不壞的土叔 我叫張陵挟鸠,是天一觀的道長。 經(jīng)常有香客問我亩冬,道長艘希,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,441評論 1 293
  • 正文 為了忘掉前任,我火速辦了婚禮覆享,結(jié)果婚禮上佳遂,老公的妹妹穿的比我還像新娘。我一直安慰自己淹真,他們只是感情好讶迁,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,488評論 6 392
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著核蘸,像睡著了一般巍糯。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上客扎,一...
    開封第一講書人閱讀 51,365評論 1 302
  • 那天祟峦,我揣著相機(jī)與錄音,去河邊找鬼徙鱼。 笑死宅楞,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的袱吆。 我是一名探鬼主播厌衙,決...
    沈念sama閱讀 40,190評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼绞绒!你這毒婦竟也來了婶希?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,062評論 0 276
  • 序言:老撾萬榮一對情侶失蹤蓬衡,失蹤者是張志新(化名)和其女友劉穎喻杈,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體狰晚,經(jīng)...
    沈念sama閱讀 45,500評論 1 314
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡筒饰,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,706評論 3 335
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了壁晒。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片瓷们。...
    茶點(diǎn)故事閱讀 39,834評論 1 347
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖讨衣,靈堂內(nèi)的尸體忽然破棺而出换棚,到底是詐尸還是另有隱情,我是刑警寧澤反镇,帶...
    沈念sama閱讀 35,559評論 5 345
  • 正文 年R本政府宣布固蚤,位于F島的核電站,受9級特大地震影響歹茶,放射性物質(zhì)發(fā)生泄漏夕玩。R本人自食惡果不足惜你弦,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,167評論 3 328
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望燎孟。 院中可真熱鬧禽作,春花似錦、人聲如沸揩页。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,779評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽爆侣。三九已至萍程,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間兔仰,已是汗流浹背茫负。 一陣腳步聲響...
    開封第一講書人閱讀 32,912評論 1 269
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留乎赴,地道東北人忍法。 一個(gè)月前我還...
    沈念sama閱讀 47,958評論 2 370
  • 正文 我出身青樓,卻偏偏與公主長得像榕吼,于是被迫代替她去往敵國和親饿序。 傳聞我的和親對象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,779評論 2 354

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