CODEWITHSUNDEEP
javascriptangularjsbootstrapping
sabari
sabari

Reputation: 2625

What is meant by Bootstrapping in angular JS?

I am a beginner in Angular JS. I was going through the below link. http://docs.angularjs.org/tutorial/step_00

What are the bootstrap files? Where are they located?

What is automatic booting and manual initialization of bootstrapping? I read the disadvantage of manual initialization as below.. from the link http://docs.angularjs.org/guide/bootstrap

Can anyone explain exactly what is the disadvantage here?

Upvotes: 63

Views: 61961

Answers (7)

Nikhil Maheshwari
Nikhil Maheshwari

Reputation: 2248

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

Upvotes: 32

praveen11017kumar
praveen11017kumar

Reputation: 1

In angular initialize/ Bootstrap is done in 2 ways.

Let me explain, when and where to use manual and auto bootstrap to use.

Manual bootstrap:

Suppose you have to load some data or have to bind some template using server side request, but what if angular application gets initialized automatically before that operation is completed?

Can’t we manually initialize our application depending upon the success and failure of result? Yes we can do that. So the solution to the above problem is

Consider an example, You are using a Worklight Server. You want to initialize/ bootstrap immediately after worklight server initialized, here you will be doing manual bootstrap. Manual initialization is useful when you want to perform certain actions before angular application bootstrap and compile a page.

angular.element(document).ready(function () 
  {
         angular.bootstrap(document, ['myApp']);
  });

The above code is written in main.js file after worlight initialized.

Auto Bootstrapping:

Angular initializes/bootstraps automatically upon DOMContentLoaded or when the angular.js script is downloaded to the browser.Then it will look for the ng-app. When it is found, it loads the modules associated with that ng-app directive.

Upvotes: 0

usefulBee
usefulBee

Reputation: 9692

From the Angular NgModules page:

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent }  from './app.component';

@NgModule({
  imports:      [ BrowserModule ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

Lastly, the @NgModule.bootstrap property identifies this AppComponent as the bootstrap component. When Angular launches the app, it places the HTML rendering of AppComponent in the DOM, inside the element tags of the index.html.

Bootstrapping in main.ts

You launch the application by bootstrapping the AppModule in the main.ts file.

Angular offers a variety of bootstrapping options targeting multiple platforms. This page describes two options, both targeting the browser.

Upvotes: 2

YRathod
YRathod

Reputation: 61

Angular JS Auto bootstrap process

AngularInit() is the first Angular api called for auto boot strapping via jqLite ready function.

  1. ready() called on DOM ready
  2. angularInit() called from ready()
  3. Angular Init extract ng-app element from DOM using element.querySelectorAll() one of the following format - 'ng:app', 'ng-app', 'x-ng-app', 'data-ng-app' Ex. 
  <body ng-app=ngAppDemo>
      <div ng-controller="ngAppDemoController" >
          I can add: {{a}} + {{b}} =  {{ a+b }}         </div>
  </body>

ng-app="ngAppDemo" will be extracted.
  1. Using regular expression module is extracted, ex. module = "ngAppDemo"
  2. finally bootstrap(..) getting called, which create global injector & rootscope and boot strap the angular app.

Upvotes: 6

knrz
knrz

Reputation: 1811

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']);

Upvotes: 53

Kevin
Kevin

Reputation: 1195

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.

enter image description here

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:

3

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).

Upvotes: 21

Dave Swersky
Dave Swersky

Reputation: 34810

The ng-app directive indicates which part of the page (all or part, up to you) is the root of the Angular application. Angular reads the HTML within that root and compiles it into an internal representation. This reading and compiling is the bootstrapping process.

Manual bootstrapping is when you write code to execute the bootstrapping process instead of using the ng-app directive.

Upvotes: 10

Related Questions