AngularJS interview questions and answers

AngularJS is a popular JavaScript framework for building dynamic web applications. It was created by Google in 2010 and has since gained a large following among developers.

One of the main differences between AngularJS and other JavaScript frameworks is its use of two-way data binding. This means that changes made to the user interface (UI) are automatically reflected in the data model and vice versa, without the need for manual synchronization.

Another key feature of AngularJS is its dependency injection system, which helps manage the flow of data between different components of an application. This makes it easier to write modular, reusable code and simplifies testing and debugging.

AngularJS also offers a wide range of built-in directives and services for common tasks, such as form validation, routing, and HTTP requests. This can save developers time and effort, as they don't need to write as much code from scratch.

Overall, AngularJS is a powerful and flexible framework that has helped make JavaScript development more accessible and efficient. However, it is important to note that there are many other JavaScript frameworks available, each with their own strengths and weaknesses, and the best choice will depend on the specific needs of a project.

In AngularJS, a controller is a JavaScript constructor function that is used to control the behavior of a specific view or a portion of a view. It is responsible for managing the data and functions associated with the view, and for communicating with other components of the application as needed.

To define a controller in AngularJS, you can use the controller() method of the main AngularJS module, passing in the name of the controller and a function that defines its behavior. Here is an example:

// Define a new module
var myApp = angular.module('myApp', []);

// Define a new controller
myApp.controller('MyController', function($scope) {
  // Define some data properties
  $scope.firstName = 'John';
  $scope.lastName = 'Doe';

  // Define a function to calculate the full name
  $scope.getFullName = function() {
    return $scope.firstName + ' ' + $scope.lastName;
  };
});

In this example, we define a new module called myApp using the angular.module() method. We then define a new controller called MyController using the myApp.controller() method, passing in a function that takes a $scope parameter. The $scope object is used to share data between the controller and the view.

Inside the controller function, we define two data properties called firstName and lastName, and a function called getFullName() that concatenates the two properties to form a full name. These properties and functions can be accessed and used in the associated view by referencing the $scope object, as in the following example:

<div ng-app="myApp" ng-controller="MyController">
  <p>First name: {{firstName}}</p>
  <p>Last name: {{lastName}}</p>
  <p>Full name: {{getFullName()}}</p>
</div>

In this view, we use the ng-controller directive to associate the MyController controller with the div element. We then use curly braces and AngularJS expressions to display the data properties and the result of the getFullName() function in the corresponding paragraphs.

Sure, here's an example AngularJS app that displays a list of products and allows users to filter them by category, price range, or other criteria:

index.html:

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <title>Product Catalog</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
    <script src="app.js"></script>
</head>
<body ng-controller="myCtrl">
    <h1>Product Catalog</h1>
    <label>Filter by category:</label>
    <select ng-model="selectedCategory" ng-options="category for category in categories">
        <option value="">All categories</option>
    </select>
    <br><br>
    <label>Filter by price range:</label>
    <input type="number" ng-model="minPrice" placeholder="Minimum price"> -
    <input type="number" ng-model="maxPrice" placeholder="Maximum price">
    <br><br>
    <table>
        <thead>
            <tr>
                <th>Name</th>
                <th>Category</th>
                <th>Price</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="product in products | filter: { category: selectedCategory } | filter: priceFilter">
                <td>{{ product.name }}</td>
                <td>{{ product.category }}</td>
                <td>{{ product.price | currency }}</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

app.js:

var app = angular.module("myApp", []);

app.controller("myCtrl", function($scope) {
    $scope.categories = ["Electronics", "Clothing", "Home", "Sports"];
    $scope.products = [
        { name: "iPhone", category: "Electronics", price: 1000 },
        { name: "T-shirt", category: "Clothing", price: 20 },
        { name: "Sofa", category: "Home", price: 500 },
        { name: "Basketball", category: "Sports", price: 30 },
        { name: "Laptop", category: "Electronics", price: 1500 },
        { name: "Jeans", category: "Clothing", price: 50 },
        { name: "Bed", category: "Home", price: 800 },
        { name: "Football", category: "Sports", price: 25 }
    ];

    $scope.priceFilter = function(product) {
        if (!$scope.minPrice && !$scope.maxPrice) {
            return true;
        }
        if (!$scope.minPrice) {
            return product.price <= $scope.maxPrice;
        }
        if (!$scope.maxPrice) {
            return product.price >= $scope.minPrice;
        }
        return product.price >= $scope.minPrice && product.price <= $scope.maxPrice;
    };
});

This app displays a list of products in a table and allows users to filter them by category and price range. The app has a dropdown menu for selecting the category and two number inputs for setting the minimum and maximum price range. The app uses two filters to filter the list of products based on the selected category and price range. The app also formats the price using the currency filter.

AngularJS provides built-in support for form validation through its ngMessages and ngModel directives, which allow you to easily define validation rules and error messages for your form inputs.

Here are the basic steps for handling form validation in AngularJS:

1. First, define your form using the ngForm directive, which creates a new instance of the form object on the scope.

