AngularJS Interview Questions and Answers

How to validate form data in AngularJS?

AngularJS has enriches client-side form filling validation. It support HTML 5 validations and also allow to creationof custom validation to validate data.
For example following can be used to track error: 
•    $dirty - states that value has been changed.
•    $invalid- states that value entered is invalid.
•    $touched-states that value has been touched.

Explain the concept of Watchers, Dirty checking and Digest cycle?

The data-bindings in AngularJS can be achieved via Watchers, Dirty checking and Digest cycle concept-
Watchers: Angular creates a watcher that observes the view property, which will be triggered whenever the model changes, allowing Angular to update the view content.
Dirty checking: It is the process to check whether the item has been changed or not by comparing a value with its previous value, and if it has changed then a change event is fired.
Digest cycle: when any change happens in the model the view gets updated. This updating of the model and the view is done by a loop called as digest cycle.

What is dependency injection and how does it work in Angular?

Dependency injection is a software design pattern where we inject the dependent objects rather than consumer creating the objects. 
There are two big benefits of DI: - Decoupling and Testing.

How to make an Ajax call using AngularJS?

AngularJS provides $http control which works as a service to make ajax call to read data from the server. The server makes a database call to get the desired records. AngularJS needs data in JSON format. Once the data is ready, $http can be used to get the data from server in the following manner:
functionajaxController($scope,$http) {
varurl="serverData.txt";
$http.get(url).success( function(response) {
   $scope.showdataonPage = response; 
});

How do we make HTTP get and post calls in Angular?

To make HTTP calls we need to use the “$http” service of Angular. In order to use the http services you need to make provide the “$http” as an input in your function parameters as shown in the below code.
$http({ method: "GET", url: "http://localhost/SomeMethod"     }).success(function (data, status, headers, config)
        {                   // Here goes code after success        }
$http({ method: "POST", url: "http://localhost/SomeMethod "}).success(function (data, status, headers, config)
    {      // Here goes code after success    }

Explain ng-app directive?

The ng-app directive is used to bootstrap an AngularJS application.It can also be used to declare module for an application and for initialize the angular expression variable.

Explain ng-controller directive?

The ng-controller directive specifies a Controller thatbind with scope to populate view from model data.

Explain ng-model directive?

The ng-model bind the view property by evaluating the expression on the current scope. If the property doesn't already exist on this scope, it will be created implicitly and added to the scope.
The two way binding can enable on property with this directive.

Explain ng-click directive?

The ng-Click directive allows you to specify custom behavior and evaluation of expression when an element is clicked.
For ex;value of count changed when html button are clicked 
<button ng-click="count = count + 1" ng-init="count = 0">Increment</button>
count: {{count}}

Explain ng-repeat directive?

The ng-Repeat directive will repeat the instance of the element upon which it is declared for each item in a collection.

There are following variable we can used with this directive
$index : Iterator offset of the repeated element (0..length-1)
$first : True, if the repeated element is first in the iterator
$middle : True, if the repeated element is between first and last in the iterator
$last : True, if the repeated element is last in the iterator
$even : True, if the iterator position $index is even (otherwise, false)
$odd : True, if the iterator position $index is odd (otherwise, false)

Explain ng-show and ng-hide directive?

The ng-Show directive shows or hides the given HTML element based on the expression provided to the ng-Show attribute. And samethe ng-Hide directive shows or hides the given HTML element based on the expression provided to the ng-Hide attribute.

Latest Updates