12 Essential AngularJS Interview Questions *
最好的AngularJS开发人员和工程师可以回答的所有基本问题. 在我们社区的推动下,我们鼓励专家提交问题并提供反馈.
Hire a Top AngularJS Developer NowInterview Questions
使用AngularJS核心功能在应用模块之间进行通信的常见方法包括:
- Using services
- Using events
- By assigning models on
$rootScope
- Directly between controllers, using
$parent
,$$childHead
,$$nextSibling
, etc. - Directly between controllers, using
ControllerAs
, or other forms of inheritance
Using a service is definitely easy to test. 服务被注入,在测试中,可以使用真实的服务,也可以模拟它.
Events can be tested. In unit testing controllers, they usually are instantiated. 为了测试$rootScope上的事件,它必须被注入到测试中.
针对任意模型的存在测试$rootScope是可测试的, 但是通过$rootScope共享数据并不是一个好的做法.
对于测试控制器之间的直接通信,可能应该模拟预期的结果. 否则,需要手动实例化控制器以获得正确的上下文.
The most popular e2e testing tool for AngularJS is Protractor. There are also others which rely on similar mechanisms. Describe how e2e testing of AngularJS applications work.
端到端测试是针对一个正在运行的应用程序执行的,这是一个完全初始化的系统. 它们通常生成一个浏览器实例,并通过用户界面实际输入命令. 编写的代码由自动化程序评估,例如Selenium服务器(webdriver)。. That program sends commands to a browser instance, then evaluates the visible results and reports back to the user.
断言由另一个库处理,对于Protractor,默认是Jasmine. Before Protractor, there was a module called Angular Scenarios, which usually was executed through Karma, and is now deprecated. 如果您想测试混合应用程序,可以使用另一个Selenium服务器,称为Appium.
Testing can be handled manually, or it can be delegated to continuous integration servers, either custom or ones provided by Travis, SauceLabs, and Codeship.
Apply to Join Toptal's Development Network
and enjoy reliable, steady, remote Freelance AngularJS Developer Jobs
这是为Protractor编写的一个简单测试,稍微修改了Protractor文档中的示例:
it('should find an element by text input model', function() {
browser.get('/some-url');
var login = element(by.model('username'));
login.clear();
login.sendKeys('Jane Doe');
var name = element(by.binding('username'));
expect(name.getText()).toEqual('Jane Doe');
// Point A
});
解释代码是同步的还是异步的,以及它是如何工作的.
代码是异步的,尽管它是以同步方式编写的. 在幕后发生的事情是,所有这些函数都在控制流上返回承诺. There is even direct access, using “protractor.promise.controlFlow()”, and the two methods of the returned object, “.execute()” and “.await()”.
Other webdriver libraries, such as wd http://github.com/admc/wd, require the direct use of callbacks or promise chains.
When a scope is terminated, two similar “destroy” events are fired. What are they used for, and why are there two?
The first one is an AngularJS event, “$destroy”, and the second one is a jqLite / jQuery event “$destroy”. 第一个可以被AngularJS作用域使用,只要它们是可访问的, such as in controllers or link functions.
考虑下面两个发生在指令的postLink函数中的情况. The AngularJS event:
scope.$on(‘$destroy’, function () {
// handle the destroy, i.e. clean up.
});
And
element.on(‘$destroy’, function () {
// respectful jQuery plugins already have this handler.
// angular.element(document.body).off(‘someCustomEvent’);
});
The jqLite / jQuery event is called whenever a node is removed, which may just happen without scope teardown.
两者的关键都是将函数的结果赋值给一个变量.
To cleanup the timeout, just “.cancel()” it:
var customTimeout = $timeout(function () {
// arbitrary code
}, 55);
$timeout.cancel(customTimeout);
The same applies to “$interval()”.
To disable a watch, just call it.
// .$watch()返回一个注销函数,我们将其存储到一个变量中
var deregisterWatchFn = $rootScope.$watch(‘someGloballyAvailableProperty’, function (newVal) {
if (newVal) {
// we invoke that deregistration function, to disable the watch
deregisterWatchFn();
...
}
});
The flow is as follows:
首先,执行" $compile() "函数,它返回两个链接函数,preLink和postLink. 该函数对每个指令执行,从父指令开始,然后是子指令,然后是孙子指令.
其次,每个指令执行两个函数:控制器和prelink函数. 执行顺序还是从父元素开始,然后是子元素,然后是孙子元素,依此类推.
The last function postLink is executed in the inverse order. 也就是说,它首先对孙辈执行,然后是子辈,然后是父级.
关于在AngularJS中如何处理指令的一个很好的解释可以在 AngularJS Tutorial: Demystifying Custom Directives post on the Toptal blog.
它依赖于$interpolation,一个由编译器调用的服务. 它计算可能包含AngularJS表达式的文本和标记. For every interpolated expression, a “watch()” is set. $interpolation返回一个函数,它只有一个参数" context ". By calling that function and providing a scope as context, the expressions are “$parse()”d against that scope.
简而言之,在每个摘要周期中,将所有范围模型与其先前的值进行比较. That is dirty checking. If change is detected, the watches set on that model are fired. 然后执行另一个摘要循环,以此类推,直到所有模型都稳定.
It is probably important to mention that there is no “.$digest()” polling. That means that every time it is being called deliberately. As long as core directives are used, we don’t need to worry, 但是,当外部代码更改模型时,需要手动调用摘要周期. Usually to do that, “.$apply()” or similar is used, and not “.$digest()” directly.
官方推荐的两种生产方法是禁用调试数据和启用严格的DI模式.
The first one can be enabled through the $compileProvider:
myApp.config(function ($compileProvider) {
$compileProvider.debugInfoEnabled(false);
});
该调整禁止向元素附加作用域,从而使控制台中无法访问作用域. The second one can be set as a directive:
性能的提高在于注入的模块被显式地注释了, hence they don’t need to be discovered dynamically.
您不需要自己注释,只需使用一些自动构建工具和库即可.
Two other popular ways are:
- Using one-time binding where possible. Those bindings are set, e.g. 在“{{::someModel}}”中,通过在模型前面加两个冒号进行插值. 在这种情况下,没有设置手表,并且在摘要期间忽略模型.
- Making $httpProvider use applyAsync:
myApp.config(function ($httpProvider) {
$httpProvider.useApplyAsync(true);
});
它只执行一次附近的摘要调用,使用零超时.
$rootScope
is the parent object of all $scope
Angular objects created in a web page.
The DOM is the Document Object Model. It’s the view part of the UI. Whatever we are changing in page elements is reflected in the DOM.
BOM是浏览器对象模型,它指定了全局浏览器对象 window
, localstorage
, and console
.
There is more to interviewing than tricky technical questions, so these are intended merely as a guide. 并不是每一个值得雇佣的“A”候选人都能回答所有的问题, nor does answering them all guarantee an “A” candidate. At the end of the day, hiring remains an art, a science — and a lot of work.
Why Toptal
Tired of interviewing candidates? Not sure what to ask to get you a top hire?
Let Toptal find the best people for you.
Hire a Top AngularJS Developer NowOur Exclusive Network of AngularJS Developers
Looking to land a job as an AngularJS Developer?
Let Toptal find the right job for you.
Apply as an AngularJS DeveloperJob Opportunities From Our Network
Submit an interview question
Submitted questions and answers are subject to review and editing, and may or may not be selected for posting, at the sole discretion of Toptal, LLC.
Looking for AngularJS Developers?
Looking for AngularJS Developers? Check out Toptal’s AngularJS developers.
Muhammed Mutahr
Freelance AngularJS Developer
Muhammad是一名高级软件工程师,在公共教育部门(WSU), privately owned healthcare companies (Meridian), and public Fortune 500 companies in the automotive industry (GM & AAM). Throughout his career, he’s designed web apps in HTML/CSS, 使用JavaScript框架(Angular/Ionic)开发客户端应用, and used Java and C# to develop robust server-side apps.
Show MoreRyan J. Peterson
Freelance AngularJS Developer
Ryan is a top architect, entrepreneur, and developer. 他在构建云可伸缩、可扩展的软件和系统方面的能力得到了证明. 他编写的代码可以随着业务系统和需求适应市场需求或核心业务方向的变化而维护和扩展.
Show MorePatrick Keenum
Freelance AngularJS Developer
Patrick是一名高级全栈工程师,拥有10多年的开发经验, reliable, and scalable products. He is passionate about bringing ideas from conception to launch, working with clients of all levels of technical acumen, and building products that help companies grow.
Show MoreToptal Connects the Top 3% of Freelance Talent All Over The World.
Join the Toptal community.