• Trusted by:

Hire AngularJS developers and engineers

Rashid Wakileh, United States

Member since November 17, 2014
Rashid is a passionate lead front-end engineer. He is an expert in test-driven development, and has extensive experience in leading teams to create software solutions. He enjoys using JavaScript frameworks and thoroughly testing all aspects of his code. Click to continue

Ryan J. Peterson, United States

Member since June 18, 2013
Ryan is a top architect, entrepreneur, and developer. He boasts a proven competency in building cloud-scalable, extensible software and systems. He writes code that can be maintained and expanded over time as business systems and requirements adapt to market demands or pivots in core business direction. Click to continue

Dennis Ippel, Netherlands

Member since March 14, 2014
Dennis has more than 10 years of experience building rich and interactive web sites, mobile apps, and installations. He has strong knowledge and extensive experience with cross-platform 3D using OpenGL ES, cross-browser JavaScript, WebGL, AngularJS and virtual and augmented reality. Click to continue

James C Russell, United Kingdom

Member since September 7, 2013
James is an experienced Ruby, JavaScript and React.js developer. He has written his own web frameworks and almost 100 open source projects. He has contributed to famous projects such as RubyGems, RSpec, Merb, and Puka, and has spoken at several conferences. Click to continue

Zlatko Duric, Germany

Member since May 13, 2013
Zlatko is an experienced Alfresco and JavaScript developer. He is focused on full-stack JavaScript web development (Node.js back-end and AngularJS front-end), and he has excellent knowledge and experience with the Alfresco document management architecture. Click to continue

Rahul Devaskar, Australia

Member since July 30, 2014
Rahul is a professional software engineer with leadership experience and expertise in building full-stack React.js/Node.js applications and streaming data analytics solutions. He has designed and developed an innovative context-aware advertising platform using Node.js and machine learning techniques. This platform was acquired by a Silicon Valley-based data analytics company. Click to continue

Bryce Ott, United States

Member since April 17, 2014
With more than 13 years working as an engineer, architect, director, vice president, and chief technology officer, Bryce brings a deep understanding of enterprise software, management, and technical strategy to any project. His specialties include real-time systems, business intelligence, big data, enterprise web apps, scalability, and open-source software. Click to continue

Francisco Vallarino, Argentina

Member since August 10, 2014
Francisco is an experienced professional with more than 14 years of experience in the IT industry, specializing in software engineering. He has extensive experience in software development, both on mobile platforms and web architectures (client and server side). Click to continue

Andrew Onyshchuk, Ukraine

Member since October 1, 2013
Andrew is an experienced web developer who is obsessed with learning newer and better technologies to bring the best solutions to all products and ideas. He possesses a vast range of skills and has experience with many different technologies, designs, and methods of execution. Click to continue

William Lyles, United States

Member since October 11, 2013
William is a top architect, engineer, and developer with a proven ability to develop efficient, scalable, and fault-tolerant server solutions for complex problems. He has extensive experience and a proven track record of successfully analyzing, decomposing, and solving difficult programming problems. Click to continue
AngularJS Resources
Trustpilot
Toptal on TV
"Toptal is killing it, it kind of owns this market."
Andrew Ross Sorkin Reviews Toptal
Cnbc 02e66b
"Tech companies simply cannot find the quality employees they want to hire. The solution: Toptal."
Liz Claman´s Review of Toptal
Fox 7ef901
Toptal in the press
“Despite accelerating demand for coders, Toptal prides itself on almost Ivy League-level vetting.”
Selina Wang
“Toptal allows corporations to quickly assemble teams that have the right skills for specific projects.”
Steven Norton
A hiring guide
The Vital Guide to AngularJS Interviewing

Although AngularJS has a gentle, initial learning curve, the powerful and flexible framework relies a lot on developers’ skills and understanding of the framework to produce well-engineered and maintainable applications. This hiring guide offers a set of insightful questions to help you identify amazing AngularJS developers who are experts in their field.

