Angularjs Studyノートシリーズの最初の記事では、書くことができることを願っています。この記事の内容は、主にhttp://docs.angularjs.org/guide/ドキュメントの内容からのものですが、あなた自身の理解と試行結果の一部も追加されています。
1。概要
この記事では、角度初期化のプロセスと、必要なときに角度を手動で初期化する方法について説明します。
2。Angular<script>タグ
この例は、自動初期化を実現するために推奨されるパスを介してAngularを統合する方法を示すために使用されます。
<！doctype html> <html xmlns：ng = "http://angularjs.org" ng-app> <body> ... <スクリプトsrc = "angular.js"> </body> </html> </html>
SCIPRTタグをページの下部に配置します。これにより、Angular.jsをロードすることによりHTMLの負荷を防ぐことができ、アプリケーションの負荷時間が短縮されます。 http://code.angularjs.orgでangularjsの最新バージョンを入手できます。セキュリティ上の理由から、スクリプトをロードするために製品のこのアドレスを直接参照しないでください。しかし、それが研究と学習のためだけの場合、それが直接的な接続であるかどうかは関係ありません。
選択：Angular- [version] .jsは、読みに便利で、毎日の開発とデバッグに適したバージョンです。
選択：Angular- [version] .min.jsは、最終製品での使用に適した圧縮および難読化されたバージョンです。
「ng-app」をアプリケーションのルートノードに配置します。 Angularが自動的にアプリケーションを起動したい場合は、通常、<HTML>タグに配置できます。
<html ng-app>
古い学校スタイルのディレクティブ構文 "ng："を使用する必要がある場合は、xml-namespaceをHTMLタグに「please」に追加する必要があります。 （これは歴史的な理由であり、ng :)を使用することはお勧めしません
<html xmlns：ng = "http://angularjs.org">
3。自動初期化
AngularはDomContentLoadedイベントで自動的に初期化され、AngularはNG-APPディレクティブを介して指定されたアプリケーションルートノードを見つけます。見つかった場合、Angularは次のことを行います。
モジュールに関連するディレクティブをロードします。
アプリケーション関連のインジェクター（依存マネージャー）を作成します。
NG-APPでルートノードを指定し、DOMの関連する「コンパイル」作業を開始します。言い換えれば、ページの一部（<html>ではない）をルートノードとして使用できるため、Angularの範囲が制限されます。
<！doctype html> <html lang = "zh-cn"> <head> <meta charset = "utf-8"> <title> bootstrap-auto </title> <style type = "text/css"> .ng-cloak {display：none; none; } </style> </head> <body>ここにng-app ~~ {{1+2}} <div-app> ng-app ~~~ {{1+3*2}} </div> <スクリプトsrc = "../ angular-1.0.1.1.js" Type = "/javascript"> </> </> </> </</</</</</bodycriptの内側があります。注：ITの「ng-cloak」は、angular.jsコンピレーションが完了する前に使用されます（そうです！それは正しいです！角度の負荷の前ではなく、コンピレーションが完了する前です。したがって、最良の方法は、アプリケーションの荷重プロセスを最適化するか、CSSを組み合わせて、未処理のテンプレートをサポートしないようにすることです。 class = "ng-cloak"メソッド。コンパイルが完了した後、このクラスまたは属性が削除されます。）ページに元のテンプレートが表示されないようにします。
4。手動の初期化
初期化プロセスをさらに制御する場合（たとえば、スクリプトローダーを介してAngular.jsをロードするか、Angularコンパイルページの前に操作を実行する必要があります）、代わりに手動で呼ばれる起動方法を使用できます。
次の例は、NG-APP、指令を使用することと同等です。
<！doctype html> <html lang = "zh-cn"> <head> <meta charset = "utf-8"> <title> bootstrap-manual </title> <style type = "text/css"> .ng-cloak {display：none; none; } </style> </head> <body>ここにng-app ~~ {{1+2}} <div id = "rootofapp">これはng-app ~~~ {{1+3*2}} </div> <script src = "../ angular-1.0.1.1.js"型= type = "text/javascript"> angular.element（document）.ready（function（）{angular.bootstrap（angular.element（document.getElementbyId（ "rootofapp"））;}）; </script> </body> </html>つまり、私たちのコードは次の手順で記述できます。
1。ページとその他のコードがロードされたら、アプリケーションテンプレートのルートノードを見つけます。
2。Angular.bootstrapを呼び出し、Angularをテンプレートを実行可能ファイルの双方向のバインディングアプリケーションにコンパイルします！
今後も関連する記事を追加し続けます。このサイトへのご支援ありがとうございます！
関連記事：
Angularjs Bootstrapにはフロントエンドフレームワークが装備されています-JSコントロールパーツ
AngularJS Bootstrapにはフロントエンドフレームワークが装備されています-BASICページ
フロントエンドフレームワークを備えたAngularJSブートストラップ - 準備作業
Angularjs Bootstrap詳細な説明とサンプルコード