AngularJS – Interview Questions

Explain AngularJS ?

AngularJS is a javaScript framework which simplifies binding JS objects with HTML UI elements. AngularJS provides developers options to write client side application (using JavaScript) in a clean MVC (Model View Controller) way.

Why to use AngularJS?

There are following reasons to choose AngularJS as a web development framework:

  • It is based on MVC pattern which helps you to organize your web apps.
  • It extends HTML by attaching directives to your HTML markup with new attributes or tags and expressions in order to define very powerful templates.
  • It also allows you to create your own directives, making reusable components that fill your needs and abstract your DOM manipulation logic.
  • It supports two-way data binding i.e. connects your HTML (views) to your JavaScript objects (models) seamlessly. In this way any change in model will update the view and vice versa without any DOM manipulation or event handling.
  • It supports services that can be injected into your controllers to use some utility code to fulfil your need. For example, it provides $http service to communicate with REST service.
  • It supports dependency injection which helps you to test your angular app code very easily.

What are the advantages of AngularJS?

There are following advantages of AngularJS:

  • Data Binding – AngularJS provides a powerful data binding mechanism to bind data to HTML elements by using scope.
  • Customize & Extensible – AngularJS is customized and extensible as per you requirement. You can create your own custom components like directives, services etc.
  • Code Reusability – AngularJS allows you to write code which can be reused. For example custom directive which you can reuse.
  • Support – AngularJS is mature community to help you. It has widely support over the internet. Also, AngularJS is supported by Google which gives it an advantage.
  • Compatibility – AngularJS is based on JavaScript which makes it easier to integrate with any other JavaScript library and runnable on browsers like IE, Opera, FF, Safari, Chrome etc.
  • Testing – AngularJS is designed to be testable so that you can test your AngularJS app components as easy as possible. It has dependency injection at its core, which makes it easy to test.

Does AngularJS has dependency on jQuery?

AngularJS has no dependency on jQuery library. But it can be used with jQuery library.

How to use jQuery with AngularJS?

By default AngularJS use jQLite which is the subset of jQuery. If you want to use jQuery then simply load the jQuery library before loading the AngularJS. By doing so, Angular will skip jQLite and will started to use jQuery library.

Is AngularJS a library, framework, plugin or a browser extension?

AngularJS is a first class JavaScript framework which allows you to build well structured, easily testable, and maintainable front-end applications. It is not a library since library provides you limited functionality or has dependencies to other libraries.It is not a plugin or browser extension since it is based on JavaScript and compatible with both desktop and mobile browsers.

What are AngularJS features?

  • Modules
  • Directives
  • Templates
  • Scope
  • Expressions
  • Data Binding
  • MVC (Model, View & Controller)
  • Validations
  • Filters
  • Services
  • Routing
  • Dependency Injection
  • Testing

What are Modules in AngularJS?

AngularJS modules are containers just like namespace in C#. They divide an angular app into small, reusable and functional components which can be integrated with other angular app. Each module is identified by a unique name and can be dependent on other modules. In AngularJS, every web page (view) can have a single module assigned to it via ng-app directive.

 // defining module angular.module('myApp', []);
 //OR defining module which has dependency on other modules angular.module
('myApp', ['dependentModule1', 'dependentModule2']);

What components can be defined within AngularJS modules?

  • Directive
  • Filter
  • Controller
  • Factory
  • Service
  • Provider
  • Value
  • Config settings and Routes

What is core module in AngularJS?

ng is the core module in angular. This module is loaded by default when an angular app is started. This module provides the essential components for your angular app like directives, services/factories, filters, global APIs and testing components.

How angular modules load the dependencies?

An angular module use configuration and run blocks to inject dependencies (like providers, services and constants) which get applied to the angular app during the bootstrap process.

What is difference between config() and run() method in AngularJS?

Configuration block

This block is executed during the provider registration and configuration phase. Only providers and constants can be injected into configuration blocks. This block is used to inject module wise configuration settings to prevent accidental instantiation of services before they have been fully configured. This block is created using config() method.

Run block

This block is executed after the configuration block. It is used to inject instances and constants. This block is created using run() method. This method is like as main method in C or C++. The run block is a great place to put event handlers that need to be executed at the root level for the application. For example, authentication handlers.

When dependent modules of a module are loaded?

A module might have dependencies on other modules. The dependent modules are loaded by angular before the requiring module is loaded.

In other words the configuration blocks of the dependent modules execute before the configuration blocks of the requiring module. The same is true for the run blocks. Each module can only be loaded once, even if multiple other modules require it.

What is Angular Prefixes $ and $$?

To prevent accidental name collisions with your code, Angular prefixes names of public objects with $ and names of private objects with $$. So, do not use the $ or $$ prefix in your code.

What are Directives in AngularJS?

