Best IT Recipes

What is meant by loading in angular JS?

I am new to Angular JS. I went through the link below. http://docs.angularjs.org/tutorial/step_00

What are bootstrap files? Where are they located?

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

Can anyone explain what the flaw is?

+57
javascript angularjs bootstrapping
Jan 11 '14 at 3:31
source share
7 answers

Despite the fact that Everyone above answered perfectly, and I found what I was looking for, but still the working example seems to be missing.

Although understanding the automatic / manual loading in AngularJS below examples can help a lot:

AngularJS: autoload:

Angular automatically initializes / bootstraps when the DOMContentLoaded event occurs or when angular.js script is loaded into the browser, and the installation of document.readyState completes. At this point, AngularJS is looking for the ng-app directive. When the ng-app directive is found, Angular will:

  • Download the module associated with the directive.

  • Create an application injector.

  • Compile the DOM starting from the root ng-app element.

This process is called startup.

<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 Download:

You can manually initialize an Angular application using the angular.bootstrap () function. This function accepts modules as parameters and should be called inside the angular.element (document) .ready () function. The angular.element (document) .ready () function is launched when the DOM is ready to be processed.

 <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:

  • You should not use the ng-app directive when manually downloading your application.

  • You should not mix the automatic and manual way to download your application.

  • Define modules, controller, services, etc., before manually loading your application, as defined in the examples above.

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

+28
Sep 06 '15 at 5:39 on
source share

Bootstrapping is the equivalent of initializing or starting your Angular application. There are 2 main ways to do this.

The first one is automatically loaded by adding ng-app to the element in your HTML, for example:

 <html ng-app="myApp"> ... </html>

Secondly, you will need to load with JavaScript, for example, after creating your application through angular.module("myApp", []);

 angular.bootstrap(document, ['myApp']);
+53
Jan 11 '14 at 3:36
source share

Adding to Dave Sversky's answer (and I'm new to Angular, so correct me if I'm wrong):

The following image is taken from angularjs.org's bootstrap tutorial . Explains what Dave formulated.

enter image description here

HTML, inside an element with the ng-app directive, is compiled by AngularJS. For example:

 <body> <div> {{ 1 + 2 }} </div> </body>

Note how it is:

 {{ 1 + 2 }}

However, adding the ng-app directive:

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

It is displayed as follows:

 3

This is because the ng application “loaded” the body tag and informed Angular that it was creating an “internal representation” of the content. Internal representation, of course, 3 . From the textbook:

"If the ng-app instruction is found, then Angular will compile the DOM by treating the ng-app directive as the compilation root. This allows you to tell about this only part of the DOM as an Angular application."

Angular also downloads the module associated with the ng-app directive (the "module" in the Angular tutorial) and creates an application injector (used to inject dependencies).

+21
Jun 07 '14 at 23:44
source share

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 inside this root and compiles it into an internal representation. This reading and compilation is a boot process.

Manual rebooting is when you write code to perform the boot process instead of using the ng-app directive.

+10
Jan 11 '14 at 3:37
source share

Angular JS Startup Process

AngularInit () is the first Angular api to be called for automatic loading using the jqLite ready function.

  • ready () called when the DOM is ready
  • angularInit () called from ready ()
  • Angular Init extract an ng-app element from the DOM using element.querySelectorAll () one of the following formats: 'ng: app', 'ng-app', 'x-ng-app', 'data-ng-application' 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 the regex module, ex. module = "ngAppDemo"
  2. finally a boot (..) call that creates a global injector and root crop and Angular boot belt.
+6
Aug 22 '14 at 19:56
source share

On 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 { }

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

Download to main.ts

You launch the application by loading the AppModule into the main.ts file.

Angular offers many boot options for multiple platforms. This page describes two options for the browser.

+1
Jul 11 '17 at 21:27
source share

In angular initialization / Bootstrap, this is done in two ways.

Let me explain when and where to use manual and automatic downloads.

Manual download:

Suppose you need to load some data or bind some template using a server-side request, but what if the corner application is automatically initialized before this operation is completed?

Can we manually initialize our application depending on the success and failure of the result? Yes, we can do it. Thus, the solution to the above problem

Consider an example: you are using a Worklight server. You want to initialize / bootstrap right after the initialization of the worklight server, here you will perform the manual download. Manual initialization is useful when you want to perform certain actions before launching a corner application and compiling a page.

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

The above code is written to main.js after worlight initialization.

Startup:

Angular initializes / loads automatically when DOMContentLoaded or when loading the angular.js script into the browser. Then he searches for the ng application. When it is found, it loads the modules associated with this ng-app directive.

0
May 24 '19 at 3:49
source share


More articles:


All Articles