AngularJS Interview Questions and Answers

These AngularJS interview questions and answers are written from the perspective of a senior software engineer with 25+ years of experience in enterprise application development. Each answer includes real-world explanations and examples where necessary.

1. What is AngularJS, and what are its key features?

AngularJS is an open-source front-end JavaScript framework developed by Google. It is used to build dynamic single-page applications (SPAs). It extends HTML with additional attributes and provides powerful features like data binding and dependency injection.

Example: In AngularJS, an input field can automatically update displayed text using two-way binding.

<div ng-app>
    <input type="text" ng-model="name">
    <h3>Hello {{name}}</h3>
</div>

When the user types in the input field, the heading updates instantly without page refresh.

2. Difference between AngularJS and JavaScript

JavaScript is a programming language, while AngularJS is a framework built on top of JavaScript. JavaScript provides the core logic, whereas AngularJS provides structure and tools to build scalable applications.

Example: JavaScript requires manual DOM manipulation:

document.getElementById("demo").innerHTML = "Hello World";

In AngularJS, the same result is achieved using data binding without direct DOM manipulation.

3. What are directives in AngularJS?

Directives are special markers in AngularJS that extend HTML functionality. They tell AngularJS to behave in a specific way.

Common directives: ng-app, ng-model, ng-repeat, ng-if

Example:

<ul>
    <li ng-repeat="item in items">{{item}}</li>
</ul>

This automatically generates a list from an array.

4. What is ng-app directive?

The ng-app directive defines the root element of an AngularJS application. It initializes AngularJS and tells the framework where the application starts.

Example:

<div ng-app="myApp">
    AngularJS App Starts Here
</div>

5. What is ng-model directive?

ng-model binds input fields to variables in the AngularJS scope. It enables two-way data binding.

Example:

<input type="text" ng-model="username">
<p>Welcome {{username}}</p>

6. What is two-way data binding?

Two-way data binding means that any change in the model automatically updates the view and vice versa.

Example:

<input ng-model="message">
<p>{{message}}</p>

If the input changes, the paragraph updates instantly.

7. What is $scope in AngularJS?

$scope is an object that connects the controller and the view. It acts as a communication bridge.

Example:

app.controller("myCtrl", function($scope) {
    $scope.name = "John";
});

In HTML:

<p>{{name}}</p>

8. Difference between $scope and $rootScope

$scope is limited to a controller, while $rootScope is global and accessible across the entire application.

Example: $rootScope can store global variables like user login status.

9. What are controllers in AngularJS?

Controllers are JavaScript functions that manage application logic and data.

Example:

app.controller("MainCtrl", function($scope) {
    $scope.title = "AngularJS App";
});

10. What is dependency injection?

Dependency Injection (DI) is a design pattern where dependencies are automatically provided to components instead of manually created.

Example: AngularJS injects $http service into controllers automatically.

app.controller("MyCtrl", function($scope, $http) {
    // $http is injected
});

11. What are services in AngularJS?

Services are reusable singleton objects used to share data and logic across the application.

Example:

app.service("DataService", function() {
    this.getData = function() {
        return "Hello from Service";
    };
});

12. What is the difference between service, factory, and provider?

Service: Uses constructor function
Factory: Returns an object
Provider: Most configurable, used during config phase

13. What is AngularJS digest cycle?

Digest cycle checks for changes in model values and updates the view accordingly.

Example: Every time a model changes, Angular runs $digest loop.

14. What are watchers ($watch)?

Watchers monitor changes in scope variables and trigger updates.

Example:

$scope.$watch("name", function(newValue, oldValue) {
    console.log("Name changed");
});

15. What is $apply()?

$apply() manually triggers the digest cycle when changes occur outside AngularJS.

16. Difference between ng-if and ng-show

ng-if removes elements from DOM, while ng-show hides elements using CSS.

Example: ng-if improves performance by removing elements completely.

17. What is ng-repeat?

ng-repeat is used to loop through arrays and display elements dynamically.

Example:

<li ng-repeat="item in items">{{item}}</li>

18. What are filters?

Filters format data in the view like uppercase, lowercase, currency, etc.

Example: {{name | uppercase}}

19. What is routing in AngularJS?

Routing allows navigation between views without reloading the page.

20. Advantages and limitations of AngularJS

AngularJS offers MVC architecture, fast development, and two-way binding. However, it has performance limitations in large applications and is outdated compared to modern frameworks.

Conclusion

AngularJS remains an important foundation for understanding modern frontend frameworks. Mastering these concepts helps developers build scalable and maintainable applications.

AngularJS Interview Questions and Answers