Top 20 AngularJS Interview Questions and Answers

Shailendra Chauhan  Print 
27 Oct 2018
01 Nov 2018
510

AngularJS is a most popular JavaScript framework for building single page applications. AngularJS can be used easily by adding a <script> tag reference. This article contains the top 20 AngularJS interview questions and answers, in order to prepare you for the AngularJS interview.

  1. Does AngularJS support MVC or MVVM pattern?

    AngularJS is an MVW framework where M for Model, V for view and W for Whatever. It means, you can follow either MVC or MVVM or MVP pattern since W stands for whatever you like.

  2. What is ViewModel?

    A ViewModel is an object that provides specific data and methods to maintain specific views. Basically, it is a $scope object which lives within your AngularJS app's controller. A ViewModel is associated with a HTML element with the ng-model and ng-bind directives.

  3. What is Controller in AngularJS?

    The controller defines the actual behavior of your app. It contains presentation logic for the view and connects the model to view with the help of $scope. A controller is associated with a HTML element with the ng-controller directive.

    Creating Controller

     <script type="text/javascript">
     //defining main controller
     app.controller('mainController', function ($scope) {
     
     //defining book viewmodel
     $scope.book =
     {
     id: 1,
     name: 'AngularJS Interview Questions and Answers',
     author: 'Shailendra Chauhan',
     };
     });
     </script>
    

    Using Controller

     <div ng-controller="mainController">
     Id: <span ng-bind="book.id"></span>
     <br />
     Name:<input type="text" ng-model="book.name" />
     <br />
     Author: <input type="text" ng-model="book.author" />
     </div>
    
  4. How to share data or state between AngularJS controllers?

    There are multiple ways to share data or state between AngularJS controllers. The most commonly used ways are Scope, Service, Factory and Providers.

  5. What are Templates in AngularJS?

    AngularJS templates are just plain old HTML that contains Angular-specific elements and attributes. AngularJS used these templates to show information from the model and controller.

    Creating an AngularJS template

     <html ng-app>
     <!-- body tag with ngController directive -->
     <body ng-controller="MyController">
     <input ng-model="txtName" value="shailendra"/>
     <!-- button tag with ng-click directive & string expression 'btnText' wrapped in "{{ }}" markup -->
     <button ng-click="changeName()">{{btnText}}</button> 
     <script src="angular.js"> 
     </body>
     </html>
    
  6. What is View in AngularJS?

    The view is responsible for presenting your model data to the end user. A view contains HTML markup including AngularJS directives, attributes and expression which AngularJS parse and compiled with HTML to generate the dynamic view.

  7. What are Expressions in AngularJS?

    AngularJS expressions are looks similar to JavaScript expressions, which you put inside the HTML templates by using double braces such as {{expression}}. AngularJS evaluates the expressions and dynamically insert the result to a web page. Like JavaScript expressions, AngularJS expressions can have literals, variables and operators. There are some valid AngularJS expressions :

     
    {{ 1 + 2 }}
    {{ x + y }}
    {{ x == y }}
    {{ x = 2 }}
    {{ user.Id }}
    
  8. What is Databinding in AngularJS?

    Databinding is a mechanism to bind data or events with your HTML elements. Before Databinding, you have to manipulate or update the DOM elements and attributes to update model changes. AngularJS Databinding handles it nicely with the help of following Databinding mechanism.

    1. One-Way Databinding

    2. Two-Way Databinding

  9. Explain Two-way Databinding in AngularJS?

    Two-way data binding is the most popular feature of AngularJS. It is used to sync the data between model and view i.e. any change in model will update the view and vice versa. The two-way databinding, you can use only with form input elemnets using ng-model directive. It can't be used with other elements like span, div, para etc. which don't accept any input from user.

    Two-Way Databinding Example

     
     <div ng-controller="myCtrl">
     <label>Full Name (two-way binding): <input type="text" ng-model="name" /></label>
     <strong>Your Full Name (normal binding):</strong> {{name}}
     </div>
     <script>
     var app = angular.module('app', []);
     app.controller("myCtrl", function ($scope) {
     $scope.name = "Mohan Chauhan"
     })
     </script>
    
  10. What is One-way Databinding in AngularJS?

    AngularJS 1.3 came with one new databinding called as One-way databinding. For one-way databinding, double colon (::) is used as databinding expression syntax.

    One-Way data binding Example

     <div ng-controller="myCtrl"> 
     <strong>Your Full Name (one-way binding):</strong> {{::name}}<br />
     <strong>Your Full Name (normal binding):</strong> {{name}}
     </div>
     <script>
     var app = angular.module('app', []);
     app.controller("myCtrl", function ($scope) {
     $scope.name = "Mohan Chauhan"
     })
     </script>
    
  11. What are Directives in AngularJS?

    AngularJS directives combines template markups (HTML attributes or elements, or CSS classes) and supporting JavaScript code to extend the power of existing HTML. The supporting JavaScript code defines the AngularJS template markup behaviour.

    Infact, AngularJS directives extends the HTML vocabulary by adding new attributes to manipulate HTML elements in easy way. AngularJS supports various built-in directives like as ng-app, ng-controller, ng-repeat, ng-model etc.

  12. What is the use of ng-app, ng-init and ng-model directives?

    The main use of ng-app, ng-init and ng-model directives are as :

    • ng-app :This directive is used to bootstrap the angular app.

    • ng-init :This directive is used to initialize data to AngularJS models.

    • ng-model :This directive is used to bind the data with form elements like input, select, text area etc.

  13. What are different ways to invoke a directive?

    There are four methods to invoke a directive in your angular app which are equivalent.

    Methods Syntax

     As an attribute - <span my-directive></span>
     As a class - <span class="my-directive: expression;"></span>
     As an element - <my-directive></my-directive>
     As a comment - <!-- directive: my-directive expression -->
    
  14. What are restrict options in directive?

    The restrict option in an angular directive is used to specify how a directive will be invoked in your angular app i.e. as an attribute, class, element or comment. There are four valid options for restrict :

     'A' (Attribute) - <span my-directive></span>
     'C' (Class) - <span class="my-directive:expression;"></span>
     'E' (Element) - <my-directive></my-directive>
     'M' (Comment) - <!-- directive: my-directive expression -->
    
  15. What are Filters in AngularJS?

    Filters are used to transform data before displaying it to the user. Filters are used in templates, controllers, services and directives for data transformation. AngularJS supports various built-in filters like: currency, date, number, orderby, lowercase, uppercase etc. Even, you can create custom filter.

    Filter Syntax

     
    {{ expression | filter }}
    

    Filter Example

     
     <script type="text/javascript">
    {{ 14 | currency }} //returns $14.00
     </script>
    
  16. How to define Routing in AngularJS?

    Routing helps you to serve your web application app pages(views). The AngularJS service $routeProvider helps us to configure and handle routes. The $routeProvider service provides two methods when() and otherwise() to define the routes. The $routeProvider service is available in ngRoute module, so you have to it's reference.

    Defining Route for your application

     <script type="text/javascript">
     var myApp = angular.module('myApp', ['ngRoute']);
     
     myApp.config(['$routeProvider',
     function ($routeProvider) {
     $routeProvider.
     when('/products', { //route
     templateUrl: 'views/products.html',
     controller: 'productController'
     }).
     when('/product/:productId', { //route with parameter
     templateUrl: 'views/product.html',
     controller: 'productController'
     }).
     otherwise({ //default route
     redirectTo: '/index'
     });
     }]);
     </script>
    
  17. What is AngularUI router and how it is different from ngRoute?

    The UI-Router is developed by AngularUI team for configuring and managing routes in an AngularJS application. It is based upon state rather than URL, so it changes an angular app views based on state of the application. The ui-router helps you to create nested views, use multiple views on the same page, have multiple views that control a single view, and more. To use it you need to include reference of ui-router.js file into your angular app.

  18. How Dependency Injection works in AngularJS?

    Dependency Injection (DI) is a programming technique that allows you to build loosely coupled software components. AngularJS has a built-in dependency injection mechanism to inject dependencies into different types of AngularJS components.There are following three ways of injecting dependencies into your code :

    Implicitly from the function parameter names

     
     <script type="text/javascript">
     function MyController($scope, greeter) {
     // ...
     }
     </script> 
    

    Using the $inject property annotation

     <script type="text/javascript">
     var MyController = function(renamed$scope, renamedGreeter) {
     // ...
     }
     
     MyController['$inject'] = ['$scope', 'greeter'];
     </script> 
    

    Using the inline array annotation

     <script type="text/javascript">
     someModule.factory('greeter', ['$window', function (renamed$window) {
     // ...
     }]);
     </script>
    
  19. What is Service in AngularJS?

    A service is a singleton object which contain business logic for your AngularJS application. A service is also used to share state or data across your angular application components. A service can be injected into controllers, filters, directives. AngularJS offers several built-in services (like $http, $provide, $resource, $window, $parse) which always start with $ sign.

  20. What are different methods to create a service in AngularJS?

    There are five methods to create a service in AngulaJS as given below :

    • Service

    • Factory

    • Provider

    • Value

    • Constant

Summary

I hope these AngularJS Interview questions and answers will help you which interview on AngularJS. Please do share your valuable feedback and comments.

Hands-on Learning
+