1. Question:What are Expressions in AngularJS? 

    Answer
    AngularJS expressions are much like JavaScript expressions, placed inside HTML templates by using double braces such as: {{expression}}. AngularJS evaluates expressions and then dynamically adds the result to a web page. Like JavaScript expressions, they can contain literals, operators, and variables.
    
    There are some valid AngularJS expressions:
    - {{ 1 + 2 }}
    - {{ x + y }}
    - {{ x == y }}
    - {{ x = 2 }}
    - {{ user.Id }}

    1. Report
  2. Question:How AngularJS expressions are different from the JavaScript expressions? 

    Answer
    AngularJS expressions are much like JavaScript expressions but they are different from JavaScript expressions in the following ways:
    1. Angular expressions can be added inside the HTML templates.
    2. Angular expressions doesn't support control flow statements (conditionals, loops, or exceptions).
    3. Angular expressions support filters to format data before displaying it.

    1. Report
  3. Question:What are Directives in AngularJS? 

    Answer
    AngularJS directives are a combination of AngularJS template markups (HTML attributes or elements, or CSS classes) and supporting JavaScript code. The JavaScript directive code defines the template data and behaviors of the HTML elements.
    
    AngularJS directives are used to extend the HTML vocabulary i.e. they decorate html elements with new behaviors and help to manipulate html elements attributes in interesting way.
    
    There are some built-in directives provided by AngularJS like as ng-app, ng-controller, ng-repeat, ng-model etc.

    1. Report
  4. Question:What is the role of ng-app, ng-init and ng-model directives? 

    Answer
    The main role of these directives is explained as: 
    - ng-app - Initialize the angular app. 
    - ng-init - Initialize the angular app data. 
    - ng-model - Bind the html elements like input, select, text area to angular app model.

    1. Report
  5. Question:How to create custom directives in AngularJS? 

    Answer
    You can create your own custom directive by using following syntax:
    var app = angular.module('app', []); 
    //creating custom directive syntax app.directive("myDir", function () { return {  restrict: "E", 
    //define directive type like E = element, A = attribute, C = class, M = comment  scope: { //create a new child scope or an isolate scope 
     title: '@' //@ reads the attribute value,//= provides two-way binding, //& works with functions
     },template: "<div>{{ myName }}</div>",// define HTML markup 
       templateUrl: 'mytemplate.html', //path to the template, used by the directive    replace: true |   false, // replace original markup with template yes/no 
       transclude: true | false, // copy original HTML content yes/no 
       controller: function (scope) { //define controller, associated with the directive template //TODO: }, 
     link: function (scope, element, attrs, controller) {//define function, used for DOM manipulation //TODO: 
        } 
       } 
    });

    1. Report
  6. Question:What are different ways to invoke a directive? 

    Answer
    As an attribute
    <span my-directive></span>
    
    As a class
    <span class="my-directive: expression;"></span>
    
    As an element
    <my-directive></my-directive>
    
    As a comment
    <!-- directive: my-directive expression -->

    1. Report
  7. Question:What is restrict option in directive? 

    Answer
    The restrict option in angular directive, is used to specify how a directive will be invoked in your angular app i.e. as an attribute, class, element or comment.
    There are four valid options for restrict:
    
    'A' (Attribute)- <span my-directive></span> 
    'C' (Class)- <span class="my-directive:expression;"></span> 
    'E' (Element)- <my-directive></my-directive> 
    'M' (Comment)- <!-- directive: my-directive expression -->

    1. Report
  8. Question:Can you define multiple restrict options on a directive? 

    Answer
    You can also specify multiple restrict options to support more than one methods of directive invocation as an element or an attribute. Make sure all are specified in the restrict keyword as:
    restrict: 'EA'

    1. Report
  9. Question:What is auto bootstrap process in AngularJS? OR How AngularJS is initialized automatically? 

    Answer
    Angular initializes automatically upon DOMContentLoaded event or when the angular.js script is downloaded to the browser and the document.readyState is set to complete. At this point AngularJS looks for the ng-app directive which is the root of angular app compilation and tells about AngularJS part within DOM. When the ng-app directive is found then Angular will:
    1. Load the module associated with the directive.
    2. Create the application injector.
    3. Compile the DOM starting from the ng-app root element.
    
    This process is called auto-bootstrapping.
    
    Example 
    <html> 
     <body ng-app="myApp"> 
       <div ng-controller="Ctrl"> Hello {{msg}}! </div> 
    
      <script src="lib/angular.js"></script> 
     <script> 
       var app = angular.module('myApp', []); 
       app.controller('Ctrl', function ($scope) { $scope.msg = 'World'; }); 
     </script> 
    /body> 
    </html>

    1. Report
  10. Question:What is scope in AngularJS? 

    Answer
    Scope is a JavaScript object that refers to the application model. It acts as a context for evaluating angular expressions. Basically, it acts as glue between controller and view.
    
    Controller<------> $Scope <------> View
    
    Scopes are hierarchical in nature and follow the DOM structure of your AngularJS app. AngularJS has two scope objects: $rootScope and $scope.

    1. Report
Copyright © 2024. Powered by Intellect Software Ltd