Testimonials
“As an internet marketing company specializing in pay-per-click management, our clients frequently ask us to provide services that fall outside the scope of our primary business. We have found Toptal to be exactly the resource we need to connect with contractors so we can deliver our clients top tier web development talent at a reasonable cost.”
Pashmina Lalchandani
Owner @ Flowsimple
“The Toptal process was very organized, personable, and professional. They get to know you and your project idea, and then quickly provide you with several of the world's best developers, who will work hard to achieve your vision. I found a great developer in only a few days and was able to turn my idea into a functional product.”
Ben Woratyla
CEO @ Book Swap
“Toptal makes finding qualified engineers a breeze. We needed an experience ASP.NET MVC architect to guide the development of our start-up app, and Toptal had three great candidates for us in less than a week. After making our selection, the engineer was online immediately and hit the ground running. It was so much faster and easier than having to discover and vet candidates ourselves.”
Jeff Kelly
Co-Founder @ Concerted Solutions
“Toptal provides a great service: Within a week of posting my job, I was matched with my developer and ended up completing the entire project with him. I'll continue to use Toptal in the future for any new development work I may need.”
Mike Jones
CEO @ DigitalDripped
“I am more than pleased with the experience with Toptal. It may cost a little more, but because they pre-qualify and hand-pick the professional best suited for the job, it's well worth it. The professional I got to work with was on the phone (Skype) with me within a couple hours. I knew after discussing my project with him that he was the candidate I wanted to do the job, and I hired him immediately... and he wasted no time in getting to my project. He completed the job and went the extra mile to clean up older, messy code and even added some great design elements that enhanced our overall look. I would highly recommend Toptal to anyone needing to hire a professional. Great company. Great service. Thank you, Toptal.”
Paul Fenley
Director @ K Dunn & Associates
“In Higgle's early days, we needed best-in-class developers, at affordable rates, in a timely fashion. Toptal delivered! Higgle enjoyed working with Toptal and we appreciate their professionalism.”
Lara Aldag
CEO @ Higgle
“The task of finding and hiring the right developers and programmers can be daunting, especially for startups. After sifting through countless unfit freelancers, we came across Toptal. They were able to fill our open position in no time, and I'd highly recommend the service!”
Josef Holm
CEO @ Tubestart
“Working with Marcin is a joy, I can't find a better word. He is competent, professional, flexible, and extremely quick to understand what is required -- and to implement it -- even if the source code that's given to him is, shall we say, less than optimally elegant and clear. Oh and he has the same sense of humour as me. ;)”
André Fischer
CTO @ App Promotions
“We needed some short-term work in Scala, and Toptal found us a great developer within 24 hours. It was done quickly for a specific need, and it's been great. It simply would not have been possible via any other platform.”
Franco Arda
Co-Founder @ WhatAdsWork.com
“Prior to working with Toptal, we had a very difficult time finding qualified developers. The Toptal team worked with us to find a developer that was a great fit in terms of technical skills, culture, and finances. Our Toptal developer is four months into this project and we are still impressed with the attention to detail and technical prowess that he brings to our team.”
Justin Fister
Chief Scientist @ PaperRater
“John has been so great to work with! He has met all our requirements, done a speedy job with excellence, and has completed everything we’ve asked him to. Working with him has been a great experience.”
Jenny Lord
Communications Project Manager @ Lake Pointe Church
“With the pressure on and millions watching the Cleveland Cavaliers during the NBA Playoffs, Toptal delivered the talent and expertise needed to launch a brand new fan engagement platform.”
Conor Kenney
Director of Professional Services @ Cleveland Cavaliers
“Toptal understood our project needs immediately. We were matched with an exceptional freelancer from Argentina who, from Day 1, immersed himself in our industry, blended seamlessly with our team, understood our vision and produced top-notch results. Toptal makes connecting with superior developers and programmers very easy.”
Jason Kulik
Co-Founder @ ProHatch
“The developers I was paired with were incredible—smart, driven, and responsive. It used to be hard to find quality engineers and consultants. Now it isn't.”
Ryan Rockefeller
CEO @ Radeeus
“Dave as a developer was absolutely fantastic! The guidance that he provided us will allow us to make tremendous improvements to the next version of our application.”
Baroni Parson
IT Manager @ City Real Estate Advisors, Inc.
Hire a top AngularJS developer now.
Toptal is a marketplace for top AngularJS developers, engineers, programmers, coders, architects, and consultants. Top companies and start-ups choose Toptal freelancers for their mission critical software projects.
Full
profile
Rashid WakilehUnited States
Rashid is a passionate lead front-end engineer. He is an expert in test-driven development, and has extensive experience in leading teams to create software solutions. He enjoys using JavaScript frameworks and thoroughly testing all aspects of his code.
[click to continue…]
AngularJSJavaScriptjQueryWebStormWindows
Hire
Full
profile
Ryan J. PetersonUnited States
Ryan is a top architect, entrepreneur, and developer. He boasts a proven competency in building cloud-scalable, extensible software and systems. He writes code that can be maintained and expanded over time as business systems and requirements adapt to market demands or pivots in core business direction.
[click to continue…]
AngularJSJavaScriptPHPHTML5Knockout.jsCakePHPjQuery UINode.jsAngularUIjQueryAgile Software DevelopmentMac OS XMySQL
Hire
Full
profile
Dennis IppelNetherlands
Dennis has more than 10 years of experience building rich and interactive web sites, mobile apps, and installations. He has strong knowledge and extensive experience with cross-platform 3D using OpenGL ES, cross-browser JavaScript, WebGL, AngularJS and virtual and augmented reality.
[click to continue…]
AngularJSJavaHTML5Microsoft KinectUnity3DWebGLOpenGL ESAdobe Flash BuilderWebStormAdobe FlashAJAXCross-browser JavaScriptWindows
Hire
Full
profile
James C RussellUnited Kingdom
James is an experienced Ruby, JavaScript and React.js developer. He has written his own web frameworks and almost 100 open source projects. He has contributed to famous projects such as RubyGems, RSpec, Merb, and Puka, and has spoken at several conferences.
[click to continue…]
AngularJSJavaScriptRubyRuby on Rails
Hire
Full
profile
Zlatko DuricGermany
Zlatko is an experienced Alfresco and JavaScript developer. He is focused on full-stack JavaScript web development (Node.js back-end and AngularJS front-end), and he has excellent knowledge and experience with the Alfresco document management architecture.
[click to continue…]
AngularJSJavaScriptNode.jsAJAX
Hire
Full
profile
Rahul DevaskarAustralia
Rahul is a professional software engineer with leadership experience and expertise in building full-stack React.js/Node.js applications and streaming data analytics solutions. He has designed and developed an innovative context-aware advertising platform using Node.js and machine learning techniques. This platform was acquired by a Silicon Valley-based data analytics company.
[click to continue…]
AngularJSCoffeeScriptJavaScriptReact.jsSocket.IONode.jsGitMac OS X
Hire
Full
profile
Bryce OttUnited States
With more than 13 years working as an engineer, architect, director, vice president, and chief technology officer, Bryce brings a deep understanding of enterprise software, management, and technical strategy to any project. His specialties include real-time systems, business intelligence, big data, enterprise web apps, scalability, and open-source software.
[click to continue…]
AngularJSPHPVisual BasicSQLCSSJavaScriptJavaHTML5CakePHPTwitter BootstrapYii FrameworkZend Framework 2Twitter API
Hire
Full
profile
Francisco VallarinoArgentina
Francisco is an experienced professional with more than 14 years of experience in the IT industry, specializing in software engineering. He has extensive experience in software development, both on mobile platforms and web architectures (client and server side).
[click to continue…]
AngularJSJavaJavaScriptSQL-99SpringApache StrutsHibernateAgile Software DevelopmentJ2EE
Hire
Full
profile
Andrew OnyshchukUkraine
Andrew is an experienced web developer who is obsessed with learning newer and better technologies to bring the best solutions to all products and ideas. He possesses a vast range of skills and has experience with many different technologies, designs, and methods of execution.
[click to continue…]
AngularJSCSSPHPKnockout.jsTwitter BootstrapYii FrameworkjQueryVK APIjQuery UIWindows
Hire
Full
profile
William LylesUnited States
William is a top architect, engineer, and developer with a proven ability to develop efficient, scalable, and fault-tolerant server solutions for complex problems. He has extensive experience and a proven track record of successfully analyzing, decomposing, and solving difficult programming problems.
[click to continue…]
AngularJSPythonC++SQLJavaScriptPHPMySQL
Hire

