web-dev-qa-db-ja.com

angular JSでのブートストラップの意味は？

私はAngular JSの初心者です。以下のリンクをたどっていました。 http://docs.angularjs.org/tutorial/step_

bootstrapファイルとは？ファイルはどこにありますか？

ブートストラップの自動起動と手動初期化とは何ですか？以下のように手動初期化の欠点を読みます。リンクから http://docs.angularjs.org/guide/bootstrap

誰もがここで不利な点を正確に説明できますか？

javascriptangularjsbootstrapping
58
sabari

上記の誰もが完全に答えていると私は探していたものを見つけたが、まだ実用的な例が欠落しているようだ。

以下のAngularJSの自動/手動ブートストラップについて理解している間、例は大いに役立ちます：

AngularJS：自動ブートストラップ：

Angularは、DOMContentLoadedイベントが発生するか、angle.jsスクリプトがブラウザーにダウンロードされ、document.readyStateがcompleteに設定されると、自動的に初期化/ブートストラップします。この時点で、AngularJSはng-appディレクティブを探します。 ng-appディレクティブが見つかると、Angularは次のようになります：

  1. ディレクティブに関連付けられているモジュールをロードします。

  2. アプリケーションインジェクターを作成します。

  3. Ng-appルート要素から始まるDOMをコンパイルします。

このプロセスは、自動ブートストラップと呼ばれます。

<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-手動ブートストラップ：

Angle.bootstrap（）関数を使用して、angular appを手動で初期化できます。この関数はモジュールをパラメーターとして受け取り、angular.element（document）.ready（）関数内で呼び出す必要があります。 angular.element（document）.ready（）関数は、DOMの操作準備が整ったときに起動されます。

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

注：

  1. アプリを手動でブートストラップするときは、ng-appディレクティブを使用しないでください。

  2. アプリをブートストラップする自動と手動の方法を混同しないでください。

  3. 上記の例で定義されているように、アプリを手動でブートストラップする前に、モジュール、コントローラー、サービスなどを定義します。

リファレンス：http://www.dotnettricks.com/books/angularjs/interview

28
Nikhil Maheshwari

ブートストラップは、Angular app。の初期化または開始に相当します。これを行うには、主に2つの方法があります。

最初の方法は、次のように_ng-app_をHTMLの要素に追加することにより、自動的にブートストラップすることです。

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

2つ目は、angular.module("myApp", []);を使用してアプリを作成した後、JavaScriptからbootstrapのようになります

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

Dave Swerskyの答えに追加します（そして私はAngularに新しいので、間違っている場合は私を修正してください）：

angularjs.org bootstrap tutorial から抜粋した次の画像。Daveが明示した内容を説明しています。

enter image description here

Ng-appディレクティブを持つ要素内のHTMLは、AngularJSによってコンパイルされます。例えば：

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

これとしてレンダリングされます：

{{ 1 + 2 }}

ただし、ng-appディレクティブの追加：

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

このようなレンダリング：

3

これは、ng-appがbodyタグを「ブートストラップ」し、コンテンツの「内部表現」を作成するようにAngularに指示したためです。もちろん、内部表現は3。チュートリアルから：

「ng-appディレクティブが見つかった場合、Angularはng-appディレクティブをコンパイルのルートとして扱うDOMをコンパイルします。これにより、 AngularアプリケーションとしてのDOM。 "

また、Angularはng-appディレクティブに関連付けられたモジュール（Angularチュートリアルの「モジュール」）をロードし、アプリケーションインジェクター（依存性注入に使用）を作成します。

21
Kevin

ng-appディレクティブは、ページのどの部分（全部または一部、あなた次第）がAngular application。Angular読み取りそのルート内のHTMLを内部表現にコンパイルします。この読み取りとコンパイルがブートストラッププロセスです。

手動ブートストラップは、ng-appディレクティブを使用する代わりに、ブートストラッププロセスを実行するコードを記述する場合です。

10
Dave Swersky

Angular JS Auto bootstrap process

AngularInit（）は最初のAngular jqLit​​e ready関数を介した自動ブートストラッピングのために呼び出されるapiです。

  1. ready（）がDOM readyで呼び出されました
  2. ready（）から呼び出されたangularInit（）
  3. Angular Initは、element.querySelectorAll（）を使用してDOMからng-app要素を抽出します。「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. 正規表現モジュールを使用して抽出されます。 module = "ngAppDemo"
  2. 最後にbootstrap（..）が呼び出され、グローバルインジェクターとルートスコープが作成され、angular app。
6
YRathod

Angular NgModules ページから：

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

最後に、@ NgModule.bootstrapプロパティは、このAppComponentをbootstrapコンポーネントとして識別します。Angular=はアプリを起動すると、AppComponentのHTMLレンダリングをDOMに配置します、index.htmlの要素タグ内。

main.tsでのブートストラップ

Main.tsファイルのAppModuleをブートストラップして、アプリケーションを起動します。

Angularは、複数のプラットフォームを対象としたさまざまなブートストラップオプションを提供します。このページでは、ブラウザをターゲットとする2つのオプションについて説明します。

1
usefulBee

In angular initialize/Bootstrapは2つの方法で行われます。

手動と自動をいつ、どこで使用するかを説明しましょうbootstrapを使用します。

手動ブートストラップ：

サーバー側のリクエストを使用してデータをロードするかテンプレートをバインドする必要があると仮定しますが、その操作が完了する前にangularアプリケーションが自動的に初期化される場合はどうなりますか？

結果の成功と失敗に応じて、アプリケーションを手動で初期化できませんか？はい、できます。したがって、上記の問題の解決策は

Worklight Serverを使用している例を考えてください。初期化する場合= bootstrap worklightサーバーが初期化された直後、ここでは手動ブートストラップを実行します。手動初期化は、angular = application bootstrap=そしてページをコンパイルします。

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

上記のコードは、worlightの初期化後にmain.jsファイルに書き込まれます。

自動ブートストラップ：

Angularは、DOMContentLoadedのとき、または、angular.jsスクリプトがブラウザーにダウンロードされると、自動的に初期化/ブートストラップします。次に、ng-appを探します。見つかると、そのng-appディレクティブに関連付けられたモジュールをロードします。

0
praveen11017kumar