AngularJS directives are a combination of AngularJS template markups (HTML attributes or elements, or CSS classes) and supporting JavaScript code. The JavaScript directive code defines the template data and behaviors of the HTML elements. AngularJS directives are used to extend the HTML vocabulary i.e. they decorate html elements with new behaviors and help to manipulate html elements attributes in interesting way. There are some built-in directives provided by AngularJS like as ng-app, ng-controller, ng-repeat, ng-model etc.

What is the role of ng-app, ng-init and ng-model directives?

The main role of these directives is explained as:

  • ng-app – Initialize the angular app.
  • ng-init – Initialize the angular app data.
  • ng-model – Bind the html elements like input, select, text area to angular app model.

Is AngularJS a templating system?

At the highest level, Angular does look like a just another templating system. But there is one important reason why the Angular templating system is different, that makes it very good fit for application development: bidirectional data binding. The template is compiled in the browser and the compilation step produces a live view. This means you, the developers, don’t need to write code to constantly sync the view with the model and the model with the view as in other templating systems.

What is a scope in AngularJS?

scope is an object that refers to the application model. It is the glue (binding part) between application controller and the view.

If we consider an AngularJS application to consist of:

  • View, which is the HTML.
  • Model, which is the data available for the current view.
  • Controller, which is the JavaScript function that makes/changes/removes/controls the data.

Then the scope is the Model.

The scope is a JavaScript object with properties and methods, which are available for both the view and the controller.

Explain what is linking function and type of linking function?

Link combines the directives with a scope and produce a live view. For registering DOM listeners as well as updating the DOM, link function is responsible. After that template is cloned it is executed.

  • Pre-linking function: Pre-linking function is executed before the child elements are linked. It is not considered as the safe way for DOM transformation.
  • Post linking function:Post linking function is executed after the child elements are linked. It is safe to do DOM transformation by post-linking function.

Explain what is injector?

There is one injector per Angular application. Normally you don’t need to interact with it directly. The injector is key to making dependency injection work in Angular.

Module methods such as factory, service, directive, etc. register these items with the injector. When you inject something (e.g., a service into a controller), the injector will lookup and then instantiate the service (if it wasn’t instantiated already — if it was, it will return the already-instantiated object).

Explain what is string interpolation in angular.js ?

In angular.js the compiler during the compilation process matches text and attributes using interpolate service to see if they contains embedded expressions.  As part of normal digest cycle these expressions are updated and registered as watches.

Mention the steps for the compilation process of HTML happens?

Compilation of HTML process occurs in following ways:

  • Using the standard browser API, first the HTML is parsed into DOM
  • By using the call to the $compile () method, compilation of the DOM is performed. The method traverses the DOM and matches the directives.
  • Link the template with scope by calling the linking function returned from the previous step

Explain what is the difference between link and compile in angular.js?

In compile phase the angular parser starts parsing the DOM and whenever the parser encounters a directive it creates a function. These functions are termed as template or compiled functions. In this phase we do not have access to the $scope data. In the link phase the data i.e. ($scope) is attached to the template function and executed to get the final HTML output.

Compile – It works on template. It’s like adding a class element in to the DOM (i.e., manipulation of tElement = template element), hence manipulations that apply to all DOM clones of the template associated with the directive.

Link – It works on instances. Usually used for registering DOM listeners (i.e., $watch expressions on the instance scope) as well as instance DOM manipulation. (i.e., manipulation of iElement = individual instance element).

Mention what are the styling form that ngModel adds to CSS classes ?

ngModel adds these CSS classes to allow styling of form as well as control:

  • ng- valid
  • ng- invalid
  • ng-pristine
  • ng-dirty

Mention what are the advantages of using Angular.js framework ?

Advantages of using Angular.js as framework are:

  • Supports two way data-binding
  • Supports MVC pattern
  • Support static template and angular template
  • Can add custom directive
  • Supports REST full services
  • Supports form validations
  • Support both client and server communication
  • Support dependency injection
  • Applying Animations
  • Event Handlers

Explain AngularJS boot process?

When the page is loaded in the browser, following things happen:

  • HTML document is loaded into the browser, and evaluated by the browser. AngularJS JavaScript file is loaded; the angular global object is created. Next, JavaScript which registers controller functions is executed.
  • Next AngularJS scans through the HTML to look for AngularJS apps and views. Once view is located, it connects that view to the corresponding controller function.
  • Next, AngularJS executes the controller functions. It then renders the views with data from the model populated by the controller. The page gets ready.

Explain ng-app directive?

ng-app directive defines and links an AngularJS application to HTML. It also indicate the start of the application.

Explain ng-model directive?

ng-model directive binds the values of AngularJS application data to HTML input controls.

Explain ng-bind directive?

ng-bind directive binds the AngularJS Application data to HTML tags.

Explain ng-controller directive

ng-controller directive tells AngularJS what controller to use with this view

Explain ng-repeat directive ?

ng-repeat directive repeats html elements for each item in a collection.

What are AngularJS expressions ?

Expressions are used to bind application data to html. Expressions are written inside double braces like {{ expression}}. Expressions behave in same way as ng-bind directives. AngularJS application expressions are pure JavaScript expressions and outputs the data where they are used.

