2018-09-21 Angular.js

1.什么是abngular缭裆?

基于javascript開發(fā)的客戶端應(yīng)用框架键闺,,使我們可以更加快捷澈驼,簡單的開發(fā)web應(yīng)用

不適用于 做酷酷的特效辛燥,可視化的圖形界面,比較適合前后端的數(shù)據(jù)交互的一些方案缝其。

2.? angular.js的特性:

? MVC模式? ? ? ? 指令系統(tǒng)? ? ? 模塊系統(tǒng)? ? ? 雙向數(shù)據(jù)綁定? ? ? ? ? 依賴注入

? MVC 模式:

? M: module 模塊

? V:view 視圖

? C: controller 控制器

3.angular指令

ng-repeat 指令會重復(fù)一個html元素:

ng-app指令 :定義一個angular應(yīng)用程序的范圍

ng-click指令 : angular中點(diǎn)擊事

ng-model指令: 把元素值或者數(shù)據(jù) 綁定到運(yùn)用程序 (數(shù)據(jù)綁定)

ng-bind指令: 把運(yùn)用 程序數(shù)據(jù)綁定到html 視圖:

ng-init : 給angular.js應(yīng)用程序初始化變量

ng-class 指令的值可以是字符串挎塌,對象,或一個數(shù)組内边。

4.angular方法

1 angular.element()? 該方法用來獲取某個元素(內(nèi)置方法)

2 angular.equals() 該方法用來比較兩個元素或?qū)ο?/p>

3 forEach() 該方法用來遍歷? 接受3個參數(shù) : 參數(shù)一: 要遍歷的對象 榴都,

參數(shù)二 : 回調(diào)函數(shù)? ,參數(shù)三 : 新的對象

4 fromJson() 和 toJson()都是用來轉(zhuǎn)換json數(shù)據(jù)格式的漠其。相當(dāng)于之前的 JSON.parse() 和JSON.stringify()

5 angular.bind() 更改this指向嘴高。 該方法返回3個參數(shù) 參數(shù)一 :綁定對象?

參數(shù)二:被綁定的function? 參數(shù)三:傳入的參數(shù) (可選)

6 angular.copy() ;該方法用來拷貝對象竿音;

7 angular.extend();繼承對象拴驮。 參數(shù)一: 繼承對象? 參數(shù)二:被繼承對象

8 判斷是否為數(shù)組: isArray()

9 判斷是否為日期對象:? isDate()

10判斷是否為數(shù)字:? ? ? isNumber()

5.angular過濾器

angular.js過濾器用于轉(zhuǎn)換數(shù)據(jù)春瞬,使用一個管道字符添加到表達(dá)式和指令中

1 currency : 格式化數(shù)據(jù)為貨幣格式

2 filter: {"name":"北"}從數(shù)組中選擇一個子集

3 lowercase : 格式化字符串為小寫

4 uppercase : 格式化字符串為大寫

5 orderBy : 根據(jù)某個表達(dá)式排列數(shù)組 | orderBy: '-id'

6 limitTo 截取? | limitTo:5? 從前面截取5位 -5從后面截取5位

7 date格式化 | date:"yyyy-MM-dd HH:mm:ss"? 轉(zhuǎn)化數(shù)字為日期格式

8 number 格式化保留小數(shù) 34567.6457678 | number:3 保留3位

1、在AngularJS{{}}和ng-bind區(qū)別

? 在AngularJS中顯示模型中的數(shù)據(jù)有兩種方式:一種方式是使用{{}},另一種是基于屬性的指令ng-bind,主要的區(qū)別是ng-Bind只能單個綁定變量套啤,而{{ }}可以多個綁定變量宽气;

使用{{}}加載數(shù)據(jù)時,刷新頁面纲岭,此時數(shù)據(jù)如果還沒展現(xiàn)出來抹竹,結(jié)構(gòu)是能被看到的!會看到這個{{text}}

2止潮、ng-if,ng-show,ng-hide區(qū)別

