Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd Logo
Upload

Welcome to Scribd!

  • 3 views

    3AngularJS - AdditionalReferences

    Uploaded by

    Velan Chandrasekar

    Copyright:

    © All Rights Reserved
    Download as ODT, PDF, TXT or read online from Scribd

    3AngularJS - AdditionalReferences

    Uploaded by

    Velan Chandrasekar
    3 views4 pages

    Copyright

    © © All Rights Reserved

    Available Formats

    ODT, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Copyright:

    © All Rights Reserved
    Download as ODT, PDF, TXT or read online from Scribd
    Download as odt, pdf, or txt
    3 views4 pages

    3AngularJS - AdditionalReferences

    Uploaded by

    Velan Chandrasekar

    Copyright:

    © All Rights Reserved
    Download as ODT, PDF, TXT or read online from Scribd
    Download as odt, pdf, or txt
    of 4

    Additional References:

    1. What is meant by Bootstrapping in angular JS?


    Source: https://stackoverflow.com/questions/21058213/what-is-meant-by-
    bootstrapping-in-angular-js

    Ans-1:

    Bootstrapping is the equivalent of initializing, or starting, your Angular app.


    There are 2 main ways to do so.

    The first is automatically bootstrapping by adding ng-app to the an element in


    your HTML, like so:
    <html ng-app="myApp">
    ...
    </html>

    The second would be to bootstrap from the JavaScript, like so, after having
    creating your app through angular.module("myApp", []);
    angular.bootstrap(document, ['myApp']);

    Ans-2:

    Though Everyone above has answered perfectly and I found what I was looking
    for but still a working example seem missing.

    While understanding about Auto / Manual bootstrapping in AngularJS below


    examples can help a lot :

    AngularJS : Auto Bootstrapping :

    Angular initializes / bootstraps 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. 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.

    <html>

    <body ng-app="myApp">
    <div ng-controller="Ctrl">Hello {{msg}}!</div>
    <script
    src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular
    .min.js"></script>
    <script>
    var app = angular.module('myApp', []);
    app.controller('Ctrl', function($scope) {
    $scope.msg = 'Nik';
    });
    </script>
    </body>

    </html>

    JSFiddle : http://jsfiddle.net/nikdtu/ohrjjqws/

    AngularJS - Manual Bootstrapping :

    You can manually initialized your angular app by using angular.bootstrap()


    function. This function takes the modules as parameters and should be called
    within angular.element(document).ready() function. The
    angular.element(document).ready() function is fired when the DOM is ready for
    manipulation.
    <html>

    <body>
    <div ng-controller="Ctrl">Hello {{msg}}!</div>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
    <script>
    var app = angular.module('myApp', []);
    app.controller('Ctrl', function($scope) {
    $scope.msg = 'Nik';
    });
    //manual bootstrap process
    angular.element(document).ready(function () { angular.bootstrap(document,
    ['myApp']); });
    </script>
    </body>

    </html>
    JSFiddle : http://jsfiddle.net/nikdtu/umcq4wq7/

    Note :
    1. You should not use the ng-app directive when manually bootstrapping
    your app.
    2. You should not mix up the automatic and manual way of bootstrapping
    your app.
    3. Define modules, controller, services etc. before manually bootstrapping
    your app as defined in above examples.

    Reference : http://www.dotnettricks.com/books/angularjs/interview

    Ans-3:
    Adding to Dave Swersky's answer (and I'm new to Angular so correct me if I'm
    wrong):

    The following image, taken from the angularjs.org bootstrap tutorial. Explains
    what Dave articulated.

    The HTML, inside the element with the ng-app directive, is compiled by
    AngularJS. For example:
    <body>
    <div> {{ 1 + 2 }} </div>
    </body>

    Would render as this:


    {{ 1 + 2 }}

    However, adding the ng-app directive:


    <body ng-app="module">
    <div> {{ 1 + 2 }} </div>
    </body>

    Renders like this:

    This is because the ng-app "bootstrapped" the body tag and told Angular to
    create an "internal representation" of the content. The internal representation
    is, of course, 3. From the tutorial:
    "If the ng-app directive is found then Angular will compile the DOM
    treating the ng-app directive as the root of the compilation. This
    allows you to tell it to treat only a portion of the DOM as an Angular
    application."

    Angular also loads the module associated with the ng-app directive ("module"
    in the Angular tutorial) and creates an application injector (used for
    dependency injection).

    You might also like