Angular JS Interview Question Set 6

Categories: Angular JS

Define AngularJS and what are its key features?

AngularJS is one of the most popular, open-source, JavaScript-based frameworks, developed by Google, that was mainly built for developing large-scale, enterprise-level, dynamic, single-page web applications. AngularJS uses HTML as its main template language and uses its syntax for representing the application’s components such as directives. AngularJS is used mainly for writing client-side logic using the combined power of JavaScript and MVC architecture. This combined power results in the creation of easily maintainable, cross-browser-compatible enterprise-level web applications.

The main features of AngularJS are listed below:

Applications developed in AngularJS are testable.

Data-binding − AngularJS provides the most important feature of data binding which facilitates the synchronization of data between the model and the view components in the framework.

Controller − AngularJS is built on JavaScript components and the JavaScript functions bound to scope are called controllers.

Services − AngularJS has many in-built services such as $http which helps in making XMLHttpRequests and AJAX calls.

Scope − AngularJS provides special objects called Scope which refer to the models and is a glue between the view and the controller.

 Define Scope in AngularJS.

Scopes are special objects in AngularJS that act as a glue between the view and the controller. They refer to the model component of the MVC architecture. They are arranged in a hierarchical way to mimic the DOM structure hierarchy. AngularJS has an in-built $scope object that has all the application data and the corresponding methods bound to that scope.

What do the services represent in AngularJS?

Services are single objects which carry out tasks they are created for. They interact with each other and are wired by using the concept of Dependency Injection that helps the framework in organizing and sharing the code across the application. There are various in-built services provided by AngularJS. AngularJS also supports the creation of custom services that are more commonly used by developers.

What are directives?

Directives are the most important components of AngularJS elements that represent the DOM element markers providing new behavior to the DOM elements like elements name, attributes, CSS classes, or comments. They are used for creating custom HTML tags that operate similarly to custom widgets. AngularJS provides various in-built directives such as ng-model for data binding, ng-repeat for iterating elements, ng-app for bootstrapping AngularJS applications, ng-show, ng-hide for manipulating the display of DOM elements, etc.

Explain the data binding process in AngularJS.

Data binding is the process of automatic syncing of data between the view and the model components. AngularJS achieves this by making use of the ng-model and ng-bind built-in directives. This directive ensures that the model is the single point of truth for the view and ensures that the view synchronizes with the model at any instant of time. There are two ways of data-binding:

1. One Way Data Binding: Changes in the model are reflected on the view but changes in the view to that data are not reflected on the model. The binding is one way from the model to view. This is achieved by making use of the ng-bind directive.
2. Two Way Data Binding: As the name itself suggests, the changes in the model are reflected on the view as well as the view changes are reflected in the model. This is achieved by making use of the ng-model directive.

Explain the purpose of interpolation in AngularJS?

Interpolation refers to the phenomenon of binding data by embedding expressions to the attribute and text nodes. The compiler does the task of matching the text and the attributes during the compilation. Internally, AngularJS uses $interpolate built-in service to check if there is any markup having embedded expressions and if found then they are updated and registered in the form of watches.

How can you integrate AngularJS with HTML?

We can integrate AngularJS in the HTML page by first binding the AngularJS library to the HTML page using the <script> tag in the HTML head section and then bootstrapping the AngularJS application using the ng-app directive as shown below.

<html>

   <head>

      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>

      <!--Other libraries-->

   </head>

   <!--ng-app attribute to bootstrap AngularJS application-->

   <body ng-app = "myApp">

       <!--Web page elements-->

   </body>

</html>

Define $rootScope in AngularJS application.

$rootScope refers to the scope object created on the DOM element containing the ng-app directive meant for bootstrapping the AngularJS application. This object is available across the whole AngularJS application. There can be only one $rootScope object in the entire application. All other scope objects are known as the child scopes of that $rootScope object.