The Vital Guide to AngularJS Interviewing

AngularJS is the framework of choice for multiple high-end web applications. The reason many teams choose this technology is because it is flexible and powerful, seems to evolve in the right direction, has a great community, and has countless extensions and integrations.

There are also many Angular developers. While starting out with Angular is fun and building small single page applications is not very difficult, maintaining even a small app can be tough. Until today, a large number of good practices and advanced techniques have been documented and discussed, and some high-quality standards have emerged.

Our hiring guide will help you find developers who strive to follow that high-quality approach. It is the one that results in great applications which attract clients. In this guide, we will cover concepts relevant to scopes, the digest loop, services, testing, and more.

Working with Scopes

Scopes are the data-model of Angular apps. They are the single source of truth in the app, and should be bound and handled with the greatest caution. There are many caveats in dealing with scopes. We will describe a few significant ones below.

Q: How does scope inheritance work in AngularJS? Describe the various ways for data to be passed into a scope.

Scope inheritance in AngularJS is prototypal for child scopes, but not for isolated scopes. Core directives, which create a new scope, use the child scope option. Those scopes have access to the models set on the parent scope. Accessing parent scope models works seamlessly for objects, but when trying to write to a primitive model (e.g. a string), a new model will be created on the child scope. The model on parent scope will be masked, or shadowed.

