AngularJS Interview Questions and Answers

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

 
          
Hello {{name}}
 
 

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.
• AngularJS provides structure and tools to build scalable applications.

JavaScript Example

 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

 
     {{item}} 
 

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

 
     AngularJS App Starts Here 
 

5. What is ng-model Directive?

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

Example

  
Welcome {{username}}
 

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

  
{{message}}
 

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.

Controller Example

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

HTML Example

 
{{name}}
 

8. Difference Between $scope and $rootScope

• $scope is limited to a controller.
• $rootScope is global and accessible across the 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 creating them.

Example

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

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. Difference Between Service, Factory, and Provider

• Service: Uses constructor function.
• Factory: Returns an object.
• Provider: Most configurable and 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, AngularJS runs the $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 the DOM.
• ng-show hides elements using CSS.

ng-if can improve performance by removing unnecessary elements completely.

17. What is ng-repeat?

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

Example

 
     {{item}} 
 

18. What are Filters?

Filters format data in the view such as uppercase, lowercase, currency, date, and more.

Example

 {{ name | uppercase }} 

19. What is Routing in AngularJS?

Routing allows navigation between views without reloading the page. This is a key feature used in Single Page Applications (SPAs).

20. Advantages and Limitations of AngularJS

Advantages

• MVC architecture
• Two-way data binding
• Dependency Injection
• Rapid application development

Limitations

• Performance issues in large applications
• Complex digest cycle
• 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.