AnglarJs学習ノート

14124 ワード

AnglarJsはノートシリーズの第一編を勉強します。続けて書いてほしいです。本論文の内容は主にhttp://docs.angularjs.org/guide/文書の内容から来ているが、少し自分の理解と試行結果も加えている。
一、まとめて
本論文ではアングラー初期化の過程を説明し、アングラーをどうやって必要な時に手動で初期化するかを説明します。
二、アングラー <スクリプト> ラベル
この例は、推奨された経路でAnglarを統合する方法を示し、自動初期化を実現する。

 <!doctype html>

 <html xmlns:ng="http://angularjs.org" ng-app>

 <body>

  ...

 <script src="angular.js">

 </body>

 </html>

ページの底にsciprtタグを置きます。このようにすると、angglar.jsをロードすることによってHTMLのロードをブロックし、アプリケーションのロード時間を減らすことができます。私たちはここにいてもいいですhttp://code.angularjs.orgで最新バージョンのangglarJsを取得します。安全上、この住所を製品に直接引用してスクリプトをロードしないでください。ただ研究学習だけで使うなら、直接接続してもいいです。選択:anglar-[version].js 読みやすいバージョンです。日常開発、デバッグに適しています。選択:anglar-[version].min.js 圧縮、混淆されたバージョンで、最終製品に適しています。アプリケーションのルートノードに「ng-ap」を置いて、anglarを自動的にあなたのアプリケーションを起動させたいなら、通常は「html」タブに置くことができます。

<html ng-app>

もし私たちが古いスタイルのdirective文法を使う必要があるならば、xml-namespaceを入れて、これまでのラベルの中に「喜ばせる」IEを入れる必要があります。（これは歴史的な理由です。ng:）を勧めません。

<html xmlns:ng="http://angularjs.org">

三、自動初期化
AnglarはDOMContentLoadedイベントで自動的に初期化されます。Anglarはあなたがng-apというdirectiveで指定したアプリケーションのルートノードを見つけることができます。見つけたら、アングラーは次のようなことをします。
moduleに関するdirectiveをロードします。アプリケーション関連のinjector（依存マネージャ）を作成します。ルートノードをng-apで指定し、DOMに関する「コンパイル」作業を開始します。換言すれば、ページの一部（非）をルートノードとして、angglarの作用範囲を制限することができる。

<!DOCTYPE HTML>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>Bootstrap-auto</title>
    <style type="text/css">
        .ng-cloak {
            display: none;
        }
    </style>
</head>
<body>
       ng-app   ~~{{1+2}}
    <div ng-app class="ng-cloak">   ng-app  ~~~{{1+3*2}}</div>
    <script src="../angular-1.0.1.js" type="text/javascript"></script>
</body>
</html>

注：中の「ng-cloak」は、これは
angglar.js
コンパイルが完了する前に
angglarjs
ロードが完了する前に、この状況をよく避けたいなら、最適な方法はアプリケーションのロードフローを最適化するか、または結合することです。
css
コンパイルされていないモジュ-ルを処理します。
ie 6
を選択します
7
属性選択はサポートされていませんので、一番いいです。
class="ng-cloak"の方式です。コンパイルが完了したら、これは
クラス
または属性は削除されます。)テンプレートを隠して、元のテンプレートがページに表示されないようにします。
四、手動初期化
初期化プロセスをさらに制御したいなら（例えば、あなたはscriptを通過する必要があります。 loaderはangglar.jsをロードします。あるいはangglarでページをコンパイルする前にいくつかの操作をします。そうすると、私たちは手動で起動する方法で代替できます。
以下の例は、ng-apというdirectiveを使用することに等しい。

<!DOCTYPE HTML>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>Bootstrap-manual</title>
    <style type="text/css">
        .ng-cloak {
            display: none;
        }
    </style>
</head>
<body>
       ng-app   ~~{{1+2}}
    <div id="rootOfApp" class="ng-cloak">   ng-app  ~~~{{1+3*2}}</div>
    <script src="../angular-1.0.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        angular.element(document).ready(function() {
            angular.bootstrap(angular.element(document.getElementById("rootOfApp")));
        });
    </script>
</body>
</html>