AngularJS Interview Questions

AngularJS Interview Questions Download AngularJS Interview Questions PDF

AngularJS Interview Questions

DDO Stands for Directive Definition Object. DDO is used while creating a custom directive in AngularJs.

Angular uses these prefixes to prevent accidental code collision with users code.
$ prefix is used with public objects whereas $$ prefix is used with a private object.

$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.

Routing is one the core feature of AngularJs Framework that is useful in building a single page web application with multiple views. In Angular ngRoute Module is used to implement Routing. ngView,$routeProvider,$route and $routeParams are different components of the ngRoute Module that helps to configure and mapping Url to views.

There are 30 inbuilt services in AngularJs. Below are few most used services in AngularJs.

  • $location
  • $scope
  • $http
  • $timeout
  • $interval
  • $window

The transclusion in Angular JS will allow you to move the original children of a directive to a specific location inside a new template.The ng directive marks the insertion point for the transcluded DOM of the very near parent directive that uses transclusion.
ng-transclude or ng-transclude-slot attribute directives are used for transclusion in Angular JS.

locale service provides with the localization rules for Angular JS components.

Adding the regex directly to the ng pattern to the attribute can help you validate the URL in Angular JS.

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

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.

Caching can be enabled by setting the config.cache value or the default cache value to TRUE or to a cache object that is created with $cacheFactory.
In case you want to cache all the responses, then you can set the default cache value to TRUE.
And, if you want to cache a specific response, then you can set the config.cache value to TRUE.

The RouteProvider and the RouteParams can be used to get the URL parameters in the controller.
As the route wires up the URL to the controller and RouteParams can be passed to the controller to get the URL parameters.

Compile function: To template DOM manipulation and to gather all the directives, the compile function is used.
Link function: To register DOM listeners as well as for the instance DOM manipulation, the Link function is used.

Angular form validation and ng-pattern directive can be used to validate the email and phone number in Angular JS.

In angular there is a scope variable called $parent (i.e. $scope.$parent). $parent is used to access parent scope from child controller in Angular JS.
Example:


<div ng-controller="ParentCtrl">
    <h1>{{ name }}</h1>
    <p>{{ address }}</p>
    <div ng-controller="ChildCtrl">
        <h1>{{ title }}</h1>
        <input type="text" ng-model="$parent.address" />
</div>