AngularJS is a JavaScript-based open-source front-end web framework developed and maintained by Google and by a community of individuals. It supports and simplifies the MVC and MVVM design for developing scale-able web applications. The framework adapts and extends traditional HTML to present dynamic content through two-way data-binding that allows for the automatic Synchronization of models and views.
Even after the release and wide acceptance of its successor Angular framework, AngularJS is still being used in developing applications in top companies. Here we have collected and curated some of the top AngularJS Interview Questions and Answers for helping developers in their interviews.
What is AngularJS?
Answer: AngularJS is a Javascript based front-end framework used for developing dynamic web applications, it was developed and maintained by Google. AngularJS provides developers options to write client side application (using JavaScript) in a clean MVC or MVVM way.
What are the advantages of using AngularJS framework?
Answer: Below are some of the key advantages of using AngularJS
- It lets us use HTML as the template language and allow us to extend HTML’s syntax to express our application’s components clearly.
- AngularJS’s data binding and dependency injection eliminate much of the code we would otherwise have to write. And it all happens within the browser, making it an ideal partner with any server technology.
- It free’s the developers from having to register callbacks manually or write repetitive low-level DOM manipulation tasks, by separating DOM manipulation from app logic, it makes code modular and easy to maintain.
- Application written in AngularJS is cross-browser compliant, AngularJS automatically handles JavaScript code suitable for each browser.
What are the main features of AngularJS?
Answer: Below are some of the most prominent feature of AngularJS,
- Data-binding – Enables synchronization of data across model, view, and controllers.
- Scope – It is the Object representing the model, acts as a glue layer between the view and controller.
- Controllers – Javascript functions bound to the scope object.
- Services – Substitute able objects that are wired together using dependency injection. example: $location service.
- Filters – Formats the value of an expression for displaying to the user. example: uppercase, lowercase.
- Directives – These are extended HTML attributes start with the “ng-” prefix. example: 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
What is a digest cycle in AngularJS?
Answer: Digest Cycle is the process behind the AngularJS data-binding which keeps the values in the DOM element and the model it is bound to it in Sync.
How does the digest cycle works?
Answer: Digest cycle process monitors the watch-list to keep track if there any changes in the value of watch variable. It compares the present value with its previous value and this checking is called “Dirty Checking”. If there are any changes then it will execute the respective watch listener. After the execution of that watch listener, it will notify the DOM to finally render the change in the browser.
DOM get updated after the digest process. Digest process gets executed as a part angular context.
In AngularJS application how the communication between modules can happen?
Answer: The common ways of communication between the modules are,
- Using events or services
- Directly between controllers using $parent, $$childHead, $$nextSibling
- Directly between controllers using ControllerAs and other forms of inheritance
- By assigning models on $rootScope
How the digest cycle can be decreased in AngularJS?
Answer: It can be done by decreasing the number of watchers. We can do this by,
- Removing unnecessary watchers
- Use one-time Angular binding
- Use web worker
- Cache DOM
- Work in batches
What are the steps involved in the Boot Process of AngularJS application?
Answer: First, the HTML file containing the code gets loaded into the browser. After that, the JavaScript files mentioned in the HTML code gets loaded. It then creates a global object for angular. Now, the JavaScript which invokes the controller functions gets executed. During this step, AngularJS scans the complete HTML code to locate the views. If there are views found, then Angular links them to the corresponding controller functions. In this step, AngularJS initiates the execution of linked controller functions.
Next it populates the views with data from the model identified by the controller. Finally the page is ready.
Does AngularJS provide any security features?
Answer: AngularJS provides built-in protection for the following common security flaws in web applications,
- It prevents cross-site scripting attacks – Cross-site scripting is a type of security vulnerability found in web applications. XSS attacks enable attackers to inject client-side scripts into web pages viewed by other users. A cross-site scripting vulnerability may be used by attackers to bypass access controls such as the same-origin policy.
- It prevents HTML injection attacks – HTML injection is a technique used to take advantage of non-validated input to modify a web page presented by a web application to its users. Attackers take advantage of the fact that the content of a web page is often related to a previous interaction with users.
- It prevents XSRF protection for server-side communication: “Auth token” mechanism can handle it. 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.
How can we validate data in AngularJS?
Answer: AngularJS enriches form filling and validation process. We can use $dirty and $invalid flags to do the validations in a seamless way. To disable any browser specific validation we can use novalidate with a form declaration.
Following can be used to track error,
- $dirty − states that value has been changed.
- $invalid − states that value entered is invalid.
- $error − states the exact error.
