AngularJS Interview Questions

AngularJS Interview Questions Download AngularJS Interview Questions PDF

AngularJS Interview Questions

Angular js Expression is JavaScript alike code snippets used to bind expression data in view or HTML. Angular expressions are written inside two curly braces.

{{a+b}}

It is used to allocating the value of an object into another object however the object value must not be altered.

If you are adding any new property or altering any value of the property then the object noting to the same object will update by applying angular. Copy() method.

There are two ways to use a Multiple ng-app within a single page in AngularJS. One is the bootstrap method and the other is ngModules directive.

AngularJS provides full support for both the unit and end-to-end testing.

The unit testing is a method that helps the developers validate the isolated pieces of code and end-to-end testing is required when you want to ascertain the set of components integrated together work as you expect.

The scope is the object that represents the “model” of your application. It contains fields that store data which is presented to the user via the template, as well as functions which can be called when the user performs certain actions such as clicking a button.

There are three types of directive scopes available in Angular.

  • Parent Scope: is default scope
  • Child Scope:  If the properties and functions you set on the scope are not relevant to other directives and the parent, you should probably create a new child scope.
  • Isolated Scope: Isolated Scope is used if the directive you are going to build is self-contained and reusable. Does not inherit from parent scope, used for private/internal use.

Data-binding in Angular apps is the automatic synchronization of data between the model and view components. The way that Angular implements data-binding lets you treat the model as the single-source-of-truth in your application. The view is a projection of the model at all times. When the model changes, the view reflects the change and vice versa.

Passing the $interpolateprovider in the config can help us change the start and end symbols used in our Angular JS expressions.

$evalAsync executes the expression on the current scope at a later time and makes no guarantees as to when the expression will be executed.

$timeout also executes the expression on the current scope on later time but also runs after the DOM has been manipulated by the Angular and after the browser renders that cause flicker in some cases.

Some of the methods supported by $http services are

  • GET
  • HEAD
  • POST
  • PUT
  • DELETE
  • CONNECT
  • OPTIONS
  • TRACE

$broadcast, $emit, and $on are services in Angular Js. Below we have listed why they are used In Angular JS.

$broadcast(): $broadcast() service of Angular is used to propagate the event to all of his child controllers and it’s registered parent $rootscope.scope listeners.

$rootScope.$broadcast('SummaryEvent', {
                priority: priority               
      });

$on(): AngularJS $on() service is used to listen any type of event raised by $broadcast and $emit.

$scope.$on(''SummaryEvent'', function (event, args) {
Vm.priority=args.priority
   });

$emit: $emit is similar to $broadcast service but it is used to propagate the event to upwards through the scope hierarchy and notify to the registered $rootScope.Scope listeners.

The AngularJS framework includes certain directives that can be used to provide the custom behavior on various DOM events. Some of the events are:

  • ng-click
  • ng-keyup
  • ng-keydown
  • ng-keypress
  • ng-dblclick
  • ng-mousedown
  • ng-mouseleave
  • ng-mouseenter
  • ng-change

ng-if – This directive removes a portion of the DOM tree, which is based on the expression.
In case the expression is assigned to ng-if, it evaluates to a false value, and then the element is deleted from the DOM tree, or else a clone of the element is reinserted into the DOM.
ng-switch – This directive is used based on a scope expression to conditionally swap DOM structure on the template.
The ng-switch default directive will be preserved at the specific location in a template.
ng-repeat – This directive is used to instantiate the template once per item from a collection.
Each template which is instantiated gets its own scope where the given loop variable is set to the current collection of item.

AngularJS directives are extended HTML attributes with the prefix ng-
The 3 main directives of angular js are

  • ng-app:- directive is used to flag the HTML element that Angular should consider to be the root element of our application. Angular uses spinal-case for its custom attributes and camelCase for the corresponding directives which implement them.
  • ng-model:- directive allows us to bind values of HTML controls (input, select, textarea) to application data. When using ngModel, not only change in the scope reflected in the view, but changes in the view are reflected back into the scope.
  • ng-bind:- directive binds application modal data to the HTML view.