Skip to main content

AngularJS interview questions - Part 3

Q21. What is Angular Expression?
Ans: Angular expressions are JavaScript-like code snippets that are usually placed in bindings such as {{ expression }}. For example, these are valid expressions in Angular:
  • {{ 3+4 }}
  • {{ a+b }}
  • {{ user.name }}
  • {{ items[index] }}

Q22. How Angular expressions are different from JavaScript expressions?
Ans: Angular expressions are like JavaScript expressions but there are few differences.



  •  Context : In Angular, the expressions are evaluated against a scope object, while the JavaScript expressions are evaluated against the global window object.
  • Forgiving: In Angular expression evaluation is forgiving to null and undefined, while in JavaScript undefined properties generates TypeError or ReferenceError.
  • No Control Flow Statements: Loops, conditionals or exceptions cannot be used in an Angular expression.
  • No Comma And Void Operators: You cannot use , (comma) or void in an Angular expression. And You cannot create regular expressions in an Angular expression.


  • Q23. What is compilation process in Angular?
    Ans: Once you have the markup, the AngularJS needs to attach the functionality. This process is called "compilation" in Angular. Compiling includes rendering of markup, replacing directives, attaching events to directives and creating a scope. The AngularJS has compiler service which traverses the DOM looking for attributes. The compilation process happens in two phases.
    • Compilation : traverse the DOM and collect all of the directives and creation of the linking function. 
    • Linking: combine the directives with a scope and produce a live view. The linking function allows for the attaching of events and handling of scope. Any changes in the scope model are reflected in the view, and any user interactions with the view are reflected in the scope model.

    When you create a new directive, you can write compile and/or linking functions for it to attach your custom behavior.
    To understand the compilation process of Angular, must read "The nitty-gritty of compile and link functions inside AngularJS directives".

    Q24. What is scope in AngularJS?
    Ans: A scope is an object that ties a view (a DOM element) to the controller. In the MVC framework, scope object is your model. In other words, it is just a JavaScript object, which is used for communication between controller and view.

    Q25. What is $rootscope in AngularJS?
    Ans: The $rootScope is the top-most scope. An app can have only one $rootScope which will be shared among all the components of an app. Hence it acts like a global variable. All other $scopes are children of the $rootScope. Since $rootScope is a global, which means that anything you add here, automatically becomes available in $scope in all controller. To add something in $rootScope, you need to use app.run function which ensures that it will run prior to the rest of the app. You may say that "run" function is like "main" method of angular app.

    app.run(function($rootScope) {
      $rootScope.name = "AngularJS";
    });


    And then you can use in your view. (via expression)
     

    <body ng-app="myApp">
       <h1>Hello {{ name }}!</h1>
    </body>


     
    Q26. What are controllers in AngularJS?
    Ans: In Angular, a Controller is a JavaScript constructor function. When a Controller is attached to the DOM via the ng-controller directive, Angular will instantiate a new Controller object, using the specified Controller's constructor function. The job of a controller is to pass data from the model, to the view or the view can asks for something from the controller, and the controller turns to the model and takes that thing, and hands it back to the view.

    var myApp = angular.module('myApp', []);
    myApp.controller('MyController', ['$scope', function($scope) {
        $scope.website = 'jquerybyexample.net';
      }
    ]);

    And then in your HTML using ng-controller directive,
     

    <div ng-controller="MyController">
      <h1>My website address is {{ website }}!</h1>
    </div>


     
    Q27. What is the difference between $scope and scope in AngularJS?
    Ans: $scope is used while defining a controller (see previous question) where scope is used while creating a link function for custom directive. The common part is that they both refers to scope object in AngularJS, but the difference is that $scope uses dependency injection where scope doesn't. When the arguments are passed-in via dependency injection, their position doesn't matter. So for example, a controller defined as ($scope as first parameter)
    1myApp.controller('MyController', ['$scope', function($scope, $http) {
    OR ($scope is second parameter)
    1myApp.controller('MyController', ['$scope', function($http, $scope) {
    In both the case, the postion of $scope doesn't matter to AngularJS. Because AngularJS uses the argument name to get something out of the dependency-injection container and later use it.
    But in case of link function, the position of scope does matter because it doesn't uses DI. The very first parameter has to be scope and that's what AngularJS expects.
    1app.directive("myDirective", function() {
    2  return {
    3    scope: {};
    4    link: function(scope, element, attrs) {
    5      // code goes here.
    6    }
    7  };
    8});
    However you can name it anything of your choice. In below code, foo is your scope object.
    1link: function(foo, bar, baz) {
    2  // code goes here.
    3}
     
    Q28. What is MVC Architecture in AngularJS?
    Ans: In AngularJS, scope objects are treated as Model. The View is display of model that is your data. And the model gets initialized within a JavaScript constructor function, called Controller in AngularJS. Let take a look at below code to understand it better.
    01<!DOCTYPE html>
    02<html>
    03
    04<head>
    05  <script data-require="angular.js@*" data-semver="1.3.6" src="https://code.angularjs.org/1.3.6/angular.js"></script>
    06  <link rel="stylesheet" href="style.css" />
    07  <script>
    08    var myApp = angular.module('myApp', []);
    09    myApp.controller('MyController', ['$scope',
    10      function($scope) {
    11        $scope.website = 'jquerybyexample.net';
    12      }
    13    ]);
    14  </script>
    15</head>
    16
    17<body ng-app="myApp">
    18  <div ng-controller="MyController">
    19    <h1>My website address is {{ website }}</h1>;
    20  </div>
    21</body>
    22</html>
    Here MyController is a Controller and $scope (Model) is populated within Controller. And later on in div element $scope object data is displayed (View).

    Q29. Can we have nested controllers in AngularJS?
    Ans: YES. We can create nested controllers in AngularJS. Nested controller are defined in hierarchical manner while using in View. Take a look at below code. Here the hierarchy is "MainCtrl -> SubCtrl -> SubCtrl1".
    01<div ng-controller="MainCtrl">
    02  <p>{{message}} {{name}}!</p>
    03
    04  <div ng-controller="SubCtrl">
    05    <p>Hello {{name}}!</p>
    06
    07    <div ng-controller="SubCtrl2">
    08      <p>{{message}} {{name}}! Your username is  {{username}}.</p>
    09    </div>
    10  </div>
    11</div>
    Q30. In case of nested controllers, does the $scope object shared across all controllers?
    Ans: YES. The $scope object is shared across all controllers and it happens due to scope inheritance. Since the ng-controller directive creates a new child scope, we get a hierarchy of scopes that inherit from each other. So if we define a property on a parent scope, the child scope can manipulate the property. And if the property is not present in child scope, then parent scope property's value is used. Lets consider, the previous question HTML where there are 3 controllers. And here is the AngularJS code to define these controllers.

    01
    var myApp = angular.module('myApp', []);
    02myApp.controller('MainCtrl', ['$scope',
    03  function($scope) {
    04    $scope.message = 'Welcome';
    05    $scope.name = 'Jon';
    06  }
    07]);
    08myApp.controller('SubCtrl', ['$scope',
    09  function($scope) {
    10    $scope.name = 'Adams';
    11  }
    12]);
    13myApp.controller('SubCtrl2', ['$scope',
    14  function($scope) {
    15    $scope.name = 'Ema';
    16    $scope.username = 'ema123';
    17  }
    18]);

    You will see that the controller "SubCtrl2" doesn't have "message" property define but it is used in HTML. So in this case, the immediate parent scope property will be used. But immediate parent scope which is "SubCtrl" in this case, also doesn't have "message" property. So it again goes one level up and finds the property is present so it uses parent scope value for "message" property and displays it.

    That completes Part-3 as well. If you have not read Part 1 and Part 2 then do read and keep visiting for upcoming set of interview questions and answers.

    Comments

    Popular posts from this blog

    How to create a Barcode Using PHP Barcode 128 Generator

    A barcode is an optical, machine-readable, representation of data, the data usually describes something about the object that carries the barcode.We will use PHP to generate Barcode in this tutorial. In this script, we are using coding which will generate barcodes in barcode format Code 128 . First, we will create index.php which will ask for the user input for which Barcode has to be created PHP Barcode Generator <fieldset><legend>Detail Informations</legend><form action="createbarcode.php" method="post"><b>Enter Your Code </b><input name="barcode" type="text" /><input type="submit" value="Create Barcode" /></form></fieldset> Now we will create createbarcode.php which will call function from Barcode code128 class for creating barcode <? php include('barcode128.php'); // include php barcode 128 class // design our barcode display echo

    Document Expired or Webpage has expired on back button

    If you have a dinamic website and want to allow your visitors to use the back button after they sent a form with the post method, the best combination I found was: <?php header("Expires: Sat, 01 Jan 2000 00:00:00 GMT"); header("Last-Modified: ".gmdate("D, d M Y H:i:s")." GMT"); header("Cache-Control: post-check=0, pre-check=0",false); session_cache_limiter("must-revalidate"); // and after you start the sessionsession_start(); ?> I try some combinations using header("Cache-Control: no-cache, must-revalidate"), but when clicking the back button, the last changes in the form back to their previous states. The combination above works fine with IE 6.x. I didn't test this with other browsers. When I try something like session_cache_limiter("nocache, must-revalidate") it doesn't work. The page only updates when I used the browser's refresh button. In dynamic web sites this is not g

    How to Enable IMAP PHP in xampp

    The imap extension comes as standard with the PHP installation. You just need to enable it in your php.ini   Enable IMAP in XAMPP: You need to configure your php.ini file to enable IMAP extension Search for the line ;extension=php_imap.dll and remove semicolon(;) and restart your xampp. The line should look like as mentioned below. extension=php_imap.dll Note : New php version does not have dll anymore. The default php.ini should already contain a line to load the extension but commented out: ;extension=imap Remove semicolon from above like below extension=imap Enable IMAP in Linux: If you are using LAMP server, First install IMAP using the command on terminal $ sudo apt-get install php5-imap To enable IMAP, run the following command. sudo phpenmod imap Restart apache server with below command sudo service apache2 restart