Angular JS Interview Questions and Answers

What You Should Already Know

Before you study AngularJS, you should have a basic understanding of:

    1. HTML
    2. CSS
    3. JavaScript

Q: What is AngularJS ?
Ans: AngularJS is a JavaScript framework. It can be added to an HTML page with a <script> tag.
         1. AngularJS extends HTML attributes with Directives, and binds data to HTML with Expressions.
         2. AngularJS is a JavaScript framework. It is a library written in JavaScript.
         3. AngularJS is distributed as a JavaScript file, and can be added to a web page with a script tag:
    
     <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>

Q: How AngularJS Extends HTML ?
Ans: AngularJS extends HTML with ng-directives.

Q: What is AngularJS Directives ?
Ans: AngularJS directives are HTML attributes with an ng prefix.

Q: Explain what are the key features of Angular.js ?
Ans: The key features of angular.js are

    1. Scope
    2. Controller
    3. Model
    4. View
    5. Services
    6. Data Binding
    7. Directives
    8. Filters
    9. Testable

Q: Explain what is scope in Angular.js ?
Ans: Scope refers to the application model, it acts like glue between application controller and the view.
     Scopes are arranged in hierarchical structure and impersonate the DOM ( Document Object Model) structure of the application.
     It can watch expressions and propagate events.

Q: Explain what is services in Angular.js ?
Ans: In angular.js services are the singleton objects or functions that are used for carrying out specific tasks.
     It holds some business logic and these function can be called as controllers, directive, filters and so on.

Q: What is ng-app ?
Ans: 1. The ng-app directive defines an AngularJS application.
     2. The ng-app directive defines the root element of an AngularJS application.
     3. The ng-app directive will auto-bootstrap (automatically initialize) the application when a web page is loaded.

Q: What is ng-model ?
Ans: The ng-model directive binds the value of HTML controls (input, select, textarea) to application data.
     The ng-model directive can also:
        1. Provide type validation for application data (number, email, required).
        2. Provide status for application data (invalid, dirty, touched, error).
        3. Provide CSS classes for HTML elements.
        4. Bind HTML elements to HTML forms.


Q: What is ng-bind ?
Ans: The ng-bind directive binds application data to the HTML view.

Q: What is ng-init ?
Ans: 1. The ng-init directive initialize AngularJS application variables.
     2. The ng-init directive defines initial values for an AngularJS application.

    Note: You can use data-ng-, instead of ng-, if you want to make your page HTML5 valid.

Q: What is ng-disabled ?
Ans: The ng-disabled directive binds AngularJS application data to the disabled attribute of HTML elements.

    Example:
        <div ng-app="">
       
            <p>
                <button ng-disabled="mySwitch">Click Me!</button>
            </p>
           
            <p>
                <input type="checkbox" ng-model="mySwitch">Button
            </p>
       
        </div>

    Application explained:

        1. The ng-disabled directive binds the application data mySwitch to the HTML button's disabled attribute.   
        2. The ng-model directive binds the value of the HTML checkbox element to the value of mySwitch.
   
        If the value of mySwitch evaluates to true, the button will be disabled:
            <p>
                <button disabled>Click Me!</button>
            </p>
   
        If the value of mySwitch evaluates to false, the button will not be disabled:
            <p>
                <button>Click Me!</button>
            </p>

Q: What is ng-show ?
Ans: The ng-show directive shows or hides an HTML element.

    Example:
        <div ng-app="">
       
            <p ng-show="true">I am visible.</p>
           
            <p ng-show="false">I am not visible.</p>
       
        </div>
   
    The ng-show directive shows (or hides) an HTML element based on the value of ng-show.
    You can use any expression that evaluates to true or false:
   
    Example:
        <div ng-app="">
       
            <p ng-show="hour > 12">I am visible.</p>
       
        </div>
Q. What is ng-hide ?
Ans: The ng-hide directive hides or shows an HTML element.

    Example:
        <div ng-app="">
       
            <p ng-hide="true">I am not visible.</p>
           
            <p ng-hide="false">I am visible.</p>
       
        </div>
       
Q: what is ng-click ?
Ans: The ng-click directive defines an AngularJS click event.

    Example:
        <div ng-app="" ng-controller="myController">
       
            <button ng-click="count = count + 1">Click me!</button>
           
            <p>{{ count }}</p>
       
        </div>

Q: What is AngularJS Expressions ?
Ans: 1. AngularJS expressions are written inside double braces: {{ expression }}.
     2. AngularJS expressions bind data to HTML the same way as the ng-bind directive.
     3. AngularJS will "output" data exactly where the expression is written.

Q: How to Repeat HTML Elements ?
Ans: 1. The ng-repeat directive repeats an HTML element.
     2. The ng-repeat directive clones HTML elements once for each item in a collection (in an array).

    Example:
        <div ng-app="" ng-init="names=['Jani','Hege','Kai']">
          <ul>
            <li ng-repeat="x in names">
              {{ x }}
            </li>
          </ul>
        </div>

Q: What is controllers ?
Ans: 1. AngularJS applications are controlled by controllers.
     2. The ng-controller directive defines the application controller.
     3. A controller is a JavaScript Object, created by a standard JavaScript object constructor.
    
    Example:
        <div ng-app="" ng-controller="personController">
       
            First Name: <input type="text" ng-model="firstName"><br>
            Last Name: <input type="text" ng-model="lastName"><br>
            <br>
            Full Name: {{firstName + " " + lastName}}
       
        </div>
       
        <script>
        function personController($scope) {
            $scope.firstName="John",
            $scope.lastName="Doe"
        }
        </script>

