AngularJS-1.5

AngularJS的優點?

實現了數據、表現、邏輯分離
擴展了HTML的功能

什么是MVC?

M:Model 模型——數據層
V:View 視圖——表現層
C:Controller 控制器——業務邏輯層
實現各層之間的完全分離,MVC只是手段,目的是實現代碼的復用。

什么是雙向數據綁定?

簡單來說數據既可以流入,也可以流出。如ng-model="要綁定的變量",可以實現數據的雙向綁定。

什么是依賴注入?

例如:正常使用的函數參數是由使用者決定的,依賴注入的意思是函數的參數是由定義者決定的。某個對象內部需要另一個對象,由系統根據需要自動注入進去。

使用controller控制器的注意事項

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

ng-bind="要綁定的變量"與模版({{綁定的數據}})區別?

ng-bind可以將數據寫入到元素內,并且是覆蓋寫入;模版的寫入更加靈活;共同點:與js不能實現互通。

學習AngularJS的重要事項(非常重要)

angular和JavaScript不互通(函數不互通、變量也不互通、事件也不互通)
Angular的開發模式和傳統開發模式完全不同,Angular是以數據為核心,所有的UI交互都通過數據的變化來實現,Angular接管了UI,例如value的賦值操作在Angular中會失效。

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

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

通過事件對象獲取元素,并轉為jq對象

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

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

確定Angular模塊的控制層,這個控制層可以分為多個。做為Angular和JS交互的橋梁。注意:控制器嵌套關系可以形成作用于鏈,在子類控制器找不到的變量可以從父控制器拷貝一份出來。這時當父變量改變時,自變量不會改變。不推薦這種用法。

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

初始化數據。放在父級元素。

ng-include="'xxxxxxxxx'"

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

ng-repeat的內置變量

{{index}}//當前索引 {{first}}//是否為第一個元素
{{middle}}//是否為中間的元素 {{last}}//是否為最后一個元素

$scope的作用是什么?

綁定屬性和方法。

$apply()臟檢查的作用?

用于監控當前控制器scope綁定的屬性是否發生了變化,如果發生了變化,更新View層。scope.$apply();//檢查所有綁定的屬性是否發生改變

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

在Angular的HTML的三元運算符?

模版中可以使用三元運算符。

ng-class的兩種使用方式?

class="{{數據}}"或者ng-class=“數組”。
class="{{a:表達式}}"http://表達式為true,返回類樣式
ng-class-even="'偶數'"
ng-class-odd="'奇數'"

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="{{數據(字符串)}}"或者ng-style="JSON數據"。

ng-repeat與ng-事件放在一起使用產生的影響?

會對ng-事件="變量賦值",這個變量賦值會失效。

controller中函數的依賴注入各個參數如何使用?

1.scope:用于綁定數據和函數。 2.http:為Angular的內部ajax;http.get/post/jsopn("url",{params:{a:1,b:2,cb:"callback"},responseType:"json"}).success(function(res){}).error(function(res){})。 3.interval:Angular的內部的定時器;interval(function(){},時間);清理定時器interval.cancel(變量名)。

4.timeout:Angular的內部的定時器;timeout(function(){},時間);清理定時器$timeout.cancel(變量名)。

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

scope.watch("數據變量",function(newValue,oldValue){},true),true為深度監視;scope.apply()在使用Angular以外的代碼更新數據時,需要用$apply()手動臟檢查。

自帶過濾器的使用

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

如何在控制器內部使用過濾器

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

如何自定義過濾器?

app.filter("name",function(){
這一層的函數只會執行一次
return function(input,agrs){
業務邏輯;(會根據過濾器使用次數而加載)
return 數據;
}
})

內置指令

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

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原有的內容包裹進來

自定義模塊如何使用?

可以通過["模塊的名字1","模塊的名字2","模塊的名字3"],模塊的依賴注入實現filter,directive,controller的繼承,也可實現他們的剝離。注意:一個html頁面只能引入一個模塊。

控制器的自定義依賴注入項如何使用?

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

如何實現依賴項的修飾?

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

controller之間的數據傳遞(父子關系)如何實現?

通過html嵌套實現controller的父子級關系。子控制器可以直接得到父控制器的數據。子控制器得到的是父控制器數據的拷貝版本。
通過scope.emit("name",數據) //向父級發射數據
通過scope.broadcast("name",數據) //向子級傳播數據
通過scope.on("name",function(event,data){
//data為數據 event為事件
})

controller之間的數據傳遞(非父子關系)如何實現?

通過自定義依賴實現數據的共享。

如何使用路由?

    <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();
    })

如何延時加載?

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

$routeParams功能?

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

routeChangeStart開始、routeChangeSuccess結束、$routeChangeError失敗,功能?

scope.on("name",function(){業務邏輯})

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 230,321評論 6 543
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 99,559評論 3 429
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 178,442評論 0 383
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 63,835評論 1 317
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 72,581評論 6 412
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 55,922評論 1 328
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,931評論 3 447
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 43,096評論 0 290
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 49,639評論 1 336
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 41,374評論 3 358
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 43,591評論 1 374
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 39,104評論 5 364
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,789評論 3 349
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 35,196評論 0 28
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 36,524評論 1 295
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 52,322評論 3 400
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 48,554評論 2 379

推薦閱讀更多精彩內容