Got an AngularJS interview lined up? Don’t worry, just read the 50 most important AngularJS interview questions we’ve outlined in this post.
We’ve made sure the answers are easy to understand and simple to remember. Hopefully, this exposure will make you better prepared for the interview.
But don’t forget that success not only depends on your technical skills but your behavior matters too. Hence, if you want to be a cut above the rest, then prepare in advance, practice more, and perform well.
Let’s now move to the AngularJS Q&A section.
50 Most Important AngularJS Interview Questions.
What is AngularJS?
What are the key features of AngularJS?
Explain the reasons that compel a web developer to choose AngularJS for his Web Development Project?
List down the popular AngularJS IDE Plugins/Extensions for web development?
Explain the steps involved in the boot process for AngularJS?
What browsers do AngularJS support?
What are the security features provided by AngularJS?
What are the web application security risks that a web developer should avoid while doing development using AngularJS?
Explain what are directives? Mention some of the most commonly used directives in AngularJS application?
What are expressions in AngularJS?
What are Filters? Explain different filters provided by AngularJS?
What are angular prefixes $ and $$?
What are different ways to invoke a directive?
What is Singleton pattern? How does Angular use it?
What is $scope in AngularJS?
What is “$rootScope” in AngularJS?
Explain the concept of scope hierarchy? How many scopes can an application have?
What is SPA (Single page application) in AngularJS?
What is the difference between <$scope> and scope?
How is AngularJS compiled?
How is AngularJS compilation different from other JavaScript frameworks?
What is ng-view in AngularJS?
What is ng-template in AngularJS?
What is $routeProvider in AngularJS?
What is data binding? How many types of data binding directives are provided by AngularJS?
What directives are used to show and hide HTML elements in AngularJS?
Explain the directives ng-if, ng-switch, and ng-repeat?
Explain the set of “special” variables supported with <ng-repeat> directive?
What is a Factory method in AngularJS?
Explain what is string interpolation in AngularJS?
Explain AngularJS application life-cycle?
Explain AngularJS scope life-cycle?
What is an auto bootstrap process in AngularJS?
What is the manual bootstrap process in AngularJS?
How to bootstrap your angular app for multiple modules?
What are Compile, Pre, and Post linking in AngularJS?
What is a Controller in AngularJS?
What does a service mean in AngularJS? Explain its built-in services.
What are different ways to create service in AngularJS?
What is the difference between the $watch, $digest, and $apply?
Which one handles exception automatically between $digest and $apply?
Explain $watch(), $watchgroup() and $watchCollection() functions of scope?
What are the form Validations supported by AngularJS?
How do you exchange data among different modules of your Angular JS application?
How would you use an Angular service to pass data between controllers? Explain with examples.
How will you send and receive data using the Angular event system? Use methods like $broadcast and $on to send data across.
How do you switch to different views from a Controller function?
What would you do to limit a scope variable to have one-time binding?
What is the difference between one-way binding and two-way binding?
Which angular directive would you use to hide an element from the DOM without modifying its style?
AngularJS Interview Questions & Answers.
AngularJS Interview Questions.
Q-1. What is AngularJS?
Answer.
It has been developed by one of the biggest technology giants Google. It is a JavaScript framework that helps you to create dynamic Web applications.
It supports to use HTML as the template language and enables the developer to create extended HTML tags that help to represent the application’s components clearly. These tags make the code efficient by reducing the lines of code that a
developer may require to write when using JavaScript.
It is open-source and is licensed under the Apache License version 2.0.
It helps to develop an easy to maintain architecture that can be tested at client side code.
Q-2. What are the key features of AngularJS?
Answer.
Here is the list of AngularJS features that makes it the hottest tech for web dev.
Data-binding – Handles synchronization of data across model, controllers, and view.
Scope – Object representing the model, acts as a glue layer between controller and view.
Controllers – JS functions bound to the scope object.
Services – Substitutable objects that are wired together using dependency injection. e.g. $location service.
Filters – Formats the value of an expression for displaying to the user. e.g. uppercase, lowercase.
Directives – These are extended HTML attributes start with the “ng-” prefix. e.g. ng-app directive used to initialize the angular app.
Templates – HTML code including AngularJS specific elements and attributes.
Routing – It’s an approach to switch views.
MVC pattern – A design pattern made up of three parts.
Model – Represents data, could be static data from a JSON file or dynamic data from a database.
View – Renders data for the user.
Controller – Gives control over the model and view for collating information to the user.
Deep linking – Enables the encoding of the application state in the URL and vice versa.
Dependency injection – A design pattern to let the components injected into each other as dependencies.
Q-3. Explain the reasons that compel a web developer to choose AngularJS for his Web Development Project?
Answer.
Following are some of the key reasons to choose AngularJS as you web development framework:
It uses MVC design pattern which allows segregating an application into different components (called Model, View, and Controller) thus making it easy to maintain.
It allows extending the HTML by attaching directives to your HTML markup. This provides the capability to define new powerful templates having new attributes, tags, and expressions.
It allows you to create your own directives and also make reusable components. Directives help the developer to concentrate on creating logic, thus enabling them to work efficiently.
It supports two-way data binding i.e. enables automatic synchronization of data between model and view components. Thus, any update in the model gets reflected in the view automatically. And there is no need to add any Javascript code or event listeners to reflect the data changes.
It encapsulates the behavior of your application in controllers which gets instantiated with the help of dependency injection.
It supports built-in services that perform the common tasks for web applications. For example, it provides $http service to communicate with REST service.
It makes the development and testing of the application’s JavaScript code easy.
Also, AngularJS has a mature community to help the developers. It has wide support over the internet.
Q-4. List down the popular AngularJS IDE Plugins/Extensions for web development?
Answer.
Here is a list of IDE Plugins and Extensions which can enhance the way you code with AngularJS:
Sublime Text
WebStorm
Eclipse
Netbeans
Visual Studio 2012/2013 Express or higher
TextMate
Brackets
ATOM
Q-5. Explain the steps involved in the boot process for AngularJS?
Answer.
Whenever a web page loads in the browser, following steps execute in the background.
First, the HTML file containing the code gets loaded into the browser. After that, the JavaScript file mentioned in the HTML code gets loaded. It then creates a global object for angular. Now, the JavaScript which displays the controller functions gets executed.
In this step, AngularJS browses the complete HTML code to locate the views. If a view is found, it is linked it to the corresponding controller function.
In this step, AngularJS initiates the execution of required controller functions. Next, it populates the views with data from the model identified by the controller. With this the page is ready.
Q-6. What browsers do AngularJS support?
Answer.
AngularJS works fine with the latest versions of Safari, Chrome, Firefox, Opera 15+, and IE9+ (Internet Explorer).
It also supports various mobile browsers like Android, Chrome Mobile, iOS Safari, and Opera Mobile.
Note: Versions 1.3 and later of AngularJS dropped support for Internet Explorer 8.
Q-7. What are the security features provided by AngularJS?
Answer.
AngularJS provides built-in protection from the following security flaws.
It prevents cross-side scripting attacks: Cross-site scripting is a technique where anyone can send a request from client side and can get the confidential information easily.
It prevents HTML injection attacks.
It prevents XSRF protection for server side communication: It can be handled by “Auth token” mechanism. When the user logins for the first time a user id and password is sent to the server and it will, in turn, return an auth token. Now, this token does the authentication in the future transactions.
Q-8. What are the web application security risks that a web developer should avoid while doing development using AngularJS?
Answer.
Following are the most critical web application development flaws that a developer should take care of:
Injection attack.
Broken Authentication and Session Management.
Cross-Site Scripting (XSS)
Insecure direct object references.
Security misconfiguration.
Sensitive Data Exposure.
Missing Functions Level Access Control.
Cross Site Request Forgery (CSRF).
Using components that possess vulnerabilities.
In-validated redirects and forwards.
Q-9. Explain what are directives? Mention some of the most commonly used directives in AngularJS application?
Answer.
AngularJS extends the behavior of HTML and DOM elements with new attributes called Directives. It directs the AngularJS’s HTML compiler ($compile) to attach a special behavior to that DOM element. This AngularJS component starts with prefix “ng”.
Following is the list of AngularJS built-in directives.
ng-bind – The ng-bind directive tells AngularJS to replace the content of an HTML element with the value of a given variable, or expression.
If there is any change in the value of the given variable or expression, then the content of the specified HTML element will also be updated accordingly. It supports one-way binding only.
ng-model – This directive is used to bind the value of HTML controls (input, select, text area) to application data. It is responsible for binding the view into the model, which other directives such as input, text area, and select require. It supports two-way data binding.
ng-class – This directive dynamically binds one or more CSS classes to an HTML element. The value of the ng-class directive can be a string, an object, or an array.
ng-app – Just like the “Main()” function of Java language, this directive marks the beginning of the application to AngularJS’s HTML compiler ($compile). If we do not use this directive first, an error gets generated.
ng-init – This is used to initialize the application data so that we can use it in the block where it is declared. If an application requires local data like a single value or an array of values, this can be achieved using the ng-init directive.
ng-repeat – This repeats a set of HTML statements for defined number of times. The set of HTML statements will be repeated once per item in a collection. This collection must be an array or an object.
We can even create our own directives too and use them in our AngularJS Application.
Q-10. What are expressions in AngularJS?
Answer.
AngularJS binds data to HTML using Expressions. It can be written inside double braces: {{ expression}} or inside a directive as ng-bind=”expression”. AngularJS solves the expression and returns the result exactly where that expression is written.
AngularJS expressions are much like JavaScript expressions: it can contain literals, operators, and variables.
For example –
Q-11. What are Filters? Explain different filters provided by AngularJS?
Answer.
An AngularJS Filter changes or transforms the data before passing it to the view. These Filters work in combination with AngularJS expressions or directives. AngularJS uses pipe character (“|”) to add filters to the expressions or directives. For example:
The above example is an expression enclosed in the curly braces. The filter used in this expression is currency. Also important to note that filters are case-sensitive.
AngularJS provides following filters to transform data.
currency – It is used to format a number to a currency format.
date – It is required to format a date to a specified format.
filter – It chooses a subset of items from an array.
json – It formats an object to a JSON string.
limitTo – Its purpose is to create an array or string containing a specified number of elements/characters. The elements are selected, either from the beginning or the end of the source array or string. This depends on the value and sign (positive or negative) of the limit.
lowercase – This filter converts a string to lower case.
number – It formats a number as a text.
orderBy – It enables to sort an array. By default, sorting of strings happens alphabetically. And sorting of numbers is done numerically. It also supports a comparator function where we can define what will be counted as a match or not.
uppercase – This filter converts a string to upper case.
Q-12. What are angular prefixes $ and $$?
Answer.
To prevent accidental name collisions within the code, AngularJS prefixes the names of public objects with $ and the names of private objects with $$.
It is recommended that $ or $$ prefix should not be used in the code otherwise.
Q-13. What are different ways to invoke a directive?
Answer.
There are four different ways to invoke a directive in an angular application which are as follows.
1) As an attribute:
2) As a class:
3) As an element:
4) As a comment:
Q-14. What is Singleton pattern? How does Angular use it?
Answer.
A singleton pattern is an approach that we adopt to limit the instantiation of a Class to have only one object. In Angular, the dependency injection and the services implement the singleton pattern.
Technically, if we call the “new Class()” two times without following the singleton pattern, the outcome will be two objects of the same class. Whereas a singleton enabled class will create the object first time and return the same object onwards.
Q-15. What is $scope in AngularJS?
Answer.
It is an application object. And behaves as the owner of the apps variables and functions. Scope object has access to both View and controller. Thus it works as a medium of communication between both of them. This object contains both data and functions. We can use it to access model data of the controller.
Following are the key characteristics of the scope object.
It provides observers to watch for all the model changes.
Provides the ability to propagate model changes through the application as well as outside the system to other associated components.
Scopes can be nested in such a way that they can isolate functionality and model properties.
Provides an execution environment in which expressions are evaluated.
Q-16. What is “$rootScope” in AngularJS?
Answer.
Every AngularJS application has a “$rootScope” that is the top most scope created on the DOM element. An app can have only one $rootScope which will be shared among all its components. It contains the ng-app directive. Every other scope is its child scope. It can watch expressions and propagate events. Using root scope we can set the value in one controller and read it from the other controller.
Q-17. Explain the concept of scope hierarchy? How many scopes can an application have?
Answer.
Every AngularJS application consists of one root scope but may have several child scopes. As child controllers and directives create new child scopes, they get attached to the application. These new scopes get added as children of their parent scope. Similar to DOM, they also create a hierarchical structure.
Q-18. What is SPA (Single page application) in AngularJS?
Answer.
Single-Page Applications (SPAs) are web applications that fit on a single HTML page. It dynamically updates the web page as the user performs actions on the app.
SPAs use AJAX and HTML to create quick and responsive web apps. A single page load extracts all the web app code (JS, HTML, CSS).
Thus the user navigates to different parts of the application quickly as it happens without refreshing the whole page.
Key Characteristics of Single-Page Applications are as follows.
Its UI is fast and responsive. Also, the Back/Forward buttons present in the UI work properly.
IT contains more JavaScript code than actual HTML as compared to other applications.
Dynamic data loading occurs from the server-side. The API uses restful web service with JSON format.
It allows to pre-load and cache all the app pages. Thus fewer data download requests are made towards the server.
Applications written in AngularJS are cross-browser compliant. It automatically handles the JavaScript code suitable for each browser.
Even if the user has lost the internet connection, then also the SPA can work. As all the pages load in the starting itself.
Q-19. What is the difference between <$scope> and scope?
Answer.
It is mandatory to use <$scope> while defining a controller. However, the “scope” will be used to create a link function for the custom directive. Both of them refer to “scope” object in AngularJS. The difference between them is that <$scope> uses dependency injection whereas “scope” does not.
Factory methods like controller, filter, service etc receive its arguments via dependency injection (DI). In DI, the order of passing the arguments does not matter. For example, a controller may be defined as (let’s define $scope as the first parameter in this case):
OR ( if $scope is the second parameter)
Thus, AngularJS does not care for the position of “$scope” in both the cases. It uses the argument name to retrieve an object out of the dependency injection container.
But, in the case of directive linker function, the position of scope matters, as it does not use DI. The reason being that the supplied arguments are received by its caller. In this case, the very first parameter has to be the scope as per AngularJS syntax.
In the case of non-dependency injected arguments, we can also give name to injected objects. The above code can be re-written as:
To summarize, in DI case, we pass the <scope object> as <$scope> whereas in non-DI cases, the <scope object> is returned either as a scope or with any name.
Q-20. How is AngularJS compiled?
Answer.
Angular’s HTML compiler allows you to teach the browser, new HTML syntax. It allows the developer to attach new behaviors or attributes to any HTML element called as directives. AngularJS compilation process takes place in the web browser itself. It does not involve any server-side or pre-compilation step.
AngularJS uses <$compiler> service to compile the angular HTML page. Its compilation begins after the HTML page (static DOM) is fully loaded.
It occurs in two phases.
Compile – It looks into the entire DOM and collects all of the directives. The result is a linking function.
Link – It combines the directives with a scope and produces a live view. Any changes in the <scope model> get reflected in the view, and any operations done by the user in the view gets reflected in the <scope model>.
The concept of compile and link has come from C language. Here the code is compiled first and then linked.
Q-21. How is AngularJS compilation different from other JavaScript frameworks?
Answer.
Javascript frameworks like backbone and jQuery process the template as a string and returns the result as a string. You have to dump this resulting string into the DOM where you wanted it with innerHTML().
AngularJS process the template in another way. It directly works on HTML DOM rather than strings and manipulates it as required. It uses two-way data binding between model and view to sync the data.
Q-22. What is ng-view in AngularJS?
Answer.
The ng-view tag creates a placeholder where an HTML or ng-template view can be placed based on the configuration.
Let’s take an example.
In other words, ng-view is the directive that works as a container for angularJS to switch between views.
Q-23. What is ng-template in AngularJS?
Answer.
The ng-template directive is used to create an HTML view using script tag. It contains “id” attribute which is used by $routeProvider to map a view with a controller.
While defining ng-template, it is mandatory to specify the type of the <script> element as text/ng-template. Also, assign a cache name to the template using the element’s id. Later on, this name gets used as directive’s templateUrl.
Following is the syntax of using a ng-template directive in angularJS application.
$routeProvider part.
Q-24. What is $routeProvider in AngularJS?
Answer.
$routeProvider is the key service which set the configuration of URLs, map them with the corresponding HTML page or ng-template, and attach a controller with the same.
Let’s see the following example:
Following are the important points to be considered in above example.
routeProvider is defined as a function under config of mainApp module using key as ‘$routeProvider’.
$routeProvider.when defines a URL “/addEmployee” which is then mapped to “addEmployee.htm”. This <addEmployee.htm> should be present in the same path as main HTML page.
“otherwise” is used to set the default view.
“controller” is used to set the corresponding controller for the view.
Q-25. What is data binding? How many types of data binding directives are provided by AngularJS?
Answer.
Data bind is the connection bridge between view and business logic (view model) of the application. Data binding in AngularJs is the automatic synchronization between the model and view. When the model changes, the view is automatically updated and vice versa. AngularJs support one-way binding as well as two-way binding.
AngularJS provides the following data binding directives:
1) <ng-bind>- It updates the text content of the specified HTML element with the value of the given expression. This text content gets updated when there is any change in the expression. It is very similar to double curly markup ( {{expression }}) but less verbose.
It has the following Syntax.
2) <ng-bind-html>- It evaluates the expression and inserts the HTML content into the element in a secure way. To use this functionality, it has to use $sanitize service. For this, it is mandatory that $sanitize is available.
It has the following Syntax.
3) <ng-bind-template>- It replaces the element text content with the interpolation of the template. It can contain multiple double curly markups.
It has the following Syntax.
4) <ng-non-bindable>- This directive informs AngularJS, not to compile or bind the contents of the current DOM element. It is useful in the case when the user wants to display the expression only and do not want to execute it.
It has the following Syntax.
5) <ng-model>- This directive can be bound with input, select, text area or any custom form control. It provides two-way data binding. It also provides validation behavior. It also retains the state of the control (like valid/invalid, touched/untouched and so on).
It has the following Syntax.
Q-26. What directives are used to show and hide HTML elements in AngularJS?
Answer.
The directives used to show and hide HTML elements in the AngularJS are <ng-show> and <ng-hide>. They do this based on the result of an expression.
Its syntax is as follows.
When the expression for <ng-show> evaluates to true, then HTML element(s) are shown on the page, otherwise the HTML element is hidden. Similarly, <ng-hide> directive hides the HTML element if the expression evaluates to true.
Let’s take the following example.
Q-27. Explain the directives ng-if, ng-switch, and ng-repeat?
Answer.
a) <ng-if>.
This directive can add/remove HTML elements from the DOM based on an expression. If the expression is true, it adds a copy of HTML elements to the DOM. If the expression evaluates to false, this directive removes the HTML element from the DOM.
b) <ng-switch>.
This directive can add/remove HTML elements from the DOM conditionally based on scope expression.
Child elements with the <ng-switch-when> directive will be displayed if it gets a match, else the element and its children get removed. It also allows defining a default section, by using the <ng-switch-default> directive. It displays a section if none of the other sections match.
Let’s see the following example that displays the syntax for <ng-switch>.
c) <ng-repeat>.
This directive is used to iterate over a collection of items and generate HTML from it.
Q-28. Explain the set of “special” variables supported with <ng-repeat> directive?
Answer.
The <ng-repeat> directive has a set of special variables that are useful while iterating the collection.
These variables are as follows.
$index
$first
$middle
$last
The “$index” contains the index of the element being iterated. The variables $first, $middle and $last returns a boolean value depending on whether the current item is the first, middle or last element in the collection being iterated.
The output is as follows.
Q-29. What is a Factory method in AngularJS?
Answer.
A factory is a simple function which allows you to add some logic before creating the object. In the end, it returns the created object.
Syntax.
Creating service using factory method.
When to use Factory?
It is just a collection of functions, like a class. Hence, it can be instantiated in different controllers when you are using it with a constructor function.
Q-30. Explain what is string interpolation in AngularJS?
Answer.
During the compilation process, AngularJS compiler matches text and attributes using interpolate service to see if it contains embedded expressions.
During normal, digest life cycle, these expressions are updated and registered as watches.
Q-31. Explain AngularJS application life-cycle?
Answer.
Understanding the life cycle of an AngularJS application makes it easier to learn about the way to design and implement the code. Apps life cycle consists of following three phases- bootstrap, compilation, and runtime.
These three phases of the life cycle occur each time a web page of an AngularJS application gets loaded in the browser. Let’s learn about each of the three phases in detail:
The Bootstrap Phase – In this phase, the browser downloads the AngularJS javascript library. After this, AngularJS initializes its necessary components and the modules to which the ng-app directive points. Now that the module has loaded, required dependencies are injected into it and become available to the code within that module.
The Compilation Phase – The second phase of the AngularJS life cycle is the HTML compilation stage. Initially, when a web page loads in the browser, a static form of the DOM gets loaded. During the compilation phase, this static DOM gets replaced with a dynamic DOM which represents the app view. There are two main steps – first is traversing the static DOM and collecting all the directives. These directives are now linked to the appropriate JavaScript functionality which lies either in the AngularJS built-in library or custom directive code. The combination of directives and the scope, produce the dynamic or live view.
The Runtime Data Binding Phase – This is the final phase of the AngularJS application. It survives until the user reloads or navigates away from the webpage. At this point, any changes in the scope get reflected in the view, and any changes in the view are directly updated in the scope, making the scope the single source of data for the view.
This shows that AngularJS behaves differently from traditional methods of binding data. The traditional methods combine a template with data, received from the engine and then manipulate the DOM each time there is any change in the data.
However, AngularJS compiles the DOM only once and then links the compiled template as necessary, making it much more efficient than the traditional methods.
Q-32. Explain AngularJS scope life-cycle?
Answer.
After the angular app gets loaded into the browser, scope data passes through different stages called as its life cycle. Learning about this cycle helps us to understand the interaction between scope and other AngularJS components.
The scope data traverses through the following phases.
Creation – This phase initializes the scope. During the bootstrap process, the $injector creates the root scope for the application. And during template linking, some directives create new child scopes. A digest loop also gets created in this phase that interacts with the browser event loop. This loop is responsible for updating DOM elements with the changes made to the model as well as executing any registered watcher functions.
Watcher registration – This phase registers watchers for scope created in the above point. These watches propagate the model changes to the DOM elements, automatically. We can also register our own watcher’s on a scope by using the $watch() function.
Model mutation – This phase occurs when there is any change in the scope data. When we do any modification in the angular app code, the scope function <$apply()> updates the model and then calls the <$digest()> function to update the DOM elements and the registered watches. However, when we change the scope inside the angular code like within controllers or services, angular internally calls <$apply()> function for us. But, when we do the changes to the scope outside the angular code, we have to call the <$apply()> function explicitly on the scope, to force the model and DOM to be updated correctly.
Mutation observation – This phase occurs, when the digest loop execute the $digest() function at the end of $apply() call. When the $digest() function executes, it evaluates all watches for model changes. If there is a change in the value, $digest() calls the $watch listener and updates the DOM elements.
Scope destruction – This phase occurs when the child scopes that are no longer needed, are removed from the browser’s memory by using the $destroy() function. It is the responsibility of the child scope creator to destroy them via scope.$destroy() API. This stops propagation of $digest calls into the child scopes and enables the browsers’ garbage collector to reclaim the unused memory.
Q-33. What is an auto bootstrap process in AngularJS?
Answer.
AngularJS initializes automatically upon the “DOMContentLoaded” event or when the browser downloads the angular.js script and at the same time document.readyState is set to ‘complete’. At this point, AngularJS looks for the ng-app directive which is the root of Angular app compilation process.
If the ng-app directive is located, then AngularJS will do the following.
Load the module associated with the directive.
Create the application injector.
Compile the DOM starting from the ng-app root element.
This process is auto-bootstrapping.
Following is the sample code that helps to understand it more clearly:
Q-34. What is the manual bootstrap process in AngularJS?
Answer.
Sometimes we may need to manually initialize Angular app in order to have more control over the initialization process. We can do that by using angular.bootstrap() function within angular.element(document).ready() function. AngularJS fires this function when the DOM is ready for manipulation.
The angular.bootstrap() function takes two parameters, the document, and module name injector.
Following is the sample code that helps to understand the concept more clearly.
Q-35. How to bootstrap your angular app for multiple modules?
Answer.
Bootstrap for multiple modules can be achieved by using following two methods.
1. Automatic bootstrap – AngularJS is automatically initialized for one module. When we have multiple modules, we combine them into a single module and thus the angular app will be automatically initialized for the newly created module. Other modules act as dependent modules for this newly created module.
Let’s take an example, suppose we have two modules: module1 and model2. To initialize the app automatically, based on these two modules following code is used:
2. Manual bootstrap – We can manually bootstrap the app by using angular.bootstrap() function, for multiple modules.
The above example can be rewritten for manual bootstrap process as given below.
Q-36. What are Compile, Pre, and Post linking in AngularJS?
Answer.
A) Compile – It collects an HTML string or DOM into a template and produces a template function. It can then be used to link the scope and the template together.
AngularJS uses the compile function to change the original DOM before creating its instance and before the creation of scope.
Before discussing the Pre-Link and the Post-Link functions let’s see the Link function in detail.
B) Link – It has the duty of linking the model to the available templates. AngularJS does the data binding to the compiled templates using Link.
Following is its syntax.
where each of the four parameters is as follows.
scope – It is the scope of the directive.
element – It is the DOM element where the directive has to be applied.
attr- It is the Collection of attributes of the DOM element.
ctrl – It is the array of controllers required by the directive.
AngularJS allows setting the link property to an object also. The advantage of having an object is that we can split the link function into two separate methods called, pre-link and post-link.
C) Post-Link – Execution of Post-Link function starts after the linking of child elements. It is safer to do DOM transformation during its execution. The post-link function is suitable to execute the logic.
D) Pre-Link – It gets executed before the child elements are linked. It is not safe to do DOM transformation. As the compiler linking function will fail to locate the correct elements.
It is good to use the pre-link function to implement the logic that runs when AngularJS has already compiled the child elements. Also, before any of the child element’s post-link functions have been called.
Let’s see an example that talks about Compile, Pre-Link, and Post-Link functions.
Q-37. What is a Controller in AngularJS?
Answer.
A Controller is a set of JavaScript functions which is bound to a specified scope, the ng-controller directive. Angular creates a new instance of the Controller object to inject the new scope as a dependency. The role of the Controller is to expose data to our view via $scope and add functions to it, which contains business logic to enhance view behavior.
Controller Rules.
A Controller helps in setting up the initial state of the scope object and define its behavior.
The Controller should not be used to manipulate the DOM as it contains only business logic. Rather, for manipulating the DOM, we should use data binding and directives.
Do not use Controllers to format input. Rather, using angular form controls is recommended for that.
Controllers should not be used to share code or states. Instead, use angular services for it.
Steps for creating a Controller.
It needs ng-controller directive.
Next step is to add Controller code to a module.
Name your Controller based on functionality. Its name should follow camel case format (i.e. SampleController).
Set up the initial state of the scope object.
Declaring a Controller using ng-Controller directive.
Following code displays the definition of SampleController.
Q-38. What does a service mean in AngularJS? Explain its built-in services?
Answer.
Services are functions that are bound to perform specific tasks in an application.
It gives us a method, that helps in maintaining the angular app data for its lifetime.
It gives us methods, that facilitate to transfer data across the controllers in a consistent way.
It is a singleton object and its instance is created only once per application.
It is used to organize and share, data and function across the application.
Two main execution characteristics of angular services are that they are Singleton and lazy instantiated.
1. Lazily instantiated –
It means that AngularJS instantiates a service only when a component of an application needs it. This is done by using dependency injection method, that makes the Angular codes, robust and less error prone.
2. Singletons –
Each application component dependent on the service, work with the single instance of the service created by the AngularJS.
Let us take an example of a very simple service that calculates the square of a given number:
AngularJS internal services –
AngularJS provides many built-in services. Each of them is responsible for a specific task. Built-in services are always prefixed with the $ symbol.
Some of the commonly used services in any AngularJS application are as follows:
$http – used to make an Ajax call to get the server data.
$window – Provides a reference to a DOM object.
$Location – Provides reference to the browser location.
$timeout – Provides a reference to window.set timeout function.
$Log – used for logging.
$sanitize – Used to avoid script injections and display raw HTML in the page.
$Rootscope – Used for scope hierarchy manipulation.
$Route – Used to display browser based path in browser URL.
$Filter – Used for providing filter access.
$resource – Used to work with Restful API.
$document – Used to access the window. Document object.
$exceptionHandler – Used for handling exceptions.
$q – Provides a promise object.
$cookies – This service is useful to write, read and delete browser cookies.
$parse – This service is useful to convert AngularJS expression into a function.
$cacheFactory – This service evaluates the specified expression when the user changes the input.
Q-39. What are different ways to create service in AngularJS?
Answer.
There are 5 different ways to create services in AngularJS.
Value
Factory
Service
Provider
Constant
Let’s discuss, each of the above AngularJS service types one by one with code example:
1. AngularJS Value.
It is the simplest service type supported by AngularJS that we can create and use. It is similar to a key-value pair or like a variable having a value. It can store only a single value. Let’s take an example and create a service that displays username:
Code to use “Value”:
We can use this service anywhere by using dependency injection. Following example injects the service in a controller:
In the above example, we have created a Value service “username” and used it in MainController.
2. AngularJS Factory.
Value service may be very easy to write but, it lacks many important features. So, the next service type we will look at is “Factory” service. After its creation, we can even inject other services into it. Unlike Value service, we cannot add any dependency in it.
Let’s take an example to create a Factory service.
The above code shows that Factory service takes “function” as an argument. We can inject any number of dependencies or methods in this “function” as required by this service. This function must return some object. In our example, it returns an object with the property name. Now, let us look, as to how we can use this service:
Code to use “Factory”:
The function returns an object from service which has a property name so we can access it and use it anywhere. Let’s see how we can use it in the controller:
We are assigning the username from factory service to our scope username.
3. AngularJS Service.
It works same as the “Factory” service. But, instead of a function, it receives a Javascript class or a constructor function as an argument. Let’s take an example. Suppose we have a function:
Now, we want to convert the function into a service. Let’s take a look at how we