Top AngularJS Interview Questions

What is AngularJS ?

-> is a structural framework for dynamic web apps.
-> is a javascript framework which simplifies binding of javascript objects with HTML UI elements.
-> is a full featured Single Page Application (SPA) framework.
-> Front-end JavaScript framework for creating web applications
-> Open source maintained by Google
-> MVC Pattern
-> Handles common such as DOM manipulation, updating UI based on data or input, registering callbacks.
-> Declarative programming.
-> Framework imposes structure and that is good for organization.
-> The intention of the application is expressed or declared in the HTML for AngularJS.

How angular works ?
-> AngularJS will initialize when the DOM content is loaded.
-> Looks for ng-app directive-if it is found, that is the root of the app.

Template                     -> HTML with additional markup
Directives                   -> extend HTML with custom attributes and elements
Model                          -> the data shown to the user in the view and with which the user interacts
scope                          -> context where the model is stored so that controllers, directives and  expressions can access it
compiler                      -> parses the template and instantiates directives and expressions
View                            -> what the user sees (DOM)
Data Binding               -> sync data between the model and the view
Controller                    -> the business logic behind views
Dependency Injection -> Creates and wires objects and functions
Injector            -> Dependency injection container
Module                        -> a container for the different parts of an app including controllers, services, filters, directives which configures the injector
Service                        -> reusable business logic independent of views

What are modules in AngularJS ?

-> Containers for the various parts of your application (controllers, services etc.)
-> Define dependencies for the app.
-> Most applications have a main thread that instantiates and wires together the different parts of the application. Angular apps don’t have a main method. Instead modules declaratively specify how an application should be bootstrapped.

// declare a module
// The empty array in angular.module(‘myApp’, []). This array is the list of modules myApp depends on.
var myAppModule = angular.module(‘myApp’, []);
// configure the module.
// in this example we will create a greeting filter

Modules Setup
-> A Module is comprised of configuration and run blocks.
-> Configuration blocks – executed during configuration and registration. Only providers and constants can be passed.
-> Run blocks – happen after the injector is created. Only instances and constants can be passed in.
-> Run block is like a main method – it kick starts the application.
-> They are loaded only once.

What is a controller in AngularJS ?

-> A controller is a set of JavaScript functions bound to a scope.
-> The ng-controller directive tells Angular to instantiate the new controller object, and injects the new scope as a dependency.

What is the use of filters in AngularJS ?

-> A filter formats the value of an expression for display to the user. They cannot be used in view templates, controllers or services and it’s easy to define your own filter

What are directives in AngularJS ?

-> are attributes decorated on the HTML elements.
-> All directives start with the word ‘ng’. e.g., ng-app, ng-controller
-> is a way to teach HTML new tricks.
-> Directives are makers on a DOM element (such as an attribute, element name, comment or css class) that tell AngularJS’s HTML compiler ($compile) to attach a specified behavior to that DOM element or even transform the DOM element and its children.

What are the uses of services in AngularJS ?

-> are singletons, so there is only one instance of each service we define. As singletons, they are not affected by scopes, and hence can be accessed by multiple views/controllers/directives/other services.
-> A custom service is desirable when

  •  Two or more things need access to the same data or just want to neatly encapsulate data.
  • Need to encapsulate interactions with a web server (extend $resource or $http in your service).

Explain ‘scope’ in AngularJS ?

-> ‘$scope’ is an object instance of a controller. ‘$scope’ object is instance gets created when ng-controller directive is encountered.
-> Scope is an object that refers to the application model. It is an execution context for expressions.
-> Scopes are arranged in hierarchical structure which mimics the DOM structure of the application.
-> Scope acts like a bridge between view and model.

How Angular Parser works ?

-> HTML browser parses the HTML and creates a DOM.
-> Angular framework runs over this DOM looks over the directives and manipulates the DOM accordingly.
-> It is then rendered as HTML in the browser.
-> Angular parsing occurs in two phases ‘Compile’ and ‘Link’. First the compile occurs then the Link phase.
-> In compile phase the angular parser starts parsing the DOM and whenever the parser encounters a directive it creates a function. These functions are termed as template or compiled functions. In this phase we do not have access to the $scope data.
-> In the link phase the data is attached to the template function and executed to get the final HTML.

How do you share data between controllers?

-> Create an Angular JS service that will hold the data and inject it inside of the controllers.
-> Other ways

  •  Using events
  • Using $parent, nextSibling, controllerAs, to directly access the controllers.
  • Using the $rootScope method to add the data on.

What is a digest cycle in AngularJS?

In each digest cycle Angular compares the old and new version of the scope model values. The digest cycle is triggered automatically. We can also use $apply() if we want to trigger the digest cycle manually.

What is the difference between one-way binding and two-way binding?

  •  One-way binding implies that the scope variable in the html will be set to the first value its model is bound to.
  • Two-way binding implies that the scope variable will change it’s value every time its model is assigned with a different value.

 Explain how $scope.$apply() works ?

$scope.$apply re-evaluates all the declared ng-models and applies the change to any that value have been altered.(i.e assigned to a new value.)

What is an interceptor? What are common uses of it?

An interceptor is a middleware code where all $http requests go through. Two types of requests go through the interceptor, request and response. This is very useful for error handling, authentication.

How would you make an Angular service return a promise?

To add promise functionality to a service, inject the “$q” dependency in the service. The $q library is a helper provider that implements promises and deferred objects to enable asynchronous functionality.

What is the role of services in AngularJS and name any services made available by default?

-> AngularJS services are objects that provide separation of concerns to an AngularJS App.
-> Services can be created using a factory method or a service method.
-> Services are singleton components.
-> An AngularJS service allows developing of business logic without depending on the view logic.

Few of the in built services in AngularJS services are:
-> The $http service, the $log service

Leave a Reply

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