Comments (1)
29 AngularJS Interview Questions – Can You Answer Them All?
1. 对angular的filter过滤器进行单元测试的基本步骤?
- 注入包含filter的模块
- 加载filter依赖的mocks相关js
- 获取filter实例去使用$filter('filtername')
- 编写预期的结果
2.watches存放最大的数量是多少,怎么保持一个可观的数量?
- 为了减少内存消耗和提升性能,应该限制watches数量在2000以内;使用
ng-stats
插件可以帮助跟踪watches的数量和digest循环。
3.控制器之间怎么传递数据?
- 创建services,利用services进行数据传递
- 使用events传递($emit/$broadcast)
- 使用$rootScope传递
- 使用$parent/nextSibling/controllerAs传递
4.ng-if
和ng-show/ng-hide
的不同?
ng-show/ng-hide
总是会插入到DOM中,通过条件判断来决定display的属性值显示与否;ng-if
根据条件判断是否插入到DOM中;当我们判断是否显示DOM的时候,用ng-if
总是比ng-show/ng-hide
效果好。
5.AngularJS的digest循环是什么?
- 每一次的
digest
的循环,AngularJS会对scope数据值进行新老值的比较;digest
循环是自动触发的,也可以通过$apply
手动触发digest
循环。
For more information, take a look in the ng-book explanation: The Digest Loop and $apply
6.使用AngularJS在哪儿实现DOM操作?
- 指令。DOM操作不应该出现控制器、服务、或其他地方。
Here is a detailed explanation
7.混合使用AngularJS和jQuery好还是不好?
- 肯定是不好的。我们应该远离jQuery,AngularJS有和jQuery类似的方法去操作DOM
8.如果要从1.4迁移到1.5,主要重构的事情是什么?
- 将
directive
和component
适配成1.5的components
9.怎么实现单向绑定
- {{::value}}
10.单向绑定和双向绑定有什么区别
- 略
11.解释一下$scope.$apply()
是怎么工作的?
$scope.$apply()
是AngularJS的一个核心方法,强制angular引擎运行所有watch上的变量。
12.使用什么指令可以通过移除DOM上的元素而不改变样式来隐藏元素?
ng-if
13.什么使得angular.copy()如此强大?
- 变量的深拷贝
14. 怎样使AngularJS的services返回一个promise?
angular.factory('testService', function($q){
return {
getName: function(){
var deferred = $q.defer();
//API call here that returns data
testAPI.getName().then(function(name){
deferred.resolve(name)
});
return deferred.promise;
}
}
});
15.略
16. 指令的类型都有哪些?如何使用?
- 创建指令的时候,使用
restrict
来指定指令的类型:A/E/C/M
17.什么时候使用属性?什么时候使用元素?
- 创建component时使用元素,装饰或添加新功能使用属性。
18.如何重置$timeout/$interval
,如何取消$watch
?
var customTimeout = $timeout(function () {
// arbitrary code
}, 55);
$timeout.cancel(customTimeout);
///////
var deregisterWatchFn = $scope.$on(‘$destroy’, function () {
// we invoke that deregistration function, to disable the watch
deregisterWatchFn();
});
19.解释$scope
是什么?
- Scope是js对象,是表达式的执行上下文;Scopes被设置成层级结构,和DOM结构类似;Scope可以监测表达式和传播事件;Scope作为控制器和视图的一种桥梁。
20.指令是什么?
- 指令是一种作为DOM元素的标记,用于指示AngularJS的$compile服务绑定特定的行为到DOM元素上,或将碎片模板转换成DOM元素。
21.DDO (Directive Definition Object)是什么?
- DDO是创建指令的使用的一个Object对象,创建指令的对象有以下参数:
var directiveDefinitionObject = {
priority: 0,
template: '<div></div>', // or // function(tElement, tAttrs) { ... },
// or
// templateUrl: 'directive.html', // or // function(tElement, tAttrs) { ... },
transclude: false,
restrict: 'A',
templateNamespace: 'html',
scope: false,
controller: function($scope, $element, $attrs, $transclude, otherInjectables) { ... },
controllerAs: 'stringIdentifier',
bindToController: false,
require: 'siblingDirectiveName', // or // ['^parentDirectiveName', '?optionalDirectiveName', '?^optionalParent'],
compile: function compile(tElement, tAttrs, transclude) {
return {
pre: function preLink(scope, iElement, iAttrs, controller) { ... },
post: function postLink(scope, iElement, iAttrs, controller) { ... }
}
// or
// return function postLink( ... ) { ... }
},
// or
// link: {
// pre: function preLink(scope, iElement, iAttrs, controller) { ... },
// post: function postLink(scope, iElement, iAttrs, controller) { ... }
// }
// or
// link: function postLink( ... ) { ... }
};"
22. 什么是单例模式?在AngularJS中哪里使用到这种模式?
- 使用一次或多次使用类时只实例化一次对象。在DI和services中经常使用到单例。
23. interceptor是什么?哪里使用的比较多?
- interceptor是发起$http请求的一个中间件。interceptor是注册$httpProvider的一个工厂函数,在请求和响应的时候会调用interceptor。
24.在指令执行和转换之前,如何修改指令模板?
- 使用
compile
方法。因为在执行和转换之前,compile
方法有权修改指令模板,所以compile
方法是安全地处理模板的。
25.如何验证文本输入值?
- 使用
ng-pattern
内置指令用正则表达式匹配。
26.在应用中,如何实现全局的异常处理?
- AngularJS提供了一个内置的错误处理服务叫
$exceptionHandler
。
myApp.factory('$exceptionHandler', function($log, ErrorService) {
return function(exception, cause) {
if (console) {
$log.error(exception);
$log.error(cause);
}
ErrorService.send(exception, cause);
};
});
27.通过按钮点击事件如何隐藏一个元素?
- 略
28.如何通过数据模型值的变化来触发更多的行为?
- 使用
$watch
方法实现
function MyCtrl($scope) {
$scope.email = "";
$scope.$watch("email", function(newValue, oldValue) {
if ($scope.email.length > 0) {
console.log("User has started writing into email");
}
});
}
29.如何根据checkbox的状态来禁用按钮?
- 使用
ng-disable
指令绑定到checkbox的值
<body ng-app>
<label><input type="checkbox" ng-model="checked"/>Disable Button</label>
<button ng-disabled="checked">Select me</button>
</body>
from notebook.
Related Issues (20)
- react 父子之间组件通信的意外发现
- 设定自己的自动化测试环境
- async2.6.1源码分析之waterfall HOT 2
- async2.6.1源码分析之parallel HOT 1
- async2.6.1源码分析之asyncify
- async2.6.1源码分析之auto
- redux 源码解读
- throttle vs debounce HOT 2
- transducer in javascript HOT 2
- http/2 - High Performance Browser Networking
- http/2 入门
- 二进制浮点数的存储解读
- 尾递归(TCO)
- $elemMatch vs. Dot Notation
- 抽象语法树例子
- three 流光效果 HOT 1
- three 相关资料 HOT 2
- react-intl 单复数转换 HOT 2
- web3 HOT 2
- react
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from notebook.