What is use of $routeProvider in AngularJS ?

$routeProvider is the key service which set the configuration of urls, maps them with the corresponding html page or ng-template, and attaches a controller with the same.

What is $rootScope ?

Scope is a special JavaScript object which plays the role of joining controller with the views. Scope contains the model data. In controllers, model data is accessed via $scope object. $rootScope is the parent of all of the scope variables.

What is a service ?

Services are JavaScript functions and are responsible to do specific tasks only. Each service is responsible for a specific task for example, $http is used to make ajax call to get the server data. $route is used to define the routing information and so on. Inbuilt services are always prefixed with $ symbol.

What is internationalization ?

Internationalization is a way to show locale specific information on a website. For example, display content of a website in English language in United States and in Danish in France.

 What is the difference between ng-show/ng-hide and ng-if directives?

ng-show/ng-hide will always insert the DOM element, but will display/hide it based on the condition. ng-if will not insert the DOM element until the condition is not fulfilled.

ng-if is better when we needed the DOM to be loaded conditionally, as it will help load page bit faster compared to ng-show/ng-hide.

What is a digest cycle in AngularJS?

In each digest cycle Angular compares the old and the new version of the scope model values. The digest cycle is triggered automatically. We can also use $apply() if we want to trigger the digest cycle manually.

For more information, take a look in the ng-book explanation: The Digest Loop and $apply

Where should we implement the DOM manipulation in AngularJS?

In the directives. DOM Manipulations should not exist in controllers, services or anywhere else but in directives.

Here is a detailed explanation

What is the difference between one-way binding and two-way binding?

– One way binding implies that the scope variable in the html will be set to the first value its model is bound to (i.e. assigned to)
– Two way binding implies that the scope variable will change it’s value everytime its model is assigned to a different value.

Explain how $scope.$apply() works

$scope.$apply re-evaluates all the declared ng-models and applies the change to any that have been altered (i.e. assigned to a new value)
Explanation: $scope.$apply() is one of the core angular functions that should never be used explicitly, it forces the angular engine to run on all the watched variables and all external variables and apply the changes on their values.

What directive would you use to hide elements from the HTML DOM by removing them from that DOM not changing their styling?

The ngIf Directive, when applied to an element, will remove that element from the DOM if it’s condition is false.

What makes the angular.copy() method so powerful?

It creates a deep copy of the variable. A deep copy of a variable means it doesn’t point to the same memory reference as that variable. Usually assigning one variable to another creates a “shallow copy”, which makes the two variables point to the same memory reference. Therefore if we change one, the other changes as well.

When creating a directive, it can be used in several different ways in the view. Which ways for using a directive do you know? How do you define the way your directive will be used?

When you create a directive, it can be used as an attribute, element or class name. To define which way to use, you need to set the restrict option in your directive declaration.

The restrict option is typically set to:

‘A’ – only matches attribute name
‘E’ – only matches element name
‘C’ – only matches class name

These restrictions can all be combined as needed:

‘AEC’ – matches either attribute or element or class name

When should you use an attribute versus an element?

Use an element when you are creating a component that is in control of the template. Use an attribute when you are decorating an existing element with new functionality.

Explain what is a $scope in AngularJS

Scope is an object that refers to the application model. It is an execution context for expressions. Scopes are arranged in hierarchical structure which mimic the DOM structure of the application. Scopes can watch expressions and propagate events. Scopes are objects that refer to the model. They act as glue between controller and view.

This question is important as it will judge a persons knowledge about a $scope object, and it is one of the most important concepts in AngularJS. Scope acts like a bridge between view and model.

What are Directives?

Directives are markers on a DOM element (such as an attribute, element name, comment or CSS class) that tell AngularJS’s HTML compiler ($compile) to attach a specified behavior to that DOM element (e.g. via event listeners), or even to transform the DOM element and its children. Angular comes with a set of these directives built-in, like ngBind, ngModel, and ngClass. Much like you create controllers and services, you can create your own directives for Angular to use. When Angular bootstraps your application, the HTML compiler traverses the DOM matching directives against the DOM elements.

This question is important because directives define the UI while defining a single page app. You need to be very clear about how to create a new custom directive or use the existing ones already pre-build in AngularJS.

What is a singleton pattern and where we can find it in Angularjs?

Is a great pattern that restricts the use of a class more than once. We can find singleton pattern in angular in dependency injection and in the services.

In a sense, if you do 2 times ‘new Object()‘ without this pattern, you will be alocating 2 pieces of memory for the same object. With singleton pattern, if the object exists, you reuse it.

Source: http://joelhooks.com/blog/2013/05/01/when-is-a-singleton-not-a-singleton/

How would you programatically change or adapt the template of a directive before it is executed and transformed?

You would use the compile function. The compile function gives you access to the directive’s template before transclusion occurs and templates are transformed, so changes can safely be made to DOM elements. This is very useful for cases where the DOM needs to be constructed based on runtime directive parameters.



Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s