<form name="myForm" ng-submit="submitForm()" novalidate>

In this example, we define a new form called myForm using the ngForm directive. The novalidate attribute tells the browser not to perform its default validation, allowing us to handle validation using AngularJS.

1. Next, add your form inputs using the ngModel directive, which binds the input value to a property on the scope and provides built-in support for validation.

<input type="text" name="username" ng-model="user.username" required>

In this example, we define a text input called username using the ngModel directive. The required attribute tells AngularJS to require a value for this input.

1. Define validation rules using the ngMessages directive, which displays error messages based on the current state of the form input.

<div ng-messages="myForm.username.$error">
  <div ng-message="required">Username is required.</div>
</div>

In this example, we define an error message to display if the username input is required but has no value. The ng-messages directive checks the current state of the input's $error object to determine which error message to display.

1. Finally, handle the form submission in your controller using the ngSubmit directive.

$scope.submitForm = function() {
  if ($scope.myForm.$valid) {
    // Form is valid - handle submission
  } else {
    // Form is invalid - display error message
  }
};

In this example, we define a function called submitForm on the scope, which is called when the form is submitted. The function checks if the form is valid using the $valid property on the form object, and handles the submission or displays an error message accordingly.

By using these directives and techniques, you can easily handle form validation in AngularJS and provide a smooth and user-friendly experience for your users.

In AngularJS, a directive is a reusable component that encapsulates a piece of HTML and its associated behavior. Directives allow you to extend the functionality of HTML and create custom elements, attributes, and classes that can be used throughout your application.

There are several types of directives in AngularJS, including:

• Element directives: create custom HTML elements
  
  
• Attribute directives: modify the behavior of existing HTML elements
  
  
• Class directives: apply behavior to elements with a specific class
  
  

To create a directive in AngularJS, you can use the directive method of the angular.module object. Here's an example:

angular.module('myApp').directive('myDirective', function() {
  return {
    restrict: 'E',
    template: '<div>Hello, {{name}}!</div>',
    scope: {
      name: '@'
    }
  };
});

In this example, we define a new directive called myDirective using the directive method. The restrict property tells AngularJS how the directive can be used (E for element, A for attribute, and C for class), and the template property defines the HTML content of the directive.

We also define a scope object, which specifies the inputs and outputs of the directive. In this case, we define a single input called name, which is passed to the directive as an attribute and displayed in the template using double curly braces.

Once defined, the directive can be used in your HTML code like any other HTML element:

<my-directive name="John"></my-directive>

In this example, we use the myDirective element to display a custom message that greets the user by name.

By creating custom directives in AngularJS, you can encapsulate complex functionality, improve code organization and reusability, and create a more modular and maintainable application.

Dependency injection is a key concept in AngularJS, which allows you to create reusable and testable components by separating the concerns of object creation and object usage.

In AngularJS, you can use dependency injection by defining a component (such as a controller or a service) as a function that takes one or more dependencies as arguments, and then passing those dependencies to the component using the built-in $injector service.

Here's an example of using dependency injection in an AngularJS controller:

angular.module('myApp').controller('MyController', function($scope, myService) {
  // Use $scope and myService here
});

In this example, we define a new controller called MyController using the controller method of the angular.module object. The controller function takes two arguments: $scope and myService, which are dependencies that the controller needs to function.

When the controller is created, AngularJS uses its built-in $injector service to automatically inject the required dependencies, based on their names and the function argument names.

You can also use an array notation to explicitly specify the dependencies for a component, like this:

angular.module('myApp').controller('MyController', ['$scope', 'myService', function($scope, myService) {
  // Use $scope and myService here
}]);

In this example, we define the same MyController controller as before, but use an array to specify its dependencies. The array contains the names of the dependencies as strings, followed by the function that defines the controller.

By using dependency injection in AngularJS, you can create more modular and testable code, improve code reuse and readability, and reduce the complexity of your application.

In AngularJS, $scope and $rootScope are both special objects that are used to manage the data and behavior of AngularJS applications. However, they have different scopes and lifecycles, and are used for different purposes.

$scope is a local object that is created for each controller or directive, and is used to bind data and behavior to a specific portion of the DOM. $scope is used to share data and behavior between the view (HTML) and the controller (JavaScript), and allows you to update the view in response to user interactions or changes to the data.

For example, here's how you could use $scope in a simple AngularJS controller:

angular.module('myApp').controller('MyController', function($scope) {
  $scope.name = 'John';
  $scope.greet = function() {
    alert('Hello, ' + $scope.name + '!');
  };
});

In this example, we define a new controller called MyController and use the $scope object to define two properties: name and greet. The name property is bound to an input field in the view, and the greet function is called when the user clicks a button.

$rootScope, on the other hand, is a global object that is created once when the AngularJS application starts up, and is used to share data and behavior across all controllers and directives in the application. $rootScope is useful for defining global data or behavior that needs to be accessed from multiple controllers or directives.

For example, here's how you could use $rootScope to define a global variable in an AngularJS application:

