AngularJS Interview Questions And Answers

11. Can angular applications (ng-app) be nested within each other?
Answer:
No. AngularJS applications cannot be nested within each other.

12. Can we have nested controllers in AngularJS?
Answer: Yes, we can create nested controllers in AngularJS. Nested controllers are defined in a hierarchical manner while using in View.

13. Explain the concept of scope. How does scope inheritance work in AngularJS?
Answer: a Scope is an object that represents the data model of an AngularJS application—it is the glue between the view and the application controller. Scope inheritance closely mimics the DOM structure of the application. With the exception of isolated scopes created using custom directives, scopes follow prototypal inheritance. The code block below demonstrates typical scope inheritance.

The important thing to note in the above example is that values have been set to models in fruitController, and the message in appleController has been overridden.

14. Explain the difference between a factory and a service in AngularJS?
Answer: AngularJS encourages developers to store business logic and persistent data separately from controllers and scopes within an application, by providing factories and services. To understand the difference, let’s take a look at the code block below.

// The code below is a service.
app.service(‘MyService’, function () {
this.helloWorld = function () {
console.log(‘Hello World’);

// The code below is a factory.
app.factory(‘MyService’, function () {
return {
HelloWorld: function () {
console.log(‘Hello World’);
syntactically distinct, the above examples perform the same task of printing “Hello World” to the console. The conceptual difference you’ll want to look for in the applicant’s answer however, is that a service is a constructor function while a factory is a function that must be called. This is why the service can use the “this” keyword while a factory must explicitly return the object that it creates. An even better answer would also reveal that a service is actually calling a predefined factory deep within the Angular.js file loaded into all AngularJS applications. Check out this code snippet from the Angular.js file.

// By calling service() you are also calling a predefined factory() within AngularJs
function service(name, constructor) {
return factory(name, [‘$injector’, function($injector) {
return $injector.instantiate(constructor);

15. What does SPA (Single Page Application) mean? How can we implement SPA with Angular?
Answer: Single Page Applications (SPAs) are web apps that load a single HTML page and dynamically update that page as the user interacts with the app. In a SPA the page never reloads, though parts of the page may refresh. This reduces the round trips to the server to a minimum.

It’s a concept where we create a single shell page or master page and load the webpages inside that master page instead of loading pages from the server by doing postbacks. We can implement SPA with Angular using Angular routes. You can read up about SPAs here.

16. What is the main thing that you would need to change if you were migrating from AngularJS 1.4 to AngularJS?
Answer: To adapt to the new AngularJS 1.5 components, you would need to change .directive to .component

17. What are the key features of AngularJS?
Answer:

• Scope
• Controller
• Model
• View
• Services
• Data Binding
• Directives
• Filters
• Testable

18. Define scope in AngularJS?
Answer: Scope is a special JavaScript object that plays the role of joining the controller (JavaScript) with the views (HTML). The controller sets properties on the scope and the view binds to them.

19. Explain the concept of scope hierarchy?
Answer: Each AngularJS application has only one root scope. Child controllers, however, create scope for each view. When the new scopes are created, they are added to their parent root scope as child scopes. This creates a hierarchical structure when they are attached.

20. Why AngularJS?
Answer: AngularJS lets us extend HTML vocabulary for our application resulting in an expressive, readable, and quick to develop environment. Some of the advantages are:

MVC implementation is done right.
It extends HTML using directives, expression, and data binding techniques to define a powerful HTML template.
Two-way data-binding, form validations, routing supports inbuilt services.
REST friendly.
Dependency injection support.
It helps you to structure and test your JavaScript code.

21. Is AngularJS compatible with all browsers?
Answer: Yes AngularJS is compatible with the following browsers: Safari, Chrome, Firefox, Opera 15, IE9 and mobile browsers (Android, Chrome Mobile, iOS Safari).

22. How to implement routing in AngularJS?
Answer:

It is a five-step process:

Step 1: – Add the “Angular-route.js” file to your view.
Step 2: – Inject “route” functionality while creating an Angular app object.
Step 3: – Configure the route provider.
Step 4: – Define hyperlinks.
Step 5: – Define sections where to load the view.

23. Explain $q service, deferred and promises?
Answer: Promises’ are post-processing logics which are executed after some operation/action is completed whereas ‘deferred’ is used to control how and when those promise logics will execute.
We can think about promises as “WHAT” we want to fire after an operation is completed while deferred controls “WHEN” and “HOW” those promises will execute.
“$q” is the angular service which provides promises and deferred functionality.

24. In 30 seconds, define AngularJS?
Answer: AngularJS is an open-source JavaScript framework designed for creating dynamic single web page applications with fewer lines of code.

25. Mention some advantages of using AngularJS framework?
Answer:

Some of the key advantages of using AngularJS framework include:

It provides a great “desktop-like” experience to the end-user.
By freeing the developer from having to register callbacks manually or write repetitive low-level DOM manipulation tasks, it saves months of development.
By separating DOM manipulation from app logic, it makes code modular and easy to test.
It supports two-way data binding.

26. Which are the common ways of communication between modules of your application, using core AngularJS functionality?
Answer:

The common ways of communication include:

Using events
Using services
By assigning models on $rootScope
Directly between controllers using controllers and other forms of inheritance (E Learning)
Directly between controllers using $parent, $childHead, $nextSibling.

27. What is data binding in AngularJS and What is the difference between one-way and two-way binding?
Answer: Data binding is the automatic attunement of data between the view and model components. AngularJS uses two-way data binding. In one-way binding, the scope variable in the HTML is set to the first value that its model is assigned to.

In two-way binding, the scope variable changes its value every time its model binds to a different value.

28. In what ways can you use a directive?
Answer: You can use a directive as an element, attribute or class name. To define the way your directive will be used, you need to set the restrict option in the directive declaration. The restrict option can be set to:

‘A’ – Only matches attribute name
‘C’ – Only matches class name
‘E’ – Only matches element name

You can combine these restrictions to produce needed results.

29. Explain what a digest cycle is in AngularJS?
Answer: During every digest cycle, all new scope model values are compared against the previous values. This is called dirty checking. If change is detected, watches set on the new model are fired and another digest cycle executes. This goes on until all models are stable.

The digest cycle is triggered automatically but it can be called manually using “.$apply()”.

30. Explain what the link function is and how it differs from compile?
Answer:

The link function combines the directives with a scope to produce a live view.

The link function is responsible for instance DOM manipulation and for registering DOM listeners.

The compile function is responsible for template DOM manipulation as well as the collection of all the directives.