Trending Technologies Interview Q&A

AngularJS Interview Questions

The list of top frequently asked AngularJS interview questions and answers are given below.

1) What is AngularJS?

AngularJS is an open-source JavaScript framework that is used to build rich and extensible web applications. It is developed by Google and follows the MVC (Model View Controller) pattern. It supports HTML as a template language and enables developers to create extended HTML tags that will help represent the application’s content more clearly. Updating and receiving information from HTML document is easy. It also helps to write a properly maintainable architecture that can be tested on the client-side.

2) What are the main advantages of AngularJS?

Some of the main advantages of AngularJS are given below:

  • Allows us to create a single page application.
  • Follows MVC design pattern.
  • Predefined form validations.
  • Supports animations.
  • Open-source.
  • Cross-browser compliant.
  • Supports two-way data binding.
  • Its code is unit testable.

3) Describe MVC in reference to angular.

AngularJS is based on the MVC framework, where MVC is for the model-view-controller. MVC performs does the following:

  • A model is the lowest level of the pattern responsible for maintaining data.
  • A controller is responsible for the view that contains the logic to manipulate that data. It is basically a software code used to control the interaction between a model and a view.
  • A view is HTML that is responsible for displaying data.

For example, a $ scope can be defined as a model, while functions written in the Angular controller modify the $ scope and the HTML scope displays the value of the variable.


4) What is $scope?

A $ scope is an object that represents the application model for an angular application.

Each AngularJS application can have only one root scope but multiple child scopes.

For example:

  1. var app = angular.module(‘myApp’, []);
  2. app.controller(‘myCtrl’, function($scope) {
  3.     $scope.carname = “Volvo”;
  4. });

 

Some of the key features of the $ scope item are given below:

  • It provides observers to examine all model changes.
  • It provides the ability to propagate model changes to the application as well as other related components outside the system.
  • Scopes can be nested in such a way that they can separate functionality and model properties.
  • It provides an execution environment in which expressions are evaluated.

5) Is AngularJS dependent on JQuery?

AngularJS is a JavaScript framework with key features such as model, two-way binding, directing, routing, dependency injection, unit test, etc. On the other hand, JQuery is a JavaScript library used for DOM manipulation, including any two-way. There is no binding feature.


6) What IDE’s are currently used for the development of AngularJS?

A term IDE means integrated development environment. Below are some IDEs used for developing AngularJS:

  • Eclipse
    It is one of the most popular IDEs. It supports AngularJS plugins.
  • visual Studio
    It is an IDE from Microsoft that provides a platform to easily and instantly develop web apps.
  • Webstorm
    It is one of the most powerful IDEs for modern JavaScript development. This provides an easy way to associate dependencies with the angular CLI.
  • Aptana
    This is a customized version of Eclipse. It is free to use.
  • Sublime text
    It is one of the most recommended editors for HTML, CSS and JavaScript. It is much more compatible with AngularJS code.

7) What are the instructions in AngularJS?

Instructions are markers on the DOM element used to specify the behavior on that DOM element. All AngularJS instructions begin with the word “ng”. AngularJS has many in-built directives such as “ng-app”, “ng-init”, “ng-model”, “ng-bind”, “ng-repeat”, etc.

  • Ng app
    The ng-application directive is the most important directive for angular applications. It is used to detect the start of an Angular application for the AngularJS HTML compiler. It marks HTML elements that are intended to create the root element of the Angular application. Custom attributes use spinal-cases, while related instructions follow CamelCase. If we do not use this directive and try to process other instructions, it returns an error.
  • Ng-init
    The ng-init directive is useful for initializing the data variable inline statement of an NGRJ application. Therefore, those statements can be used in specified blocks where we can declare them. An instruction is like a local member of the ng-init ng-app directive, and can be a single value or a set of values. It directly supports JSON data.
  • Ng-model
    The ng-model directive binds the values ​​of HTML elements such as input, selection, texaria to the application data. This model provides two-way binding behavior with value. Sometimes, it is also used for databinding.
  • Ng-bind
    The ng-bind directive is used to bind the value of the model / variable to the HTML control of the AngularJS application. It can also be used with HTML tag attributes, such as: <p />, <span /> and more but it does not support two-way binding. We can only check the output of model values.
  • Ng-repeat
    The ng-repeat directive is used to replicate the HTML statement. It works similarly to each loop in C #, Java, or PHP on a specific collection item like an array.

Let’s see a simple example of AngularJS directive:

  1. <div ng-app = “” ng-init = “countries = [{locale:’en-IND’,name:’India’}, {locale:’en-PAK’,name:’Pakistan’}, {locale:’en-AUS’,name:’Australia’}]”>
  2. <p>Enter your Name: <input type = “text” ng-model = “name”></p>
  3. <p>Hello <span ng-bind = “name”></span>!</p>
  4. <p>List of Countries with locale:</p>
  5. <ol>
  6. <li ng-repeat = “country in countries”>
  7.                {{ ‘Country: ‘ + country.name + ‘, Locale: ‘ + country.locale }}
  8. </li>
  9. </ol>
  10. </div>

8) What are the controllers in AngularJS?

Controllers are JavaScript functions used to provide data and logic to the HTML UI. It acts as an interface between the server and the HTML UI. Each controller accepts $ scope as a parameter that refers to the application / module that the controller is supposed to control.

For example:

  1. <script>
  2. var app = angular.module(‘myApp’, []);
  3. app.controller(‘myCtrl’, function($scope) {
  4.     $scope.firstName = “Aryan”;
  5.     $scope.lastName = “Khanna”;
  6. });
  7. </script>

9) What are the uses of controllers in AngularJS?

AngularJS controllers are used for:

  • Setting the initial state of the $scope object
  • Adding behavior to the $scope object

10) How can someone set, get, and clear cookies in AngularJS?

AngularJS has a module known as ngCookies. Before we inject ngCookies, we should include angular-cookies.js into the application.

  • Set Cookies
    We can use the put method to set cookies in a key-value format.
  1. $cookies.put(“username”, $scope.username);
  • Get Cookies
    We can use the get method to get cookies.
  1. $cookies.get(‘username’);
  • Clear Cookies
    We can use the remove method to remove or clear cookies.
  1. $cookies.remove(‘username’);
Like/Subscribe us for latest updates or newsletter:

Leave a Reply

Your email address will not be published. Required fields are marked *