Top 20 AngularJS Interview Questions and Answers 2019

Shailendra Chauhan  Print   11 min read  
27 Oct 2018
27 Feb 2019
1.29K

AngularJS is the 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.

Angular Online Training

  1. Does AngularJS support MVC or MVVM pattern?

    AngularJS is an MVW framework where M for Model, V for the 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 an 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 an 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 the Data binding 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 elements 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 questions and answers will help you to crack your AngularJS interview. These interview Questions have been taken from our new released eBook AngularJS Interview Questions & Answers. This book contains more than 100+ AngularJS interview questions.

This book has been written with the intent of preparing yourself for AngularJS interview with a solid foundation on AngularJS in a short time. It's would be equally helpful in your real projects or to crack your AngularJS Interview.

Buy this eBook at a Discounted Price!

Crack Your Technical Interview

 
Learn in-demand Technologies
+