You can check all 61 AngularJS interview questions here 👉 https://devinterview.io/dev/angularjs-interview-questions
There are following reasons to choose AngularJS as a web development framework:
- It is based on MVC pattern which helps you to organize your web apps or web application properly.
- It extends HTML by attaching directives to your HTML markup with new attributes or tags and expressions in order to define very powerful templates.
- It also allows you to create your own directives, making reusable components that fill your needs and abstract your DOM manipulation logic.
- It supports two-way data binding i.e. connects your HTML (views) to your JavaScript objects (models) seamlessly. In this way any change in model will update the view and vice versa without any DOM manipulation or event handling.
- It encapsulates the behavior of your application in controllers which are instantiated with the help of dependency injection.
- It supports services that can be injected into your controllers to use some utility code to fullfil your need. For example, it provides $http service to communicate with REST service.
- It supports dependency injection which helps you to test your angular app code very easily.
- Also, AngularJS is mature community to help you. It has widely support over the internet.
ng-show/ng-hide will always insert the DOM element, but will display/hide it based on the condition. ng-if will not insert the DOM element until the condition is not fulfilled.
ng-if is better when we needed the DOM to be loaded conditionally, as it will help load page bit faster compared to ng-show/ng-hide.
We only need to keep in mind what the difference between these directives is, so deciding which one to use totally depends on the task requirements.
To prevent accidental name collisions with your code, Angular prefixes names of public objects with $ and names of private objects with $$. So, do not use the $ or $$ prefix in your code.
A module might have dependencies on other modules. The dependent modules are loaded by angular before the requiring module is loaded.
In other words the configuration blocks of the dependent modules execute before the configuration blocks of the requiring module. The same is true for the run blocks. Each module can only be loaded once, even if multiple other modules require it.
Directives are markers 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 (e.g. via event listeners), or even to transform the DOM element and its children.
Angular comes with a set of these directives built-in, like ngBind, ngModel, and ngClass. Much like you create controllers and services, you can create your own directives for Angular to use. When Angular bootstraps your application, the HTML compiler traverses the DOM matching directives against the DOM elements.
In AngularJS services are the singleton objects or functions that are used for carrying out specific tasks. It holds some business logic and these function can be called as controllers, directive, filters and so on.
- One way binding implies that the scope variable in the html will be set to the first value its model is bound to (i.e. assigned to)
- Two way binding implies that the scope variable will change it’s value everytime its model is assigned to a different value
AngularJS has no dependency on jQuery library. But it can be used with jQuery library.
During compilation process when specific HTML constructs are encountered a behaviour or function is triggered, this function is referred as directive. It is executed when the compiler encounters it in the DOM.
Different types of directives are:
- Element directives
- Attribute directives
- CSS class directives
- Comment directives
Angular initializes automatically upon DOMContentLoaded event or when the angular.js script is downloaded to the browser and the document.readyState is set to complete. At this point AngularJS looks for the ng-app directive which is the root of angular app compilation and tells about AngularJS part within DOM. When the ng-app directive is found then Angular will:
- Load the module associated with the directive.
- Create the application injector.
- Compile the DOM starting from the ng-app root element. This process is called auto-bootstrapping.
<html>
<body ng-app="myApp">
<div ng-controller="Ctrl"> Hello {{msg}}!
</div>
<script src="lib/angular.js"></script>
<script>
var app = angular.module('myApp', []); app.controller('Ctrl', function ($scope) {
$scope.msg = 'World';
});
</script>
</body>
</html>There are following advantages of AngularJS:
- Data Binding - AngularJS provides a powerful data binding mechanism to bind data to HTML elements by using scope.
- Customize & Extensible - AngularJS is customized and extensible as per you requirement. You can create your own custom components like directives, services etc.
- Code Reusability - AngularJS allows you to write code which can be reused. For example custom directive which you can reuse.
- Support – AngularJS is mature community to help you. It has widely support over the internet. Also, AngularJS is supported by Google which gives it an advantage.
- Compatibility - AngularJS is based on JavaScript which makes it easier to integrate with any other JavaScript library and runnable on browsers like IE, Opera, FF, Safari, Chrome etc.
- Testing - AngularJS is designed to be testable so that you can test your AngularJS app components as easy as possible. It has dependency injection at its core, which makes it easy to test.
Scope is a JavaScript object that refers to the application model. It acts as a context for evaluating angular expressions. Basically, it acts as glue between controller and view.
Scopes are hierarchical in nature and follow the DOM structure of your AngularJS app. AngularJS has two scope objects: $rootScope and $scope.
The $scope object used by views in AngularJS are organized into a hierarchy. There is a root scope, and the $rootScope can has one or more child scopes. Each controller has its own $scope (which is a child of the $rootScope), so whatever variables you create on $scope within controller, these variables are accessible by the view based on this controller.
For example, suppose you have two controllers: ParentController and ChildController as given below:
<html> <head> <script src="lib/angular.js"></script> <script> var app = angular.module('ScopeChain', []); app.controller("parentController", function ($scope) { $scope.managerName = 'Shailendra Chauhan'; $scope.$parent.companyName = 'Dot Net Tricks'; //attached to $rootScope }); app.controller("childController", function ($scope, $controller) { $scope.teamLeadName = 'Deepak Chauhan'; });</span></span><span class="token cBool"><span class="token cBool"><span class="token cBase"></</span>script</span><span class="token cBase">></span></span>
</head> <body ng-app="ScopeChain"> <div ng-controller="parentController "> <table style="border:2px solid #e37112"> <caption>Parent Controller</caption> <tr> <td>Manager Name</td> <td>{{managerName}}</td> </tr> <tr> <td>Company Name</td> <td>{{companyName}}</td> </tr> <tr> <td> <table ng-controller="childController" style="border:2px solid #428bca"> <caption>Child Controller</caption> <tr> <td>Team Lead Name</td> <td>{{ teamLeadName }}</td> </tr> <tr> <td>Reporting To</td> <td>{{managerName}}</td> </tr> <tr> <td>Company Name</td> <td>{{companyName}}</td> </tr> </table> </td> </tr> </table> </div> </body> </html>
Filters are used to format data before displaying it to the user. They can be used in view templates, controllers, services and directives. There are some built-in filters provided by AngularJS like as Currency, Date, Number, OrderBy, Lowercase, Uppercase etc. You can also create your own filters.
Filter Syntax:
{{ expression | filter}}
Is a great pattern that restricts the use of a class more than once. We can find singleton pattern in angular in dependency injection and in the services.
In a sense, if the you do 2 times new Object() without this pattern, the you will be alocating 2 pieces of memory for the same object. With singleton pattern, if the object exists, it'll be reused.
AngularJS directives are a combination of AngularJS template markups (HTML attributes or elements, or CSS classes) and supporting JavaScript code. The JavaScript directive code defines the template data and behaviors of the HTML elements.
AngularJS directives are used to extend the HTML vocabulary i.e. they decorate html elements with new behaviors and help to manipulate html elements attributes in interesting way.
There are some built-in directives provided by AngularJS like as ng-app, ng-controller, ng-repeat, ng-model etc.
The features of AngularJS are listed below:
- Modules
- Directives
- Templates
- Scope
- Expressions
- Data Binding
- MVC (Model, View & Controller)
- Validations
- Filters
- Services
- Routing
- Dependency Injection
- Testing
- Inject the module that contains the filter.
- Provide any mocks that the filter relies on.
- Get an instance of the filter using
$filter('yourFilterName'). - Assert your expectations.
Create an AngularJS service that will hold the data and inject it inside of the controllers.
Using a service is the cleanest, fastest and easiest way to test. However, there are couple of other ways to implement data sharing between controllers, like:
– Using events
– Using $parent, nextSibling, controllerAs, etc. to directly access the controllers
– Using the $rootScope to add the data on (not a good practice)
The methods above are all correct, but are not the most efficient and easy to test.
Scope is an object that refers to the application model. It is an execution context for expressions. Scopes are arranged in hierarchical structure which mimic the DOM structure of the application. Scopes can watch expressions and propagate events. Scopes are objects that refer to the model. They act as glue between controller and view.
The ngIf Directive, when applied to an element, will remove that element from the DOM if it’s condition is false.
This can be done by using the ng-hide directive in conjunction with a controller to hide an HTML element on button click.
<div ng-controller="MyCtrl">
<button ng-click="hide()">Hide element</button>
<p ng-hide="isHide">Hello World!</p>
</div>function MyCtrl($scope) {
$scope.isHide = false;
$scope.hide = function () {
$scope.isHide = true;
};
}We can use the ng-disabled directive and bind its condition to the checkbox’s state.
<body ng-app>
<label>
<input type="checkbox" ng-model="checked" />Disable Button
</label>
<button ng-disabled="checked">Select me</button>
</body>The restrict option in angular directive, is used to specify how a directive will be invoked in your angular app i.e. as an attribute, class, element or comment.
There are four valid options for restrict:
'A' (Attribute)- <span my-directive></span>
'C' (Class)- <span class="my-directive:expression;"></span>
'E' (Element)- <my-directive></my-directive>
'M' (Comment)- <!-- directive: my-directive expression -->jQLite is a subset of jQuery that is built directly into AngularJS. jQLite provides you all the useful features of jQuery. In fact it provides you limited features or functions of jQuery.
Routes enable you to create different URLs for different content in your application. Different URLs for different content enables user to bookmark URLs to specific content. Each such bookmarkable URL in AngularJS is called a route.
To reduce memory consumption and improve performance it is a good idea to limit the number of watches on a page to 2,000. A utility called ng-stats can help track your watch count and digest cycles.
Like JavaScript, Angular expressions are code snippets that are usually placed in binding such as {{ expression }}
The key difference between the JavaScript expressions and Angular expressions:
- Context : In Angular, the expressions are evaluated against a scope object, while the Javascript expressions are evaluated against the global window
- Forgiving: In Angular expression evaluation is forgiving to null and undefined, while in Javascript undefined properties generates TypeError or ReferenceError
- No Control Flow Statements: Loops, conditionals or exceptions cannot be used in an angular expression
- Filters: To format data before displaying it you can use filters
There are four methods to invoke a directive in your angular app which are equivalent.
- As an attribute
<span my-directive></span- As a class
<span class="my-directive: expression;"></span>
* As an element
<my-directive></my-directive></code></pre><ul><li>As a comment<pre><code><span class="token cComment"><!-- directive: my-directive expression --></span></code></pre></li></ul><pre><code></code></pre></div></div><div class="row my-2"><div><span><i>Source:</i> <span><a href="/krosti/angularjs-q-a/blob/master/README.md" rel="noreferrer" target="_blank" title="What are different ways to invoke a directive? Interview Questions Source To Answer">github.com/krosti</a></span></span> </div></div></div></div></div> <br><br></div><div data-v-5e9078c0="" class="unit"><div><h2>🔹 31. What is the role of ng-app, ng-init and ng-model directives?</h2></div> <div>
👉🏼 Check
<a href="https://devinterview.io/dev/angularjs-interview-questions">all 61 answers</a></div> <br><br></div><div data-v-5e9078c0="" class="unit"><div><h2>🔹 32. How to access jQLite?</h2></div> <div>
👉🏼 Check
<a href="https://devinterview.io/dev/angularjs-interview-questions">all 61 answers</a></div> <br><br></div><div data-v-5e9078c0="" class="unit"><div><h2>🔹 33. What is the role of services in AngularJS and name any services made available by default?</h2></div> <div>
👉🏼 Check
<a href="https://devinterview.io/dev/angularjs-interview-questions">all 61 answers</a></div> <br><br></div><div data-v-5e9078c0="" class="unit"><div><h2>🔹 34. What is manual bootstrap process in AngularJS?</h2></div> <div>
👉🏼 Check
<a href="https://devinterview.io/dev/angularjs-interview-questions">all 61 answers</a></div> <br><br></div><div data-v-5e9078c0="" class="unit"><div><h2>🔹 35. What is a digest cycle in AngularJS?</h2></div> <div>
👉🏼 Check
<a href="https://devinterview.io/dev/angularjs-interview-questions">all 61 answers</a></div> <br><br></div><div data-v-5e9078c0="" class="unit"><div><h2>🔹 36. Explain what is the difference between link and compile in AngularJS?</h2></div> <div>
👉🏼 Check
<a href="https://devinterview.io/dev/angularjs-interview-questions">all 61 answers</a></div> <br><br></div><div data-v-5e9078c0="" class="unit"><div><h2>🔹 37. Is it a good or bad practice to use AngularJS together with jQuery?</h2></div> <div>
👉🏼 Check
<a href="https://devinterview.io/dev/angularjs-interview-questions">all 61 answers</a></div> <br><br></div><div data-v-5e9078c0="" class="unit"><div><h2>🔹 38. If you were to migrate from Angular 1.4 to Angular 1.5, what is the main thing that would need refactoring?</h2></div> <div>
👉🏼 Check
<a href="https://devinterview.io/dev/angularjs-interview-questions">all 61 answers</a></div> <br><br></div><div data-v-5e9078c0="" class="unit"><div><h2>🔹 39. How do you reset a "timeout", "interval()", and disable a "$watch()"?</h2></div> <div>
👉🏼 Check
<a href="https://devinterview.io/dev/angularjs-interview-questions">all 61 answers</a></div> <br><br></div><div data-v-5e9078c0="" class="unit"><div><h2>🔹 40. Where should we implement the DOM manipulation in AngularJS?</h2></div> <div>
👉🏼 Check
<a href="https://devinterview.io/dev/angularjs-interview-questions">all 61 answers</a></div> <br><br></div><div data-v-5e9078c0="" class="unit"><div><h2>🔹 41. What is an interceptor? What are common uses of it?</h2></div> <div>
👉🏼 Check
<a href="https://devinterview.io/dev/angularjs-interview-questions">all 61 answers</a></div> <br><br></div><div data-v-5e9078c0="" class="unit"><div><h2>🔹 42. How would you react on model changes to trigger some further action?</h2></div> <div>
👉🏼 Check
<a href="https://devinterview.io/dev/angularjs-interview-questions">all 61 answers</a></div> <br><br></div><div data-v-5e9078c0="" class="unit"><div><h2>🔹 43. How would you validate a text input field for a twitter username, including the @ symbol?</h2></div> <div>
👉🏼 Check
<a href="https://devinterview.io/dev/angularjs-interview-questions">all 61 answers</a></div> <br><br></div><div data-v-5e9078c0="" class="unit"><div><h2>🔹 44. How would you make an Angular service return a promise?</h2></div> <div>
👉🏼 Check
<a href="https://devinterview.io/dev/angularjs-interview-questions">all 61 answers</a></div> <br><br></div><div data-v-5e9078c0="" class="unit"><div><h2>🔹 45. What is the difference between $scope and scope?</h2></div> <div>
👉🏼 Check
<a href="https://devinterview.io/dev/angularjs-interview-questions">all 61 answers</a></div> <br><br></div><div data-v-5e9078c0="" class="unit"><div><h2>🔹 46. Can you define multiple restrict options on a directive?</h2></div> <div>
👉🏼 Check
<a href="https://devinterview.io/dev/angularjs-interview-questions">all 61 answers</a></div> <br><br></div><div data-v-5e9078c0="" class="unit"><div><h2>🔹 47. Explain what is injector?</h2></div> <div>
👉🏼 Check
<a href="https://devinterview.io/dev/angularjs-interview-questions">all 61 answers</a></div> <br><br></div><div data-v-5e9078c0="" class="unit"><div><h2>🔹 48. How AngularJS is compiled?</h2></div> <div>
👉🏼 Check
<a href="https://devinterview.io/dev/angularjs-interview-questions">all 61 answers</a></div> <br><br></div><div data-v-5e9078c0="" class="unit"><div><h2>🔹 49. What makes the angular.copy() method so powerful?</h2></div> <div>
👉🏼 Check
<a href="https://devinterview.io/dev/angularjs-interview-questions">all 61 answers</a></div> <br><br></div><div data-v-5e9078c0="" class="unit"><div><h2>🔹 50. Explain what is linking function and type of linking function?</h2></div> <div>
👉🏼 Check
<a href="https://devinterview.io/dev/angularjs-interview-questions">all 61 answers</a></div> <br><br></div><div data-v-5e9078c0="" class="unit"><div><h2>🔹 51. When should you use an attribute versus an element?</h2></div> <div>
👉🏼 Check
<a href="https://devinterview.io/dev/angularjs-interview-questions">all 61 answers</a></div> <br><br></div><div data-v-5e9078c0="" class="unit"><div><h2>🔹 52. What is $scope and $rootScope?</h2></div> <div>
👉🏼 Check
<a href="https://devinterview.io/dev/angularjs-interview-questions">all 61 answers</a></div> <br><br></div><div data-v-5e9078c0="" class="unit"><div><h2>🔹 53. What is DDO (Directive Definition Object)?</h2></div> <div>
👉🏼 Check
<a href="https://devinterview.io/dev/angularjs-interview-questions">all 61 answers</a></div> <br><br></div><div data-v-5e9078c0="" class="unit"><div><h2>🔹 54. Explain what is DI (Dependency Injection ) and how an object or function can get a hold of its dependencies?</h2></div> <div>
👉🏼 Check
<a href="https://devinterview.io/dev/angularjs-interview-questions">all 61 answers</a></div> <br><br></div><div data-v-5e9078c0="" class="unit"><div><h2>🔹 55. Explain how $scope.$apply() works?</h2></div> <div>
👉🏼 Check
<a href="https://devinterview.io/dev/angularjs-interview-questions">all 61 answers</a></div> <br><br></div><div data-v-5e9078c0="" class="unit"><div><h2>🔹 56. How AngularJS compilation is different from other JavaScript frameworks?</h2></div> <div>
👉🏼 Check
<a href="https://devinterview.io/dev/angularjs-interview-questions">all 61 answers</a></div> <br><br></div><div data-v-5e9078c0="" class="unit"><div><h2>🔹 57. How Directives are compiled?</h2></div> <div>
👉🏼 Check
<a href="https://devinterview.io/dev/angularjs-interview-questions">all 61 answers</a></div> <br><br></div><div data-v-5e9078c0="" class="unit"><div><h2>🔹 58. How would you programatically change or adapt the template of a directive before it is executed and transformed?</h2></div> <div>
👉🏼 Check
<a href="https://devinterview.io/dev/angularjs-interview-questions">all 61 answers</a></div> <br><br></div><div data-v-5e9078c0="" class="unit"><div><h2>🔹 59. What are Compile, Pre and Post linking in AngularJS?</h2></div> <div>
👉🏼 Check
<a href="https://devinterview.io/dev/angularjs-interview-questions">all 61 answers</a></div> <br><br></div><div data-v-5e9078c0="" class="unit"><div><h2>🔹 60. When creating a directive, it can be used in several different ways in the view. Which ways for using a directive do you know? How do you define the way your directive will be used?</h2></div> <div>
👉🏼 Check
<a href="https://devinterview.io/dev/angularjs-interview-questions">all 61 answers</a></div> <br><br></div><div data-v-5e9078c0="" class="unit"><div><h2>🔹 61. How would you implement application-wide exception handling in your Angular app?</h2></div> <div>
👉🏼 Check
<a href="https://devinterview.io/dev/angularjs-interview-questions">all 61 answers</a></div> <br><br></div> <div data-v-5e9078c0="" class="end"></div> <br data-v-5e9078c0="">
Thanks 🙌 for reading and good luck on your next tech interview!
<br data-v-5e9078c0="">
Explore 3800+ dev interview question here 👉
<a data-v-5e9078c0="" href="https://devinterview.io/">Devinterview.io</a></div>