Ace your Angular interview with confidence using this curated list of top questions and answers. Dive into topics like data binding, routing, and Angular CLI, and showcase your expertise in this powerful front-end framework.
Q1. What is AngularJS?
Ans. AngularJS is a client-side JavaScript Model-View-Controller (MVC) framework for developing rich and extensible web applications. It mainly runs on plain JavaScript and HTML and is suitable for Single Page Applications (SPA).
Q2. What are the different features of AngularJS?
Ans. The various features of AngularJS are:
- Architecture
- Codeless
- Data Binding
- Deep Linking
- Dependency Injection
- Directives
- Not Browser Specific
- Productivity
- Routing
- Speed and Performance
Q3. What are Directives in AngularJS?
Ans. AngularJS lets you extend HTML with new attributes called Directives. Thus, Directives in AngularJS are extended HTML attributes. Most of the directives in AngularJS come with the prefix ng-. Some of the built-in Directives are:
- ng-app – initializes AngularJS and makes the specified element a root element of the application
- ng-init – initializes variables in AngularJS application
- ng-bind – binds the model property declared via $scope or ng-model directive, or the result of an expression to the HTML element
- ng-model – binds <input>, <select> or <textarea> elements to a specified property on the $scope object
- ng-repeat – repeats HTML once per each item in the specified array collection
- ng-app – it initializes an AngularJS application
Q4. What are Expressions in AngularJS?
Ans. Expressions in AnjularJS are used to bind application data to HTML. They are written inside double curly braces like {{expression}} and behave in the same way as ng-bind directives. They are pure JavaScript expressions and output the data where they are used.
For example:
<p>Name: {{name.title}}</p>Q5. Explain $scope in Angular?
Ans. ‘$scope’ is a built-in object containing application data and methods. The ‘$scope’ object instance is created when the ‘ng-controller’ directive is encountered.
For example:
afunction Function1($scope)
$scope.ControllerName = “Function1”;
function Function2($scope)
$scope.ControllerName = “Function2”;Q6. What should be the maximum number of concurrent “watches”?
Ans. There should be a maximum of 2000 to reduce memory consumption and improve performance.
Q7. Can we force the digest cycle to run manually?
Ans. Yes, we can force the digest cycle to run manually by using $apply().
Q8. Which is the latest version of angular?
Ans. Angular 8 is the latest version of angular.
Q9. What is Data Binding in AngularJS?
Ans. The automatic data synchronisation between the model and view components is called Data Binding in AngularJS. AngularJS applications usually have a data model, a collection of data available. The View is the HTML container where the AngularJS application is displayed.
Q10. What are the different types of Directives?
Ans. The different types of Directives are –
- Components directives
- Structural directives
- Attribute directives
Q11. Name different types of Linking Functions.
Ans. The two types of Linking Functions are pre-linking functions and post-linking functions.
Q12. What is the Controller in AngularJS?
Ans. A Controller is a set of JavaScript functions bound to a specified scope, the ng-Controller directive.
Q13. Is AngularJS compatible with all browsers?
Ans. Yes, it is compatible with all browsers, including Google Chrome, Mozilla Firefox, Safari, Opera, Internet Explorer, and Mobile browsers.
Q14. Name some major browsers supported by AngularJS.
Ans. The following are some of the major browsers supported by AngularJS:
- Google Chrome
- Mozilla Firefox
- Microsft Edge
- IE 10, 11,
- IE Mobile
- Safari
Q15. Name the building blocks of Angular.
Ans. The following are the building blocks of Angular:
- Blocks
- Lane
- Template
- Component
- Services
- Pro injection
- Orders
- Data Nemo
Q16. What is the difference between Angular and AngularJS?
Ans. This is one of the most important Angular interview questions. The differences between Angular and AngularJS are:
| Feature | AngularJS | Angular |
| Components | AngularJS is based on JavaScript. | Angular uses a superset of ES6, which has backward compatibility with ES5. |
| Architecture | It uses MVC (Model View Controller) design model. ‘View’ displays the information in the model, and ‘Controller’ processes the information. | It uses components and directives. |
| Language | Code is written in Javascript | Code is written in TypeScript |
| Expression Syntax | ng-bind is used to bind data from view to model. | () is used to bind an event and [] for property binding. |
| Mobile Support | AngularJS code is not mobile-friendly. | It is supported by all the popular mobile browsers. |
| Routing | It uses $routeprovider.when() for routing configuration. | Angular uses @RouteConfig{(…)} is used for routing configuration. |
| Dependency Injection | It does not use Dependency Injection. | It uses a Hierarchical Dependency Injection system. |
Q17. Explain dirty checking.
Ans. Dirty checking in Angular is implemented for two-way data binding on $scope variables. The Digest cycle tracks the watchlist and checks if there are any changes in the watch variable’s value. It compares the new scope model values with the previous scope values. In case of any changes in the value of any variable, it forces us to reassign the values of other watched variables in the DOM. Watchers will update the view as per the model value change. The Digest cycle will run again to ensure all the values are synced. This is termed Dirty Checking.
Q18. How will you update Angular 6 to Angular 7?
Ans. We can update Angular 6 to Angular 7 by using the following command:
ng update @angular/cli @angular/core Q19. What is a Digest Cycle in AngularJS? How does it work?
Ans. This is one of the commonly asked Angular interview questions. AngularJS Digest Cycle refers to the process of data binding. It observes the watchlist and keeps a track of changes in the value of the watch variable. In each digest cycle, Angular compares the previous and the new version of the scope model values. This process is triggered automatically but we can also trigger it manually by using $apply().
Q20. How can you decrease Digest Cycle Time?
Ans. When a digest cycle is triggered, it loops over every binding to detect model changes. The digest cycle time can be decreased by reducing the number of watchers. This also reduces application memory footprints.
Q21. How can you share data between Controllers?
Ans. There are two main scenarios while sharing data between Controllers:
- Sharing data between a parent and a child controller
- Sharing data between unrelated controllers
The sharing of data between a parent and a child controller can be done by:
- using $parent in HTML code
- use of $parent in child controller
- using controller inheritance
Sharing data between controllers without having relation – It can be done by:
- Holding the shared data in a factory or service
- Using the rootScope variable
- Use of events to notify other controllers about changes to the data
Q22. What is the Currency Filter? What are the two ways to use Currency Filters?
Ans. The Currency Filter formats a number into a currency format. The currency filter uses the local currency format if no currency format is specified.
Currency Filter Syntax:
{{currencyexpression | currency : symbol : fractionsize}}Q23. What is Dependency Injection?
Ans. Dependency Injection is a process where we inject the dependent objects rather than the consumer creating the objects. It is a design pattern used to implement IoC. Dependency Injection is providing the objects that an object needs (its dependencies) instead of having it construct them. It involves 3 types of classes.
- Client Class
- Service Class
- Injector Class
Q24. What are the benefits of Dependency Injection?
Ans. The following are the benefits of Dependency Injection:
- It offers a client the flexibility of being configurable
- It allows testing to be performed using mock objects
- Loosely coupled architecture
Q25. What is the “$rootScope” in AngularJS?
Ans. Scope provides a separation between View and its Model. Every application has a $rootScope provided by AngularJS, and every other scope is its child scope. If a variable has the same name in both the current scope and the rootScope, then the application uses the one in the current scope.
Q26. How to create a service in AngularJS?
Ans. In AngularJS, the service is created by registering it with the module in which it will operate. It can be created in three ways:
- Factory
- Service
- Provider
Q27. Mention the major differences between AngularJS and JavaScript Expressions.
Ans. Some of the significant differences between AngularJS and JavaScript Expressions are –
| Angular Expressions | JavaScript Expressions |
| 1. AngularJS expressions are evaluated against a scopeobject | 1. They are evaluated against the global window |
| 2. AngularJS expressions can be written in HTML | 2. JavaScript expressions cannot be written in HTML |
| 3. These expressions don’t support conditionals, loops, and exceptions | 3. JavaScript expressions support conditionals, loops, and exceptions |
| 4. AngularJS expressions support filters | 4. They do not support filters |
| 5. One-time binding is supported | 5. One-time binding is not supported |
Q28. What is the SPA (Single page application) in AngularJS?
Ans. SPAs are web applications that load a single HTML page and dynamically update that page as the user interacts with the app.
Q29. Which directive hides elements from the HTML DOM by removing them from that DOM and not changing their styling?
Ans. ngIf Directive is used to hide elements from the HTML DOM by removing them from that DOM and not changing their styling
Q30. How do you disable a button depending on a checkbox’s state?
Ans. Using the ng-disabled directive, we can disable a button depending on a checkbox’s state.
Q31. What is Representational State Transfer (REST) in AngularJS?
Ans. REST is a style of API that operates over HTTP requests. The requested URL identifies the data to be operated on, and the HTTP method identifies the operation to perform.
Q32. When should you use an Attribute versus an Element?
Ans. An Attribute is used when decorating an existing element with new functionality.
An Element is used when we are creating a component that is in control of the template.
Q33. Name some commonly used inbuilt services in AngularJs.
Ans. There are 30 inbuilt services in AngularJs. Some of the commonly used services include:
- $location
- $scope
- $http
- $window
- $interval
- $timeout
Q34. What is DDO (Directive Definition Object)?
Ans. DDO is an object used while creating a custom directive. It tells the compiler how a Directive needs to be assembled. Some properties include the link function, controller function, template, restrict, and templateUrl.
Q35. What is the Provider Method in AngularJS?
Ans. A provider is an object that creates a service object by allowing it to take more control. It is an object with a $get() method. The $get() method used in the provider returns the service object. The service name and the factory function are the arguments passed into the provider method. AngularJS uses $provide to register new providers.
Syntax:
serviceApp.provider(“logService”, function ())