Q: Write an Example for Controller Methods.
Ans: 
        <div ng-app="" ng-controller="personController">
       
            First Name: <input type="text" ng-model="firstName"><br>
            Last Name: <input type="text" ng-model="lastName"><br>
            <br>
            Full Name: {{fullName()}}
       
        </div>
       
        <script>
        function personController($scope) {
            $scope.firstName = "John",
            $scope.lastName = "Doe",
            $scope.fullName = function() {
                return $scope.firstName + " " + $scope.lastName;
            }
        }
        </script>
       
Q: What is AngularJS Filters? Explain each of them with example.
Ans: AngularJS filters can be used to transform data:
            
        1. currency => Format a number to a currency format.
        2. filter => Select a subset of items from an array.
        3. lowercase => Format a string to lower case.
        3. orderBy => Orders an array by an expression.
        4. uppercase => Format a string to upper case.
   
    A filter can be added to an expression with a pipe character (|) and a filter.
    The uppercase filter format strings to upper case:
   
    Example:
        <div ng-app="" ng-controller="personController">

           <p>The name is {{ lastName | uppercase }}</p>
           <p>The name is {{ lastName | lowercase }}</p>
       
        </div>
       
    The currency Filter:
        <div ng-app="" ng-controller="costController">
            <input type="number" ng-model="quantity">
            <input type="number" ng-model="price">
                       
            <p>Total = {{ (quantity * price) | currency }}</p>       
        </div>
   
    Adding Filters to Directives:
        <div ng-app="" ng-controller="namesController">
       
            <ul>
                <li ng-repeat="x in names | orderBy:'country'">
                    {{ x.name + ', ' + x.country }}
                </li>
            </ul>
       
        <div>

    Filtering Input:
        An input filter can be added to a directive with a pipe character (|) and filter followed by a colon and a model name.
        The filter filter selects a subset of an array:
       
        <div ng-app="" ng-controller="namesController">
       
            <p><input type="text" ng-model="test"></p>
           
            <ul>
                <li ng-repeat="x in names | filter:test | orderBy:'country'">
                    {{ (x.name | uppercase) + ', ' + x.country }}
                </li>
            </ul>
       
        </div>

Q: What is AngularJS $http and how it works ?
Ans: AngularJS $http is a core service for reading data from web servers.
     $http.get(url) is the function to use for reading server data.
    
     Example:
        <div ng-app="" ng-controller="customersController">
       
            <ul>
              <li ng-repeat="x in names">
                {{ x.Name + ', ' + x.Country }}
              </li>
            </ul>
       
        </div>
       
        <script>
        function customersController($scope,$http) {
            $http.get("http://www.w3schools.com/website/Customers_JSON.php")
            .success(function(response) {
                $scope.names = response;
            });
        }
        </script> 

Q: How to Displaying tables with AngularJS ?
Ans: Displaying tables with angular is very simple:

    Example:
        <div ng-app="" ng-controller="customersController">
       
        <table>
          <tr ng-repeat="x in names">
            <td>{{ x.Name }}</td>
            <td>{{ x.Country }}</td>
          </tr>
        </table>
       
        </div>
       
        <script>
        function customersController($scope,$http) {
          $http.get("http://www.w3schools.com/website/Customers_JSON.php")
          .success(function(response) {
            $scope.names = response;
          });
        }
        </script>
       
Q: How to Fetch Data From a PHP Server Running MySQL ?
Ans:
    Example:
        <div ng-app="" ng-controller="customersController">
       
        <table>
          <tr ng-repeat="x in names">
            <td>{{ x.Name }}</td>
            <td>{{ x.Country }}</td>
          </tr>
        </table>
       
        </div>
       
        <script>
        function customersController($scope,$http) {
            $http.get("http://www.w3schools.com/website/customers_mysql.php")
            .success(function(response) {
                $scope.names = response;
            });
        }
        </script>

Q: What is Cross-Site HTTP Requests ?
Ans: 1. Requests for data from a different server (than the requesting page), are called cross-site HTTP requests.
     2. Cross-site requests are common on the web. Many pages load CSS, images, and scripts from different servers.
     3. In modern browsers, cross-site HTTP requests from scripts are restricted to same site for security reasons.
    
    The following line, in our PHP examples, has been added to allow cross-site access.
        header("Access-Control-Allow-Origin: *");
   
    Server Code PHP and MySQL:   
    <?php
        header("Access-Control-Allow-Origin: *");
        header("Content-Type: application/json; charset=UTF-8");
       
        $conn = new mysqli("myServer", "myUser", "myPassword", "myDatabse");
       
        $result = $conn->query("SELECT CompanyName, City, Country FROM Customers");
       
        $outp = "[";
        while($rs = $result->fetch_array(MYSQLI_ASSOC)) {
            if ($outp != "[") {$outp .= ",";}
            $outp .= '{"Name":"'  . $rs["CompanyName"] . '",';
            $outp .= '"City":"'   . $rs["City"]        . '",';
            $outp .= '"Country":"'. $rs["Country"]     . '"}';
        }
        $outp .="]";
       
        $conn->close();
       
        echo($outp);
    ?>

Q: What is use of AngularJS Modules and how it works ?
Ans: Global values should be avoided in applications. They can easily be overwritten or destroyed by other scripts.
     AngularJS modules can solve (or reduce) this problem.
    
     Example:
        <!DOCTYPE html>
        <html>
       
            <head>
                <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
            </head>
           
            <body>
           
                <div ng-app="myApp" ng-controller="myCtrl">
                    {{ firstName + " " + lastName }}
                </div>
               
                <script>
                var app = angular.module("myApp", []);
               
                app.controller("myCtrl", function($scope) {
                    $scope.firstName = "John";
                    $scope.lastName = "Doe";
                });
                </script>
           
            </body>
        </html>
       
        The application has a name (ng-app="myApp"), and the controller is a property of the module.