ng-if 指令用于在表達(dá)式為 false 時移除 HTML 元素(如果 if 語句執(zhí)行的結(jié)果為 true窃判,會添加移除元素,并顯示喇闸。ng-if 指令不同于ng-show袄琳, ng-hide,ng-show將隱藏元素顯示燃乍, ng-hide 隱藏元素唆樊,而 ng-if 是從 DOM 中移除元素。

3刻蟹、$scope 和$rootScope 區(qū)別

? ? ? ? $rootScope針對全局的作用域生效

? ? ? $scope只針對當(dāng)前的controller作用域生效

4逗旁、簡寫$http,post舆瘪、get請求

$http.get().then(successCallback, errorCallback);

$http.post().then(successCallback, errorCallback);

5片效、創(chuàng)建名為one 的服務(wù),將變量轉(zhuǎn)換為2進(jìn)制

app.service('one', function() {

? ? this.myFunc = function (x) {

? ? ? ? return x.toString(2);

? ? }

});

6、自帶過濾器

? ? 1. currency (貨幣處理)

  2. date (日期格式化)

  3. filter(匹配子串)

5. limitTo(限制數(shù)組長度或字符串長度)

6. lowercase(小寫)

  7. uppercase(大寫)

  8. number(格式化數(shù)字)

9. orderBy(排序)

12英古、寫出5個angular自帶的指令淀衣,說明其含義。

ng-if? 如果條件為 false 移除 HTML 元素

? ? ng-focus 規(guī)定聚焦事件的行為

ng-click? 定義元素被點(diǎn)擊時的行為

ng-bind? 綁定 HTML 元素到應(yīng)用程序數(shù)據(jù)

ng-class? 指定 HTML 元素使用的 CSS 類

ng-route和ui-route的區(qū)別:

? ? 1.存儲視圖的方式不同:ng-route-----? ng-view單路由

ui-route--------ui-view雙路由

? ? 2.設(shè)置跳轉(zhuǎn)路徑的方式不一樣:

ng-route用<a herf="#shouye">

ui-route? <a ui-serf="shoue">

? ? 2.配置狀態(tài):ng-route-----? $when

? ? ui-route--------$state

? ? 3.參數(shù):$routeParams-------$stateParams

? ? 4.依賴注入:$routeProvider-------$stateProvider

? ? 5.ng-route不能嵌套更深層次的路由? ? ?

? ? ? ? ui-route可以嵌套更深層次的路由? 也就是路由嵌套路由(二級路由? 三級路由)專業(yè)一點(diǎn)說就是多視圖路由?

1是什么

2.為什么要用他

3.怎么使用它

4.什么時候使用

7召调、angular.js的四大特性膨桥?

? angularJs共有4大特性:1、MVC架構(gòu)模式 2唠叛、模塊化3只嚣、雙向數(shù)據(jù)綁定 4、指令系統(tǒng)

8艺沼、angular 中模塊是有什么作用

? 模塊定義了一個應(yīng)用程序册舞。

? 模塊是應(yīng)用程序中不同部分的容器。

? 模塊是應(yīng)用控制器的容器澳厢。

? 控制器通常屬于一個模塊环础。

9、angular中控制器有哪些作用

? ? AngularJS 控制器 控制 AngularJS 應(yīng)用程序的數(shù)據(jù)。

? ? AngularJS 控制器是常規(guī)的 JavaScript 對象。

? ? AngularJS 應(yīng)用程序被控制器控制

10于毙、ng-app有哪些作用纷跛?ng-repeat的作用什么

ng-app: 初始化一個應(yīng)用程序,是告訴子元素一下的指令是歸angularJs的宣虾,angularJs會識別的。

ng-repeat:ng-repeat 指令用于循環(huán)輸出指定次數(shù)的 HTML 元素。集合必須是數(shù)組或?qū)ο?/p>

11角雷、angular中SPA代表的是什么?

單頁面應(yīng)用程序(Single Page Application)

12性穿、自定義一個過濾器勺三,實(shí)現(xiàn)字符串反轉(zhuǎn)效果? 123->321

