Some Classic Angular Developer Interview Questions, and some Possible Answers (pt 1)

You might be in the interview process right now - or you could just be wanting to make sure you're staying sharp with the kinds of questions asked in an interview. Maybe you want a few ideas of what topics to study or you're the one giving an interview! In any case, here's a list of some typical questions posed in an interview for Angular developers.

Explain what a single page web application is.

A single page web application (as compared to a multipage web application) works inside of a browser and doesn't require page reloading to use. These single page web applications rely heavily on JavaScript to load content when needed, change state, and update templates. They are typically really fast after the initial load, because they are only loaded once - and then after only data is transferred back and forth between client and server. GMail is an example of a single page web app.

Explain what a directive is.

Directives are markers you can put on a DOM element to attach certain behavior to it. They offer additional built in functionality to your application via the html. Some examples are ng-app (which defines the root element of a AngularJS application), ng-repeat (which clones html elements for each turn through the repeat), ng-show (use like a Boolean to either display or not display the dom element), and ng-if (Boolean to remove the entire html element). There are plenty more - and their syntax changes slightly when going from Angular JS to Angular 2+.

<body ng-app="myCoolApp">
<li ng-repeat="name in people">

What are attribute directives?

As opposed to components (directives with a template) and structural directives (that change the DOM layout) - attribute directives change the appearance and/or behavior of an html element or of another directive. There are built in versions of this like ngStyle, but you can write your own versions. It is best practice to prefix your custom directive names to avoid naming collisions incase a built-in directive is named similarly.

<p appBold>Bold this text!</p>

import { Directive } from '@angular/core';

@Directive({
  selector: '[appBold]'
})
export class BoldDirective {
  constructor() { 
//your code goes here!
}
}

What is $rootScope?

All apps have a $rootscope that is create on the html element that has the ng-app directive, and the $rootscope is available across the entire application.
Each AngularJS app can only have only $rootScope, but can have many child scopes since directives can create new child scopes. When these new scopes are created they are added as children of their parent scopes forming a tree structure.
The scope is the binding between the html template and the JavaScript controller where the business logic is.

Does a child controller inherit the parent controller's scope?

Yes! A child scope prototypically inherits from it's parent's scope. When AngularJS evaluates something like {{person}} it will first look at the scope associated with the person property, and if that property can't be found it will search up the scope "tree", first to it's parent, then it's parent's parent - all the way up to root scope. If a variable has the same exact name in the current scope as in it's parent scope, or even the $rootScope, the application will use the one in the current scope.

Explain 2 way data binding.

Two way data binding distills down to property biding and event binding - taking the data from the JS to the DOM and then back again once the user has caused an event (like filling in a form). It can be facilitated using the ngModel directive which uses both the square brackets typical of property binding syntax and the parentheses of event binding syntax.

<input type="text" [(ngModel)] = 'val' />

Of note, 2 way data binding functions different in Angular JS than it does in Angular 2+

Explain what a controller is.

Controllers are where all the business logic live, they control the data in Angular applications.

How would you send an event to a parent controller or a child controller?

To send an event out from the current scope you can $broadcast it down to all of the children of the current scope or you can $emit it up to the parent scope of the current scope. You can handle/listen for the specific events raised by $broadcast and $emit with $on as the event propagates up or down the scope "tree".

//this goes down the hierarchy 
$scope.$broadcast("theEvent",data);
//this goes up the hierarchy 
$scope.$emit("theEvent",data);
$scope.$on("theEvent", function(evt,data){ 
  // handler your code here!! });

What is an Angular promise and what is it used for?

Promises help us deal with asynchronous functionality - it's saying "hey, I promise this data will be here in a little bit, come back and check again". This allows the rest of the application to continue running other operations, and only holding up the functionality that needs the information you've "promised" will be delivered. You can even chain promises to handle executing multiple asynchronous server calls where one depends on the result of another.

return $q(function (resolve, reject) {
        $http.get('www.myfakeendpoint.com/surpise/cool')
          .then(onSuccess)
          .catch(onError);
        function onSuccess(response) {
          if (response ) {
            resolve(response);
          } else {
            onError(response);
          }
        }
        function onError(e) {
          reject(e);
        }
      });
    },

More information about the difference between promises and observables.

What is an Angular service?

The main purpose of a service is to organize and share business logic, data, and functions that are used in multiple components of an Angular application. Angular services are singletons (they are only generated in a single instance, and then just referred to by all components dependent on it) and "lazily instantiated" meaning that AngularJS only instantiates a service when a component depends on it. Angular services are often implemented through dependency injection.

Difference between a factory and a service?

While they are both singletons, and have a lot of similarities, factories are functions that return the object while services are constructor functions of the object. But both services and factories allow us to create an object then use that object anywhere in our application.

app.service('MyGreatService', function () {
this.sayHello = function(name) {
     //your code here!
}  }; });

app.factory('MyGreatService', function () {
  return {
    sayHello: function (name) {
     //your code here!
    } } });

There is always more to know about each of these questions/topics!

Blog