angular.module('myApp').run(function($rootScope) {
  $rootScope.companyName = 'Acme Corp';
});

In this example, we define a new run block that runs when the AngularJS application starts up, and use the $rootScope object to define a global variable called companyName. This variable can then be accessed from any controller or directive in the application.

In summary, $scope is used to manage data and behavior for a specific portion of the DOM, while $rootScope is used to share data and behavior across the entire application. Both objects are important parts of the AngularJS framework, and understanding their differences is key to building effective and maintainable AngularJS applications.

To create an AngularJS app that allows users to search for movies and display information such as ratings, cast, and synopsis, you can follow these steps:

1. Set up your project with AngularJS and any necessary dependencies such as Bootstrap and jQuery.

2. Create a search form where users can input a movie title to search for.

3. Use the $http service to make a request to a movie database API such as OMDB or TMDB with the search term.

4. Display the search results on the page in a visually appealing way using AngularJS directives such as ng-repeat and ng-if.

5. Allow users to click on a movie to view more information such as ratings, cast, and synopsis.

6. Use a modal or a separate page to display the movie information.

Here's an example of code that could be used in an AngularJS controller to make the API request and display the search results:

app.controller('MovieController', function($scope, $http) {
  $scope.movies = [];

  $scope.searchMovies = function() {
    $http.get('https://api.themoviedb.org/3/search/movie', {
      params: {
        query: $scope.searchTerm,
        api_key: 'YOUR_API_KEY'
      }
    }).then(function(response) {
      $scope.movies = response.data.results;
    });
  };
});

This code defines a MovieController that initializes an empty array called movies and defines a searchMovies function that makes a GET request to the TMDB API with the search term entered by the user. Once the response is received, the search results are assigned to the movies array, which is then used in the HTML to display the search results using ng-repeat.

Yes, in AngularJS, you can use the built-in $http service to make HTTP requests to a remote server. Here's an example of how to make a simple GET request:

angular.module('myApp').controller('MyController', function($scope, $http) {
  $http.get('/api/data').then(function(response) {
    $scope.data = response.data;
  });
});

In this example, we define a new controller called MyController and inject the $http service into it. We then call the $http.get method to make a GET request to the /api/data endpoint on the server. The then method is called when the request completes successfully, and the response data is assigned to the $scope.data property.

You can also use the $http service to make other types of HTTP requests, such as POST, PUT, DELETE, and so on. Here's an example of how to make a POST request with JSON data:

angular.module('myApp').controller('MyController', function($scope, $http) {
  var data = {
    name: 'John',
    email: 'john@example.com'
  };
  $http.post('/api/users', data).then(function(response) {
    $scope.user = response.data;
  });
});

In this example, we define a new JavaScript object called data that contains some user data. We then call the $http.post method to make a POST request to the /api/users endpoint on the server, and pass in the data object as the request body. The then method is called when the request completes successfully, and the response data (in this case, the newly created user object) is assigned to the $scope.user property.

Overall, the $http service is a powerful and flexible tool for making HTTP requests in AngularJS, and can be used to implement a wide range of functionality in web applications.

In AngularJS, you can use the built-in testing framework, called ngMock, to write unit tests for your application. The ngMock module provides a set of tools for mocking and testing AngularJS components, such as controllers, services, and directives.

Here's an example of how to write a simple unit test for an AngularJS controller:

describe('MyController', function() {
  beforeEach(module('myApp'));

  var $controller, $httpBackend, $scope;

  beforeEach(inject(function(_$controller_, _$httpBackend_, $rootScope) {
    $controller = _$controller_;
    $httpBackend = _$httpBackend_;
    $scope = $rootScope.$new();
  }));

  afterEach(function() {
    $httpBackend.verifyNoOutstandingExpectation();
    $httpBackend.verifyNoOutstandingRequest();
  });

  it('should get data from the server', function() {
    $httpBackend.expectGET('/api/data').respond(200, { data: 'hello world' });

    $controller('MyController', {
      $scope: $scope
    });

    $httpBackend.flush();

    expect($scope.data).toEqual('hello world');
  });
});

In this example, we define a new test suite called MyController, and use the beforeEach function to load the myApp module and inject the $controller, $httpBackend, and $rootScope services. We also define an afterEach function to verify that all expected HTTP requests have been made and that there are no outstanding expectations or requests.

The actual test case is defined using the it function, and checks that the controller is able to get data from the server. We use the $httpBackend.expectGET method to define an expectation that the controller will make a GET request to the /api/data endpoint on the server, and respond with a 200 status code and a JSON object containing some data. We then create a new instance of the controller using the $controller service, passing in the $scope object. Finally, we call the $httpBackend.flush method to simulate the response from the server and trigger the then method on the $http promise.

Once the response is received, we use the expect function to assert that the $scope.data property has been set to the expected value.

This is just a simple example of how to write a unit test in AngularJS, and there are many other testing tools and techniques that you can use to test different components of your application. The key thing to remember is that testing is an important part of developing robust and reliable software, and can help you catch bugs and prevent regressions before they make it into production.