Angularjs interview questions and answers for freshers

Which components can be created within AngularJS modules?

There are following components with in AngularJS module such as:

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

What is data binding in AgularJS?

The data binding is the most important features of AngularJS and cuts out a lot of need to do the types of DOM manipulations. We know that, AngularJS will automatically update your view so you do not have to! Like in jQuery we respond to many occasions and then update content. Example that,

$.ajax({
  url: '/myEndpoint.json',
  success: function ( data, status ) {
    $('ul#log').append('<li>Data Received!</li>');
  }
});
 
For a view that looks like this:
 
<ul class="messages" id="log">
</ul>

Who is created AngularJS?

Misko Hevery and he was employee of Google.

Explain what is difference between run () and config() method?

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

Configuration Block: Configuration block is executed during a provider registration and configuration section. Only providers and constants can be injected into the configuration block. Configuration block is used to inject module wise configuration settings to prevent accidental instantiation of services before they have been completely configured. Configuration block is also created using config() method.

Find can AngularJS applications (ng-app) be also nested within each other?

READ  AngularJS MVC Architecture

No, AngularJS applications cannot be nested within each other.

Explain what is MVC in AngularJS?

The MVC is stands for Model View Controller. MVC is a software design pattern for developing web applications. This pattern is made up of the following three parts:

Model:  This part is the lowest level of the pattern and it responsible for maintaining data.

View: This part is responsible for displaying all or a portion of the data to the user.

Controller: This part is providing a software code that controls the interactions between the model and view.

Find how many different ways you can define a directive and what is the best practice?

The AngularJS basically created camelCase for directives. However, HTML is not case sensitive so it refers to directive in the DOM in lower case form, delimited by dash. But when Angular compiles and then it normalizes the directives.

  • ng-model
  • ng-app
  • ng-controller
  • ng-repeat
  • ng-if
  • ng-show
  • ng-hide
  • ng-hide
  • ng-class
  • ng-src

Event Listener: In event listener include two directives such as:

  • ng-click
  • ng-dbl-click

Mouse Event Listener: In this event include many directives like as:

  • ng-mousedown
  • ng-mouseup
  • ng-moseenter
  • ng-moseleave
  • ng-mosemove
  • ng-moseover

Keyboard Event Listener: In keyboard event listener include some directives such as:

  • ng-keydown
  • ng-keyup
  • ng-keypress
  • ng-change

Mention when the latest AngularJS was released?

The latest AngularJS was release October 31, in 2014

Explain how will you display different images based on the status being red, amber, and green?

First we use the ng-switch and ng-switch when directives as given below:

 

<div ng-switch on="account.status">
 <div ng-switch-when="AMBER">
  <img class="statusIcon"
   src='apps/dashboard/amber-dot.jpg' />
 </div>
 <div ng-switch-when="GREEN">
  <img class="statusIcon"
   src='apps/dashboard/green-dot.jpg' />
 </div>
 <div ng-switch-when="RED">
  <img class="statusIcon"
   src='apps/dashboard/red-dot.jpg' />
 </div>
</div>

What is Global API?

READ  AngularJS Ajax calls

This API provides you global functions to perform common JavaScript such as comparing objects, deep copying, iterating through objects, and coverting JSon data etc.All the global functions accessed by using the angular object. Global function has much function and some function mention here:

  • isObject
  • lowercase
  • uppercase
  • forEach
  • isString
  • isNumber
  • isDate
  • isArray
  • isFunction
  • copy
  • equals
  • bind
  • toJson
  • fromJson
  • bootstrap
  • reloadWithDebuginfo
  • injector
  • module
  • isUndefined
  • isElement

Mention how AngularJS integrates with HTML?

An AngularJS being a pure JavaScript based library integrates easily with HTML.

Involve angularjs javascript library in the html page such as:

<head>
   <script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>

Point to AngularJS application: In next point we tell what part of the HTML contains the AngularJS apps. So, this is done by adding the ng-app attribute to the root HTML element of the AngularJS app. So, you can either add it to html element or body element like this:

<body ng-app = "myapp">
</body>

Explain what is Angular prefix $ and $$?

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

Mention what is restricting option in directive?

The restricted option in angular directive is used to declare how a directive will be involved in your angular apps such as class, attribute, element or comment.