web-dev-qa-db-fra.com

Qu'entend-on par amorçage dans angular JS?

Je suis un débutant en Angular JS. Je passais par le lien ci-dessous. http://docs.angularjs.org/tutorial/step_

Quels sont les fichiers bootstrap? Où sont-ils situés?

Qu'est-ce que le démarrage automatique et l'initialisation manuelle du démarrage? Je lis l'inconvénient de l'initialisation manuelle comme ci-dessous .. à partir du lien http://docs.angularjs.org/guide/bootstrap

Quelqu'un peut-il expliquer exactement quel est le désavantage ici?

javascriptangularjsbootstrapping
58
sabari

Tout le monde ci-dessus a parfaitement répondu et j'ai trouvé ce que je cherchais, mais il me manque encore un exemple concret.

Bien que comprendre le démarrage automatique/manuel dans AngularJS ci-dessous, des exemples peuvent beaucoup aider:

AngularJS: Amorçage automatique:

Angular initialise/bootstraps automatiquement sur l'événement DOMContentLoaded ou lorsque le script angular.js est téléchargé sur le navigateur et que le document.readyState est défini pour se terminer. À ce stade, AngularJS recherche la directive ng-app. Lorsque la directive ng-app est trouvée, alors Angular:

  1. Chargez le module associé à la directive.

  2. Créez l'injecteur d'application.

  3. Compilez le DOM à partir de l'élément racine ng-app.

Ce processus s'appelle 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 - Bootstrapping manuel:

Vous pouvez initialiser manuellement votre application angular en utilisant la fonction angular.bootstrap (). Cette fonction prend les modules en tant que paramètres et doit être appelée dans la fonction angular.element (document) .ready (). La fonction angular.element (document) .ready () est déclenchée lorsque le DOM est prêt à être manipulé.

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

Remarque:

  1. Vous ne devez pas utiliser la directive ng-app lorsque vous démarrez manuellement votre application.

  2. Vous ne devez pas confondre les méthodes automatique et manuelle d’amorçage de votre application.

  3. Définissez les modules, le contrôleur, les services, etc. avant d’amorcer manuellement votre application, comme défini dans les exemples ci-dessus.

Référence: http://www.dotnettricks.com/books/angularjs/interview

28
Nikhil Maheshwari

L’amorçage est l’équivalent de l’initialisation ou du démarrage de votre Angular). Il existe deux méthodes principales pour le faire.

La première est de démarrer automatiquement en ajoutant ng-app À un élément de votre code HTML, comme suit:

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

La seconde serait de bootstrap à partir du JavaScript, comme tel, après avoir créé votre application via angular.module("myApp", []);

angular.bootstrap(document, ['myApp']);
53
knrz

Ajoutant à la réponse de Dave Swersky (et je suis nouveau à Angular alors corrigez-moi si je me trompe):

L'image suivante, tirée du angularjs.org bootstrap) . Explique ce que Dave a articulé.

enter image description here

Le code HTML, à l'intérieur de l'élément avec la directive ng-app, est compilé par AngularJS. Par exemple:

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

Rendrait comme ceci:

{{ 1 + 2 }}

Cependant, en ajoutant la directive ng-app:

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

Renders comme ceci:

3

En effet, le ng-app a "amorcé" la balise body et dit à Angular de créer une "représentation interne" du contenu. La représentation interne est, bien sûr, 3. Du tutoriel:

"Si la directive ng-app est trouvée, alors Angular compilera le DOM qui traite la directive ng-app en tant que racine de la compilation. Cela vous permet de lui indiquer de ne traiter qu'une partie de la DOM en tant qu'application Angular. "

Angular charge également le module associé à la directive ng-app ("module" dans le tutoriel Angular)) et crée un injecteur d'application (utilisé pour l'injection de dépendance).

21
Kevin

La directive ng-app Indique quelle partie de la page (tout ou partie jusqu’à vous) correspond à la racine de Angular angulaire. Angular angulaire) lit le code HTML au sein de cette racine et le compile dans une représentation interne, qui est le processus d’amorçage.

L'amorçage manuel consiste à écrire du code pour exécuter le processus d'amorçage au lieu d'utiliser la directive ng-app.

10
Dave Swersky

Angular JS Auto bootstrap

AngularInit () est le premier Angular appelé pour un cerclage au démarrage automatique via la fonction jqLite ready.

  1. ready () appelé sur DOM ready
  2. angularInit () appelé depuis ready ()
  3. Angular Init extrait un élément ng-app du DOM en utilisant element.querySelectorAll () l’un des formats suivants: "ng: app", "ng-app", "x-ng-app", "data-ng-app".
  <body ng-app=ngAppDemo>
      <div ng-controller="ngAppDemoController" >
          I can add: {{a}} + {{b}} =  {{ a+b }}         </div>
  </body>

ng-app="ngAppDemo" will be extracted.
  1. Utilisation du module d'expression régulière est extraite, ex. module = "ngAppDemo"
  2. enfin, bootstrap (..) est appelé, ce qui crée un injecteur global, un rootscope et une sangle d’amorçage angular app.
6
YRathod

De la 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 { }

Enfin, la propriété @ NgModule.bootstrap identifie cet AppComponent en tant que composant bootstrap. Lorsque Angular lance l'application, il place le rendu HTML de AppComponent dans le DOM , à l’intérieur des balises d’élément du fichier index.html.

Bootstrapping dans main.ts

Vous lancez l'application en amorçant l'AppModule dans le fichier main.ts.

Angular propose diverses options d’amorçage visant plusieurs plates-formes. Cette page décrit deux options, les deux ciblant le navigateur.

1
usefulBee

Dans angular initialize/Bootstrap se fait de 2 façons.

Laissez-moi vous expliquer, quand et où utiliser manuel et auto bootstrap à utiliser).

Bootstrap manuel:

Supposons que vous deviez charger certaines données ou lier un modèle à l'aide d'une requête côté serveur, mais que se passerait-il si angular) était automatiquement initialisée avant la fin de l'opération?

Ne pouvons-nous pas initialiser manuellement notre application en fonction du succès ou de l’échec du résultat? Oui, nous pouvons le faire. Donc, la solution au problème ci-dessus est

Prenons un exemple, vous utilisez un serveur Worklight. Vous voulez initialiser/bootstrap immédiatement après l’initialisation du serveur de worklight). Ici, vous ferez un amorçage manuel. L’initialisation manuelle est utile lorsque vous souhaitez effectuer certaines actions avant angular = application bootstrap et compilez une page.

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

Le code ci-dessus est écrit dans le fichier main.js après l’initialisation de worlight.

Auto Bootstrapping:

Angular initialise/bootstraps automatiquement sur DOMContentLoaded ou lorsque le script angular.js est téléchargé sur le navigateur. Il recherchera ensuite ng-app. Quand il est trouvé, il charge les modules associés à cette directive ng-app.

0
praveen11017kumar