ホームページ >ウェブフロントエンド >jsチュートリアル >AngularJSの初期化処理解析(ブートストラップ)_AngularJS
AngularJSの初期化処理解析(ブートストラップ)_AngularJS
- WBOYオリジナル
- 2016-05-16 16:28:431209ブラウズ
概要
このセクションでは、AngularJS の初期化プロセスと、必要に応じて AngularJS の初期化を変更する方法について説明します。
AngularJS の <script> タグ </strong></p>
<p>この例は、「自動初期化」と呼ばれる、AngularJS を統合するための推奨方法を示しています。 </p>
<p><div class="codetitle"><span><a style="CURSOR: pointer" data="79377" class="copybut" id="copybut79377" onclick="doCopy('code79377')"><U>コードをコピーします</U></a></span> コードは次のとおりです:</div><div class="codebody" id="code79377"><br />
<!doctype html><br>
<html xmlns:ng="http://angularjs.org" ng-app><br>
<br>
...<br>
<スクリプト src="angular.js"><スクリプト><br>
</body><br>
</html><br>
</strong></p>
<p><strong>形式日付</strong></p>
<p>1. ページの下部にある上記のコードに script タグを配置します。 script タグを最後に配置すると、HTML の読み込みが angular.js スクリプトの読み込みによってブロックされないため、アプリケーションの読み込み時間が短縮されます。最新バージョンは http://code.angularjs.org から入手できます。サイトのセキュリティ リスクにさらされる可能性があるため、コード内でこの URL を参照しないでください。実験的な開発であれば当サイトへのリンクは問題ありません。 </p>
<p>1).angular-[バージョン].js は、開発とデバッグに適した読み取り可能なバージョンです。 <br>
2).angular-[version].min.js は、圧縮され難読化されたバージョンであり、成熟した製品への展開に適しています。 </p>
<p>2. AngularJS で <html> タグ内に ng-app ディレクティブを入れてください。 <br>
</p>
<p></p>
<div class="codetitle">
<span><a style="CURSOR: pointer" data="71091" class="copybut" id="copybut71091" onclick="doCopy('code71091')"><u>コードをコピーします</u></a></span> コードは次のとおりです:</div>
<div class="codebody" id="code71091">
<br>
<html ng-app><br>
</div>
<p>3. 古いバージョンの命令構文 ng: を使用する場合は、AngularJS を IE で適切に動作させるために、xml 名前空間も記述する必要があります。 (これは歴史的な理由から行われており、ng: 構文を使用し続けることはお勧めしません。) </p>
<p></p>
<div class="codetitle">
<span><a style="CURSOR: pointer" data="49065" class="copybut" id="copybut49065" onclick="doCopy('code49065')"><u>コードをコピーします</u></a></span> コードは次のとおりです:</div>
<div class="codebody" id="code49065">
<br>
<html xmlns:ng="http://angularjs.org"><br>
</div>
<p><strong>自動初期化</strong></p>
<p>AngularJS は、DOMContentLoaded イベントがトリガーされると実行され、ng-app ディレクティブを通じてアプリケーションのルート スコープを見つけます。 ng-app ディレクティブが見つかった場合、AngularJS は次の処理を行います: </p>
<p>1. コマンドの内容に関連するモジュールをロードします。 <br>
2. アプリケーション「インジェクター」を作成します。 <br>
3. DOM をコンパイルするためのルート ノードとして ng-app ディレクティブのラベルがすでにあります。これにより、AngularJS アプリケーションの DOM の一部のみを指定できます。 </p>
<p></p>
<div class="codetitle">
<span><a style="CURSOR: pointer" data="88586" class="copybut" id="copybut88586" onclick="doCopy('code88586')"><u>コードをコピーします</u></a></span> コードは次のとおりです:</div>
<div class="codebody" id="code88586">
<br>
<!doctype html><br>
<html ng-app="オプションモジュール名"><br>
<br>
{{ 1 2 }}.<br> を追加できます。
& Lt; スクリプト src = "angular.js" & gt;
</body><br>
</html><br>
<br>
</div>
<p>手動初期化<strong></strong>
</p>初期化プロセスをアクティブに制御する必要がある場合は、ブート プログラムを手動で実行する方法を使用できます。たとえば、「スクリプト ローダー」を使用する場合、または AngularJS がページをコンパイルする前にいくつかの操作を実行する必要がある場合にこれを使用します。 <p>
</p>次の例は、AngularJS を手動で初期化する方法を示しています。その効果は、ng-app ディレクティブを使用するのと同じです。 <p>
</p>
<p></p>
<div class="codetitle">
<span><a style="CURSOR: pointer" data="70023" class="copybut" id="copybut70023" onclick="doCopy('code70023')">コードをコピー<u></u></a> コードは次のとおりです:</span><div class="codebody" id="code70023">
<br>
<!doctype html><br>
<html xmlns:ng="http://angularjs.org"><br>
<br>
こんにちは、{{'World'}}!<br>
<スクリプト src="http://code.angularjs.org/angular.js"></script>
angular.element(document).ready(function() {
angular.bootstrap(document);
});