? app.filter(“reverse”,function(){

return function(text){

Return text.split(“”).reverse().join(“”);

}

}

13、 Angular中自帶的服務(wù) :服務(wù)是一個函數(shù)或?qū)ο笮柙稍谀愕?AngularJS 應(yīng)用中使用吗坚。

? $location?服務(wù)? 它可以返回當(dāng)前頁面的 URL 地址。

$http?服務(wù)? ? 服務(wù)向服務(wù)器發(fā)送請求呆万,應(yīng)用響應(yīng)服務(wù)器傳送過來的數(shù)據(jù)商源。

$timeout?服務(wù)? 相當(dāng)于 ?window.setTimeout?函數(shù)。

?$interval?服務(wù)? 相當(dāng)于? window.setInterval?函數(shù)谋减。

? ? ng-controller 指令定義了應(yīng)用程序控制器牡彻。

? ? ng-controller="myCtrl" 屬性是一個 AngularJS 指令。用于定義一個控制器出爹。

14庄吼、restrict的值分別代表什么?

? ? Restrict : 限制自定義指令調(diào)用方式以政;

? ? ? ? E: element 元素

? ? ? ? C:? class 類名

? ? ? ? M:? 注釋

? ? ? ? A:? attribute 屬性

15? 簡述實(shí)現(xiàn)一個完整路由的步驟

? ? 1霸褒、載入了實(shí)現(xiàn)路由的 js 文件:angular-route.js。

2盈蛮、注入 ngRoute 模塊作為主應(yīng)用模塊的依賴模塊废菱。

angular.module('routingDemoApp',['ngRoute'])

3、使用 ngView 指令抖誉。

<div ng-view></div>? 該 div 內(nèi)的 HTML 內(nèi)容會根據(jù)路由的變化而變化殊轴。

4、配置 $routeProvider袒炉,AngularJS $routeProvider 用來定義路由規(guī)則旁理。

? 自定義指令配置項(xiàng)當(dāng)中scope的值有哪些,分別代表什么意思

? $scope分為 @我磁,=孽文,& 三種情況驻襟。個人認(rèn)為@:單向綁定,=:雙向綁定芋哭,&: 用于綁定函數(shù)沉衣。

16? angular的優(yōu)點(diǎn)有哪些?

? 模板功能強(qiáng)大豐富减牺,豌习,自帶了豐富的Angular指令;

?2. 是一個比較完善的前端MVC框架拔疚,包含模板肥隆,數(shù)據(jù)雙向綁定,路由稚失,模塊化栋艳,服務(wù),過濾器墩虹,依賴注入等所有功能嘱巾;?

3. 自定義Directive(指令),比jQuery插件還靈活诫钓。?

4. ng模塊化能夠很容易的寫出可復(fù)用的代碼~

17? angular中“依賴注入”你是如何理解的旬昭?

一個AngularJS應(yīng)用程序中的一些組件可能會依賴于其它組件,例如菌湃,控制器需要使用 $scope 組件问拘,使得控制器可以向視圖傳遞數(shù)據(jù),即控制器依賴于 $scope 組件來執(zhí)行工作惧所。