When building custom directives, it is possible to create an isolated scope. Isolated scopes don’t have direct access to their parent’s models. Still, bindings can be set manually by specifying them in the directive’s scope property object. In such a case, data can be passed into the directive through HTML attributes. That supports both two-way and one-way bindings, and also expression bindings.

Directives also have the ability to transclude scope onto contained elements. When using transclusion manually, it is possible to create a cloned scope - one that would keep all the properties of the parents, but would lose all the bindings. That feature is not very well documented.

At this point, it seems very important to note that it is possible to traverse scopes, in all directions. Every scope has a $parent property (“null” for root scope), and also childTail, nextSibling properties. It is possible to communicate between scopes using those properties, though it may be difficult and also not a good practice.

Q: What exactly are controllers? What is their lifecycle and relation to the scope?

Controllers are classes, that is, constructor functions, which are bound to a scope AND a section of HTML through the directive “ng-controller”, routing, or through a directive. Setting a controller creates a new scope (child scope). The controller’s purpose is to set up the initial state of the scope and also manipulate it by adding behaviour, setting watches, event listeners, etc.

Even though at first controllers may seem like the primary ground of operation in AngularJS, once the developer truly understands the purpose of scopes in AngularJS, their use of controllers will minify. It is not optimal to perform calculations directly on scope models, as those might be watched, and in effect may trigger and slow down the digest phase. The motto that transcends MVC frameworks — “keep controllers thin” — applies very well to AngularJS.

Controllers are bound to their scope, and so is their lifecycle. Once a new scope is created, the $compile service sets up initial watches on the scope. At that point, the scope can be manipulated, models on the scope can be created, mutated or destroyed, new watches and listeners can be set. For the changes to take effect, a digest phase needs to be triggered. That allows for observing and responding to model mutation (which is a reaction, thus the next step). The scope’s lifecycle ends with its destruction. Additional events are fired on that occasion. This usually is also the end of the interest for the controller, though it may live on as JavaScript closures do.

Q: Please explain what “.$eval()” and “$parse()” are used for in AngularJS.

“.$eval()” is a simple scope method which takes an expression (and optionally locals) and then executes it against the current scope, using “$parse()”.

The service “$parse()” is where the magic happens. It takes an Angular expression and returns a function, which takes two arguments: “context” and “locals”. The latter is used for overriding variables set in the context. The context is the key part.

