一、ng-show/ng-hide 與 ng-if的區(qū)別？
我們都知道ng-show/ng-hide
實(shí)際上是通過display
來進(jìn)行隱藏和顯示的。而ng-if
實(shí)際上控制dom
節(jié)點(diǎn)的增刪除來實(shí)現(xiàn)的。因此如果我們是根據(jù)不同的條件來進(jìn)行dom
節(jié)點(diǎn)的加載的話，那么ng-if
的性能好過ng-show
.
二、解釋下什么是$rootScrope以及和$scope的區(qū)別？
通俗的說$rootScrope
頁面所有$scope
的父親。
我們來看下如何產(chǎn)生$rootScope
和$scope
吧。
step1:Angular解析ng-app
然后在內(nèi)存中創(chuàng)建$rootScope
。
step2:angular回繼續(xù)解析，找到{{}}
表達(dá)式，并解析成變量。
step3:接著會(huì)解析帶有ng-controller
的div然后指向到某個(gè)controller
函數(shù)。這個(gè)時(shí)候在這個(gè)controller
函數(shù)變成一個(gè)$scope
對(duì)象實(shí)例。
三、表達(dá)式 {{yourModel}}是如何工作的？
它依賴于 $interpolation
服務(wù)，在初始化頁面html后，它會(huì)找到這些表達(dá)式，并且進(jìn)行標(biāo)記，于是每遇見一個(gè){{}}
，則會(huì)設(shè)置一個(gè)$watch
。而$interpolation
會(huì)返回一個(gè)帶有上下文參數(shù)的函數(shù)，最后該函數(shù)執(zhí)行，則算是表達(dá)式$parse
到那個(gè)作用域上。
四、Angular中的digest周期是什么？
每個(gè)digest
周期中，angular總會(huì)對(duì)比scope
上model
的值，一般digest
周期都是自動(dòng)觸發(fā)的，我們也可以使用$apply
進(jìn)行手動(dòng)觸發(fā)。
五、 如何取消 $timeout, 以及停止一個(gè)$watch()?
停止 $timeout我們可以用cancel:
var customTimeout = $timeout(function () {
// your code
}, 1000);
$timeout.cancel(customTimeout);
停掉一個(gè)$watch：
// .$watch() 會(huì)返回一個(gè)停止注冊(cè)的函數(shù)
function that we store to a variable
var deregisterWatchFn = $rootScope.$watch(‘someGloballyAvailableProperty', function (newVal) {
if (newVal) {
// we invoke that deregistration function, to disable the watch
deregisterWatchFn();
...
}
});
六、Angular Directive中restrict 中分別可以怎樣設(shè)置？scope中@,=,&有什么區(qū)別？
restrict
中可以分別設(shè)置:
A匹配屬性
E匹配標(biāo)簽
C匹配class
M 匹配注釋
當(dāng)然你可以設(shè)置多個(gè)值比如AEC
,進(jìn)行多個(gè)匹配。
在scope
中，@,=,&在進(jìn)行值綁定時(shí)分別表示
@獲取一個(gè)設(shè)置的字符串，它可以自己設(shè)置的也可以使用{{yourModel}}
進(jìn)行綁定的;
= 雙向綁定，綁定scope
上的一些屬性；
& 用于執(zhí)行父級(jí)scope
上的一些表達(dá)式，常見我們?cè)O(shè)置一些需要執(zhí)行的函數(shù)
angular.module('docsIsolationExample', [])
.controller('Controller', ['$scope', function($scope) {
$scope.alertName = function() {
alert('directive scope &');
}
}])
.directive('myCustomer', function() {
return {
restrict: 'E',
scope: {
clickHandle: '&'
},
template: '<button ng-click="testClick()">Click Me</button>',
controller: function($scope) {
$scope.testClick = function() {
$scope.clickHandle();
}
}
};
});
<div ng-app="docsIsolationExample">
<div ng-controller="Controller">
<my-customer click-handle="alertName()"></my-customer>
</div>
</div>
< 進(jìn)行單向綁定。
七、 列出至少三種實(shí)現(xiàn)不同模塊之間通信方式？
1、Service
2、events,指定綁定的事件
3、使用 $rootScope
4、controller之間直接使用$parent, $$childHead等
5、directive 指定屬性進(jìn)行數(shù)據(jù)綁定
八、有哪些措施可以改善Angular 性能
官方提倡的，關(guān)閉debug,$compileProvider
myApp.config(function ($compileProvider) {
$compileProvider.debugInfoEnabled(false);
});
使用一次綁定表達(dá)式即{{::yourModel}}
減少watcher數(shù)量
在無限滾動(dòng)加載中避免使用ng-repeat
使用性能測(cè)試的小工具去挖掘你的angular性能問題，我們可以使用簡(jiǎn)單的console.time()
也可以借助開發(fā)者工具以及Batarang
console.time("TimerName");
//your code
console.timeEnd("TimerName");
九、你認(rèn)為在Angular中使用jQuery好么？
這是一個(gè)開放性的問題，盡管網(wǎng)上會(huì)有很多這樣的爭(zhēng)論，但是普遍還是認(rèn)為這并不是一個(gè)特別好的嘗試。其實(shí)當(dāng)我們學(xué)習(xí)Angular的時(shí)候，我們應(yīng)該做到從0去接受angular的思想，數(shù)據(jù)綁定，使用angular自帶的一些api，合理的路由組織和，寫相關(guān)指令和服務(wù)等等。angular自帶了很多api可以完全替代掉jquery中常用的api，我們可以使用angular.element，$http,$timeout,ng-init等。
我們不妨再換個(gè)角度，如果業(yè)務(wù)需求，而對(duì)于一個(gè)新人（比較熟悉jQuery）的話，或許你引入jQuery可以讓它在解決問題，比如使用插件上有更多的選擇，當(dāng)然這是通過影響代碼組織來提高工作效率，隨著對(duì)于angular理解的深入，在重構(gòu)時(shí)會(huì)逐漸摒棄掉當(dāng)初引入jquery時(shí)的一些代碼。(??Po主就是這樣的人，希望不要被嘲笑，業(yè)務(wù)卻是趕著走)
所以我覺得兩種框架說完全不能一起用肯定是錯(cuò)的，但是我們還是應(yīng)該盡力去遵循angular的設(shè)計(jì)。
十、如何進(jìn)行angular的單元測(cè)試
我們可以使用karam＋jasmine 進(jìn)行單元測(cè)試,我們通過ngMock引入angular app然后自行添加我們的測(cè)試用例。 一段簡(jiǎn)單的測(cè)試代碼：
describe('calculator', function () {
beforeEach(module('calculatorApp'));
var $controller;
beforeEach(inject(function($controller){
$controller = $controller;
}));
describe('sum', function () {
it('1 + 1 should equal 2', function () {
var $scope = {};
var controller = $controller('CalculatorController', { $scope: $scope });
$scope.x = 1;
$scope.y = 2;
$scope.sum();
expect($scope.z).toBe(3);
});
});
});