<script> ... myApp.controller('myCtrl', ['$scope',function($scope){ //在此定義controller的邏輯 }]); ... </script>

18? angular 的數(shù)據(jù)綁定采用什么機(jī)制骤坐?

ng-model 雙向綁定

? 寫出5個angular動畫當(dāng)中可以自動添加類名的指令

a、適用于ng-if ng-view

進(jìn)入運(yùn)動的過程

.ng-enter

.ng-enter-active

離開運(yùn)動的過程

.ng-leave

.ng-leave-active

B下愈、適用于ng-show ng-hide

? 顯示元素時

? .ng-hide-remove

? .ng-hide-remove-active

? 隱藏元素時

? .ng-hide-add

? .ng-hide-add-active

? 簡述自定義指令的作用

? 可定義方法操作DOM? 封裝模塊纽绍、第三方組件、使代碼更簡潔势似。

19拌夏、angular 的缺點(diǎn)有哪些?

1. 驗(yàn)證功能錯誤信息顯示比較薄弱履因,

2. ngView只能有一個障簿,不能嵌套多個視圖

?3. 對于特別復(fù)雜的應(yīng)用場景,貌似性能有點(diǎn)問題


20. SPA是什么?路由有什么作用?

單頁面應(yīng)用程序

通過不同的url訪問不同的內(nèi)容栅迄,實(shí)現(xiàn)多視圖的單頁面web應(yīng)用

21. 簡述 angular s臟檢查機(jī)制?

雙向數(shù)據(jù)綁定機(jī)制

頁面的操作能更改數(shù)據(jù)站故,數(shù)據(jù)的變化也能在頁面呈現(xiàn),

頁面到數(shù)據(jù)的更改是有UI事件和ajax請求等回調(diào)操作毅舆,

而數(shù)據(jù)到頁面則由臟檢測來做

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末西篓,一起剝皮案震驚了整個濱河市愈腾,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌岂津,老刑警劉巖顶滩,帶你破解...
    沈念sama閱讀 217,542評論 6 504
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異寸爆,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)盐欺,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,822評論 3 394
  • 文/潘曉璐 我一進(jìn)店門赁豆,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人冗美,你說我怎么就攤上這事魔种。” “怎么了粉洼?”我有些...
    開封第一講書人閱讀 163,912評論 0 354
  • 文/不壞的土叔 我叫張陵节预,是天一觀的道長。 經(jīng)常有香客問我属韧,道長安拟,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,449評論 1 293
  • 正文 為了忘掉前任宵喂,我火速辦了婚禮糠赦,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘锅棕。我一直安慰自己拙泽,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,500評論 6 392
  • 文/花漫 我一把揭開白布裸燎。 她就那樣靜靜地躺著顾瞻,像睡著了一般。 火紅的嫁衣襯著肌膚如雪德绿。 梳的紋絲不亂的頭發(fā)上荷荤,一...
    開封第一講書人閱讀 51,370評論 1 302
  • 那天,我揣著相機(jī)與錄音脆炎,去河邊找鬼梅猿。 笑死,一個胖子當(dāng)著我的面吹牛秒裕,可吹牛的內(nèi)容都是我干的袱蚓。 我是一名探鬼主播,決...
    沈念sama閱讀 40,193評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼几蜻,長吁一口氣:“原來是場噩夢啊……” “哼喇潘!你這毒婦竟也來了体斩?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,074評論 0 276
  • 序言:老撾萬榮一對情侶失蹤颖低,失蹤者是張志新(化名)和其女友劉穎絮吵,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體忱屑,經(jīng)...
    沈念sama閱讀 45,505評論 1 314
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡蹬敲,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,722評論 3 335
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了莺戒。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片伴嗡。...
    茶點(diǎn)故事閱讀 39,841評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖从铲,靈堂內(nèi)的尸體忽然破棺而出瘪校,到底是詐尸還是另有隱情,我是刑警寧澤名段,帶...
    沈念sama閱讀 35,569評論 5 345
  • 正文 年R本政府宣布阱扬,位于F島的核電站,受9級特大地震影響伸辟,放射性物質(zhì)發(fā)生泄漏麻惶。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,168評論 3 328
  • 文/蒙蒙 一信夫、第九天 我趴在偏房一處隱蔽的房頂上張望用踩。 院中可真熱鬧,春花似錦忙迁、人聲如沸脐彩。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,783評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽惠奸。三九已至,卻和暖如春恰梢,著一層夾襖步出監(jiān)牢的瞬間佛南,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,918評論 1 269
  • 我被黑心中介騙來泰國打工嵌言, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留嗅回,地道東北人。 一個月前我還...
    沈念sama閱讀 47,962評論 2 370
  • 正文 我出身青樓摧茴,卻偏偏與公主長得像绵载,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,781評論 2 354

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