A good helper question to this one would be: did you, the developer, ever wonder why core Angular directives take only the model name set on the scope? E.g.: ‘<button ng-click=“foo = 5”>Sets the value of scope model foo to 5</button>`. In the directive, the scope object is implicit. What really happens: the expression passed to ng-click is parsed, which returns a function, which is then executed with the current scope passed in as context.

$scope.foo = 3;
var parseFn = $parse(‘foo = 5’);
parseFn($scope);
$scope.foo; // returns 5

or shorter:

$scope.foo = 3;
$scope.$eval(‘foo = 5’);
$scope.foo; // returns 5

There are many use cases for $parse, as it is a really great service. A particularly useful one is to check for deep nested properties of objects when there is no assurance that at any level the property is not null.

$parse(‘bar.baz.quux’)(foo);

… will return undefined if foo.bar is undefined. If one would try to access “quux” directly, JavaScript would throw an exception.

Another more specific use case is to allow users to declare variables and assign values to them, such as in text input fields, and then reuse the variables in other input fields (and more). An example of that might be a calculator or notepad application. To keep it safe, scope could be used as the context for the variables. “.$eval()” and “$parse()” would play key roles there.

Working with the Digest Loop

The digest loop is used to keep the DOM in sync with the models set on the scope. In Angular, running into issues around the digest cycle is common. A deep understanding of the digest cycle is much less common.

The developer being interviewed should be familiar with what the digest cycle is and how it works. The requirement for that knowledge will emerge sooner than later when building a large application. The questions below will help you assess their level of proficiency.

Q: How does AngularJS know when to perform dirty checking and update DOM output?

The answer is short — when it is told to do so. The point is, there is no polling mechanism that would trigger dirty checking automatically. Core AngularJS directives, services, and methods usually set up watches, or fire the digest cycle explicitly. That process is executed internally, it is not exposed, and may not be obvious to the developers. In fact, there are articles which contradict the facts, falsely stating that there is a constant heartbeat in AngularJS. There is no such thing.

Manipulating scope models using non-core functionality requires the developers to manually trigger the digest cycle. In most cases, that is done by using the scope method “.$apply()”, which triggers a digest on the root scope. That phase propagates down to every child scope.

Without anything triggering digest, the dirty checking will not happen. The callbacks to watches will not be fired, and DOM output will not be updated.

Q: What is the difference between “.$apply()” and “.$applyAsync()”? Why would you choose one over the other?

The main difference between them is that the latter happens on a 0 timeout. The actual delay is about 10ms. Consecutive “.$applyAsync()” calls cancel the previous timeouts. The point is that for multiple “.$applyAsync()” calls, there will only be a single digest trigger, and not one for every call. That would be the case with the regular “.$apply()”.

At this point, the reason should be obvious — the main concern is performance. Applying a certain change to your scope, only to redo or change it again in a fraction of a second can often be redundant. $applyAsync() helps avoid that.

Q: What is the difference between “.$digest()” and “.$apply()”? Why would you ever call “.$digest()” on a scope?

There are a few differences. First of all, “.$apply()” takes an argument, an expression, and evaluates it against the current scope. “.$digest()” does not take any arguments.

Secondly, “.$apply()” calls “.$digest()” on root scope. That digest will propagate down through every child scope — it will eventually affect every scope in the application. Calling “.$digest()” directly on a scope does not affect any scope that is higher in the hierarchy. That means that any watches set on parent scopes will not be evaluated.

Again, the reason why a developer might want to call “.$digest()” instead of “.$apply()” is performance. It can be safely done when working with isolated components, e.g. widgets, that don’t communicate with the rest of the app. More precisely — when it is known that no models set on parent scopes will be affected.

However, it is not a common practice. As a rule of thumb, the use of “.$apply()” is preferred and expected.

Services

Services in Angular are where the business logic is kept. Even in core Angular, there is more than one (even more than two) supported ways of creating services. The style guides have a lot to say about optimal approaches in dealing with services. The engineer you consider hiring should too!

Ranging from correctly applying patterns, through communication, persistent models, to handling client-side data stores, the services in Angular usually consist of advanced, complex methods that should be reusable across the application. The business logic itself requires proficiency in JavaScript. Binding it to Angular demands from the developer to comprehend what types of structures he or she intend to use.

Q: Please explain when to use a service, when to use a factory, and when to use a provider.

The three are almost the same internally. When initialized, a service returns a factory, which in turn returns a provider.

The difference between services and factories lies in how they are declared and initialized. Services are constructor functions — they are instantiated, that is, when first loaded a “new” instance is created. The consequence is that when declaring a service, all its methods are defined as properties of “this”. Factories, on the other hand, should return an object literal.

There is an advantage to knowingly using providers, as they can be configured before all services are available, in “config()” blocks. When declaring a provider named e.g. “api”, Angular registers two injectables: “api” and “apiProvider”.

function api() {
  this._apiUrl = '';

  this.$get = function () {
    var that = this;
    var hostObject = {
      printApiUrl: function () {
        return ‘api address is ' + that._apiUrl;
      }
    };
    return hostObject;
  };
}

angular.module(‘myApp’)
  .provider(‘api’, api);

angular.module(‘myApp’)
  .config(function (apiProvider) {
    apiProvider._apiUrl = ‘http://a-great-api.com';
  })
  .controller(’NewCtrl’, function ($scope, api) {
    $scope.apiName = api.printApiUrl();
  });

Q: What are services in AngularJS? When are they initialized?

Angular services are singletons — there is only one instance available during an app’s lifecycle. Angular lazy loads its modules, so all services become available after they were injected into a “run()” block, or into another module (which of course needs to be initialized too).

Providers become available prior to that, as they can be readily used in “config()” blocks. Their core functionality is still unavailable at that time. It can be manipulated though.

Q: What means of HTTP communication are available in AngularJS? Describe and explain the differences between at least two.

The two core services for Angular that deal with XHRs are “$http” and “$resource”. The latter actually needs explicit installation, while “$http” is readily available.

“$http” is a low level module, which already provides a lot of functionality, but using it with a RESTful API might lead to duplication of code, and is somewhat primitive. The module can be used for communicating using XML HTTP Requests or JSONP. It is rather simple to use.

“$resource”, on the other hand, is a high level service built on top of “$http”, designed for communicating with RESTful APIs. It was built to deal with standard server-side resources. It provides a rich api, allowing the declaration and reuse of multiple defined parameters, even ones which can be used alternatively on the same path level. It provides standard actions (except for “update”, but that one is described as an example in the module’s documentation). It also allows new actions to be defined.

There is a common ground for both “$http” and “$resource” — the “$httpInterceptors”. More about those in the next section.

A third alternative is Restangular. Restangular is a contributed module, and was built as a substitute for $resolve. It has a different, rich API, operates primarily on promises, and is supposed to have an easier syntax. In fact, developers consider $resource to be somewhat confusing. Restangular allows you to generate new types of requests on the fly. It is a fairly popular module. On the other hand, there haven’t been many commits lately.

Miscellaneous

AngularJS has a lot of power. To be able to use it, the developer often needs to dig in to documentations, techniques described on blogs and forums, and also into the source code. After spending some time building client-side applications using AngularJS, the engineers broaden their view on AngularJS. New paths open up as a result of searching for optimal approaches. A veteran developer should be at least somewhat familiar with the cases described in the questions and answers below. They all relate to advanced aspects of using Angular. The developer’s fluency in discussing them may indicate to you their thorough understanding of the framework.

Q: What is transclusion, in relation to directives? Are there ways to manually control transclusion?

Transclusion is a property of directives, which allows them to contain and access elements, which are declared within them in HTML hierarchy, but which are not declared in their templates.

An example of that would be a lightweight directive, which when applied to an element creates a new scope for it, applied also to all contained elements.

<div>
  <p>PARENT SCOPE:</p>
  <p>foo: {{ foo }}</p> <!-- assuming foo === 1 -->
  <p>bar: {{ bar.hotNumber }}</p> <!-- assuming bar.hotNumber === 1 -->
  <div light-scope>
    <p>CHILD SCOPE</p>
    <p>foo: {{ foo }}</p>
    <p>bar: {{ bar.hotNumber }}</p>
    <button ng-click="foo = 2">change foo</button>
    <button ng-click="bar.hotNumber = 3">change bar.hotNumber</button>
  </div>
</div>

this can be a view template — notice that the content of the “div” to which the directive “light-scope” is bound is not part of the directive’s template.

function lightScope() {

  function postLink(scope, element, attrs, controller, transclude) {
    
    // allow to set isolated scope,
    // but not by default
    var isolateScope = false;
    if (attrs.lightScope === 'isolated') {
      isolateScope = true;
    }

    // there are two scopes: 
    // one created by the directive in the definition, through `scope: true`, and 
    // another one created just above...    
    var newChildScope = scope.$parent.$new(isolateScope);

    transclude(newChildScope, function (clone) {
      element.append(clone);
    });

    // ... so the second scope needs to be destroyed manually.
    scope.$on('$destroy', function () {
      newChildScope.$destroy();
    });

  }

  var directive = {
    link: postLink,
    restrict: 'E',
    scope: true,
    transclude: true
  };

  return directive;

}

angular.module('lightScope', [])
.directive('lightScope', lightScope);

So obviously, the “transclude()” function is very interesting. We provide it an arbitrary scope, and can append it to the DOM element. That will propagate to the elements below in the HTML hierarchy.

Please refer to the official documentations for $compile service, they’re quite exceptional:

Q: Is it possible to manipulate HTTP requests globally in AngularJS? Describe your approach.

Yes, requests can be intercepted, and Angular provides a great api to do that - the “$http” interceptors. “.interceptors” is an array, available at “$httpProvider”, so it can be manipulated from “.config()” blocks. That array should consist of functions which return an object, basically factories.

Requests can be intercepted at: request (just before sending), request error, response success, and response error.

Considering that also “$resource” relies on “$http” to cover XHRs and the functions passed to the $httpProvider.interceptors array, can be normal Angular factories, using interceptors is a good practice for general global manipulation of HTTP requests.

Q: How does root scope differ from all other scopes?

“$rootScopeProvider” is a service. It is a singleton; it does not have a parent, siblings, or another root. It was created directly from the “Scope()” class, and not through the “.$new” method of another scope.

Perhaps the biggest differences are in how root scope is meant to be used. It’s primary use for developers is meant to be event handling. In Angular, “.$broadcast()” and “.$emit()” are ways to trigger events, which are sent down or up the scope hierarchy respectively. The effects are optimal at the root scope, i.e. “$rootScope.$emit()” will only be caught by listeners set on root scope, while “$rootScope.$broadcast()” will reach to all listeners in the app.

Models should not be set on root scope. That scope can be seen as a form of global namespace, especially when evaluating expressions in the context of scopes. Polluting the global namespace is almost never a good practice. The recommendation in Angular documentations is to use root scope only for small parts of data, which are useful throughout the app (globals), but not functions.

Testing

Building applications without writing tests is a no-go. Fortunately, Angular was built with testability in mind. Writing tests requires developers to learn and apply different approaches, depending on what type of Angular structure is tested. Some of the differences may be subtle and incomprehensible without knowing the good practices of software development. Others may include alternative approaches to achieve the same goal.

Setting up testing also for a continuous integration environment is the Angular developer’s responsibility. Who else would take care of it otherwise? Though the techniques described here are not required to build great applications, most of the teams behind the great applications value them deeply.

Q: Unit testing controllers and services - what are the differences?

The main difference between unit testing controllers and services stems from the differences in concerns. Controllers are used for setting the initial state and behavior of the scope they are bound to. We could say that all the models set on scope, either directly or using the //this// keyword, are public. This is still somewhat similar to the public properties of services. Controllers should not contain business logic though.

In unit testing controllers, one could expect more assurances of the initial values of models, and less logic. The logic in controller methods should mostly be just coupling UI actions to services. All functionality that is not tightly bound to the current view and scope, should be delegated to services. The developer would definitely have more spies set on mocked services objects in controller tests than in service tests.

Conversely, the services should be tested primarily for correct business logic handling.

Q: Please describe an approach to testing directives.

Directives are responsible for handling new and/or complex functionalities within custom HTML tags. Directives are set through HTML, and in most cases their effects directly affect the user interface of an application. That is unlike services, whose effects usually have an indirect effect on the UI.

Many directives have all of their logic in their postLink function. That function is not added to modules as controllers, services, and filters are, so they cannot be injected. Unless they are made globally available, it is very difficult reach them directly when testing.

The recommended, official way to test directives using unit tests is to inject the “$compile” service, pass it a single HTML element with the directive set on it, and compile it against a scope, e.g. root scope. After that, a digest phase is manually called, and then the compiled HTML element is tested for expected results.

it('Should compile to expected results', function() {
    var element = $compile('<div widget-component></div>')($rootScope);
    $rootScope.$digest();
    expect(element.html()).toContain('Simple as that');
  });

That approach is rather fast. It might just be a bit difficult to test directive’s reactions for complex user actions. This is where Protractor comes into play. Protractor is a testing framework for AngularJS, written on top of webdriver, which executes tests against Selenium servers. It is used for e2e testing.

The alternative approach to testing directives is to do almost exactly the same thing, just with e2e tests. Compiling a directive in a unit test is a great way to isolate the directive. What is ultimately tested though is usually the visible HTML result. This alternative approach is about writing simple HTML pages, which load the directive (and it’s dependencies), and isolate the directive and its functionality on a simple page. No routing, nothing - just the directive. Such an HTML page is not yet the test — it is a standard example. The test needs to be run against that example page. This approach is particularly useful when writing libraries.

The latter approach is a bit slower in terms of execution. The application needs to boot in order to test the directive. However, such a test has a lot of value. Even more value comes from the fact that in the process, an example HTML page is created — a very useful artifact. Perhaps such tests could be called functional tests, and not yet full e2e tests, because the developer should still want to isolate behaviour and add every module that the final application is using, to the example HTML page.

Q: How would you automate the testing within a larger team, or in a production environment?

This is not a strictly AngularJS question, but a veteran front-end developer should at least have an idea of how continuous integration environments work, in regard to front-end testing.

First of all, we need to make the assumption that the project is version controlled with Git, and is hosted on GitHub, or BitBucket, or some similar code repository service. It would be great if at this point, the developer would mention gitflow, as it is a method with proven effectiveness. More importantly though, the developer should mention hooks, e.g. GitHub webhooks. Those are event handlers, described in-depth in a recent article on Toptal Blog, which allows HTTP requests to be made to arbitrary URLs in response to various repository events. An example would be to ping a third-party testing service when someone pushes commits to a repository.

There are multiple services, most notable of which are Travis, another GitHub product, available for free for open source projects, and SauceLabs, which allow automated testing on mobile devices. Those tools will do most of the configuration automatically, including configuring the webhooks. What the front-end developer will need to provide is a script, most often a bash script, similar to what probably already is in the repository’s README.md file — the client application needs to be installed and run on the machine provided by the third-party testing service. The script usually installs all dependencies, runs the tests, builds the application, then deploys it. That last step is critical.

The continuous environment, after successfully completing the tests, should perhaps push the code to a remote server. The author never used such processes to push to production, but he did set up several systems where deployment was performed automatically to pre-production servers, e.g. development and staging. In fact, those servers were never pushed manually again. Such setup relieves developers from having to do the build themselves — the only thing they need to do now is commit their code and push. Even more importantly — it runs the tests on another machine. The developer would be expected to test their changes locally anyway. If the tests pass both locally and remotely, there is a big chance that the codebase is stable.

Conclusion

This hiring guide covered a wider spectrum of duties and knowledge than would be historically expected from front-end developers. A great Angular developer is perhaps more of an engineer. Debugging selenium issues, creating sophisticated build processes, and setting up continuous integration environments are more than client-side JavaScript. It is expected from the developer to be proficient with the latter, but experience and an understanding of the wider ecosystem of the application should be a requirement.

A great AngularJS developer is capable of blending art into engineering.

There were also some areas not covered by this guide, such as animations and rendering performance and CSS / HTML expertise. Angular developers don’t have to be great designers, but they must strive for making performant applications which mirror the provided designs. As there are so many concerns on the side of the logic, it would be alleviating if the team included an HTML / CSS developer. Static HTML templates provided by them could be easily applied to and coupled with an Angular application. Otherwise, animations in Angular, though frustrating at times, are well documented and rather easy to use. Please refer to the Top 18 AngularJS developer mistakes article for more on client-side performance.

Lastly and maybe most importantly come the communication skills. An Angular developer might very well become the main communication node of your team. They will need to constantly cooperate with the back-end team, the HTML coders, and the designers. Their work will be what the end client directly interacts with. Essentially, the Angular dev will need to be very responsive, an expert at their field, and on good terms with everyone. Finding the right one is a difficult task. Toptal makes it easier.

Hire AngularJS developers now
Alvaro 1506e7

My team is going to personally help you find the best candidate to join your team.

Alvaro Oliveira
VP of Talent Operations