Top 5 AngularJS Interview Questions

study

Whether you are the interviewee or interviewer, these top curated AngularJS interview questions and answers will help you prepare for your upcoming job interview as a Frontend Developer. A job interview might be stressful to many, most if not everyone will need to go through this process at least once in their career. Everyone has to do it and it should not be feared. Having said that, there are couple of techniques to overcome these fears and make it less intimidating and a more enjoyable experience.

Having done countless interviews throughout my career on both sides of the table, I would say the less you prepare, the more prepared you will be. This might sound counter-intuitive, but hear me out. If your knowledge of the subject is genuine then there is nothing to study for, when they ask you the question, the answer should just come naturally and you will be able to convey it to your audience. Having said that, here are some useful questions that might come up or for you to use in your next interview.

When a form state is “pristine”, what exactly does this mean?

When something is “pristine”, it means that it is clean. A field that is un-touched by the user will still be in it’s pristine state, when it is modified it becomes dirty. Removing all text will not make it pristine again because it has been touched already. This “pristine” state is useful for when doing form validation, you don’t want an error to appear everywhere by default.

What is “One-time binding” ::, and when to use it?

When you prepend an expression in a template with a ::, that is called a “One-time binding”, what this does is it will only allow the value to be evaluated once. This can be useful when you are sure that the data won’t change within the session. As a result, this can reduce overhead and improve performance. An example would be binding the year to the div.

controller.js

class Controller {
  constructor() {
    this.year = 2017;
  }
}

view.html

<div ng-bind="::$ctrl.year"></div>

Briefly describe how Angular’s digest cycle work

The “digest cycle” also known as “dirty checking” is a recursive loop that happens every time you update a model, if it takes more than 10 loops to resolve all bindings then it will fail. Why it needs to do this a few times is because a change in one part can cause a domino affect up the chain where there can be more changes. After every digest cycle, the DOM is then reflected with the changes in the model.

What is “transclude”, and what it is useful for?

In terms of AngularJS, when something is said to transclude, it allows free-form content that can go inside a component or directive. This provides much more flexibility when you are providing a component that is mainly used as a container. One such example is a panel which can have anything inside of it. See example below.

<panel header="This is a header" text="Some text"></panel>

Another way of doing this is to make transclude = true, and you will need an ng-transclude element or attribute. Then you can simply do this.

<panel>
  <h2>This is a header</h2>
  <p>Some text</p>
</panel>

Now your component is much more flexible, as the content is free-form. Also another advantage of using transcluded content is that just like any markup, you can have custom directive and components and it will still render as opposed to stuffing it in the attributes.

What is Dependency Injection and what are some of the benefits of using it?

The component does not need to know how the dependency was injected, it only cares that it is there available to be used any time. DI can be obtained simply be using the correct name in the method arguments, however if you are minifying the output code, it needs to be wrapped with an array of strings or use annotations such as ng-annotate.

Example controller: without minification

{
  controller: ($location, anotherDependency) => {
    $location.path('/angular');
    console.log(anotherDependency);
  }
}

As you can see it is very simple to use any service available with ease. However, the syntax might be complicated abit when you are minifying your code.

Example controller: with minification

{
  controller: ['$location', 'anotherDependency', ($location, anotherDependency) => {
    $location.path('/angular');
    console.log(anotherDependency);
  }]
}

The reason for wrapping it around an array of strings is because when minified, the arguments becomes mangled such as it becomes a and b or any other single character to keep filesize smaller. Because of this, Angular doesn’t know what dependency it is because the reference to the name itself has been lost. To overcome this they came up with this clever trick as literal strings will never change and so we can be sure that the correct dependency has been injected. Code wise it looks repetitive, that is where ng-annotate comes in.

Example controller: using ng-annotate

{
  controller: /*@ngInject*/($location, anotherDependency) => {
    $location.path('/angular');
    console.log(anotherDependency);
  }
}

And the code becomes much cleaner as you do not have to repeat yourself with decorating it around array strings with the same name. For more information please refer to the ng-annotate repository.

I hope you guys found this guide useful, please feel free to leave any questions or comment below.