AngularJS Developer Interview Questions & Answers

Download PDF

An injector is a service locator. It is used to retrieve object instances as defined by provider, instantiate types, invoke methods and load modules. There is a single injector per Angular application, it helps to look up an object instance by its name.

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.

This topic is important so developers can understand the several ways a directive can be used inside a view and when to use each way.

ng-disabled directive disables a given control.

In below example, we've added ng-disabled attribute to a HTML button and pass it a model. Then we've attached the model to an checkbox and can see the variation.

<input type = "checkbox" ng-model = "enableDisableButton">Disable Button
<button ng-disabled = "enableDisableButton">Click Me!</button>

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.

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.

$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

Yes! In AngularJS we can create custom directive to extend AngularJS existing functionalities.

Custom directives are used in AngularJS to extend the functionality of HTML. Custom directives are defined using "directive" function. A custom directive simply replaces the element for which it is activated. AngularJS application during bootstrap finds the matching elements and do one time activity using its compile() method of the custom directive then process the element using link() method of the custom directive based on the scope of the directive.

It is concept of switching views. AngularJS based controller decides which view to render based on the business logic.

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.

ng-model directive binds the values of AngularJS application data to HTML input controls. It creates a model variable which can be used with the html page and within the container control( for example, div) having ng-app directive.

Scope refers to the application model, it acts like glue between application controller and the view. Scopes are arranged in hierarchical structure and impersonate the DOM ( Document Object Model) structure of the application. It can watch expressions and propagate events.

AngularJS works fine with the latest versions of Safari, Chrome, Firefox, Opera 15+, and IE9+ (Internet Explorer).
It also supports various mobile browsers like Android, Chrome Mobile, iOS Safari, and Opera Mobile.

Note: Versions 1.3 and later of AngularJS dropped support for Internet Explorer 8.

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.

Directives are markers on DOM elements (such as elements, attributes, css, and more). These can be used to create custom HTML tags that serve as new, custom widgets. AngularJS has built-in directives (ng-bind, ng-model, etc) to perform most of the task that developers have to do.

Following are the three core directives of AngularJS.

☛ ng-app − This directive defines and links an AngularJS application to HTML.

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

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

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.

We only need to keep in mind what the difference between these directives is, so deciding which one to use totally depends on the task requirements.

AngularJS has several advantages in web development.

☛ AngularJS supports MVC pattern
☛ Can do two ways data binding using AngularJS
☛ It has per-defined form validations
☛ It supports both client server communication
☛ It supports animations

Traceur compiler compiles ECMAScript Edition 6 (ES6) (including classes, generators and so on) code on the fly to regular Javascript (ECMAScript Edition 5 [ES5]) to make it compatible for the browser.

Here is a list of IDE Plugins and Extensions which can enhance the way you code with AngularJS:

☛ Sublime Text
☛ WebStorm
☛ Eclipse
☛ Netbeans
☛ Visual Studio 2012/2013 Express or higher
☛ TextMate
☛ Brackets
☛ ATOM

Following are the advantages of AngularJS.

☛ AngularJS provides capability to create Single Page Application in a very clean and maintainable way.
☛ AngularJS provides data binding capability to HTML thus giving user a rich and responsive experience.
☛ AngularJS code is unit testable.
☛ AngularJS uses dependency injection and make use of separation of concerns.
☛ AngularJS provides reusable components.
☛ With AngularJS, developer writes less code and gets more functionality.
☛ In AngularJS, views are pure html pages, and controllers written in JavaScript do the business processing.
☛ AngularJS applications can run on all major browsers and smart phones including Android and iOS based phones/tablets.

ng-click directive represents a AngularJS click event.

In below example, we've added ng-click attribute to a HTML button and added an expression to updated a model. Then we can see the variation.

<p>Total click: {{ clickCounter }}</p></td>
<button ng-click = "clickCounter = clickCounter + 1">Click Me!</button>

$rootScope is the parent object of all $scope Angular objects created in a web page.

During compilation process when specific HTML constructs are encountered a behaviour or function is triggered, this function is referred as directive. It is executed when the compiler encounters it in the DOM.

Different types of directives are

► Element directives
► Attribute directives
► CSS class directives
► Comment directives

Controllers are Javascript functions which provide data and logic to HTML UI. As the name suggests, they control how data flows from the server to HTML UI.

You can initialize a select box with options on page load by using ng-init directive

<div ng-controller = “ apps/dashboard/account ” ng-switch
On = “! ! accounts” ng-init = “ loadData ( ) ”>