Top 20 AngularJS Interview Questions and Answers 2019

Shailendra Chauhan  Print   11 min read  
27 Oct 2018
02 Jul 2019
2.77K

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.

  1. Does AngularJS support MVC or MVVM pattern?

    AngularJS is an MVW framework where M stands 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 the model will update the view and vice versa. The two-way data-binding, 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 the user.

    Two-way databinding feature in AngularJS

    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 data-binding called as One-way data-binding. For one-way data-binding, double colon (::) is used as data-binding expression syntax.

    AngularJS one way databinding used for 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 combine 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 behavior.

    In fact, AngularJS directives extend the HTML vocabulary by adding new attributes to manipulate HTML elements in an 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 is 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 the 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 restricting:

     '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 the 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 a 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 its 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 the 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 the 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 the ui-router.js file into your angular app.

  18. How Does Dependency Injection work 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 contains business logic for your AngularJS application. 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!

AngularJS Interview Questions & Answers eBook

Take our free skill tests to evaluate your skill!

In less than 5 minutes, with our skill test, you can identify your knowledge gaps and strengths.

Learn to Crack Your Technical Interview

+
+
Accept cookies and close this message