AngularJS構文の詳しい説明(続き)_AngularJS

src 属性と href 属性

Angularjs では、src は ng-src として記述し、href は ng-href として記述する必要があります。例:

コードをコピーします コードは次のとおりです:

テキスト

式

テンプレートでは、単純な数学演算、比較演算、ブール演算、ビット単位の演算、参照配列、オブジェクト表記などを実行できます。ただし、式はカスタム インタプリタを使用して実行されます。 Angular の) を使用する代わりに Javascript の eval() 関数を使用するため、より大きな制限があります。
ここでの式は多くの点で Javascript よりも厳密ですが、エラーが発生した場合、テンプレートは NullPointerException エラーをスローするのではなく、単純に何も表示しません。 例:

コードをコピーします コードは次のとおりです:

{{computer() /10 }}

//これは合法ですが、このアプローチは避けるべきです。

UI とコントローラーの責任を分離します

コントローラーは特定の DOM フラグメントにバインドされており、これらのフラグメントはコントローラーが管理する必要があるコンテンツです。コントローラーを DOM ノードに関連付けるには、主に 2 つの方法があります。1 つは、ng-controller を介してテンプレート内で宣言する方法です。2 つ目は、ルーティングを介して動的にロードされる DOM テンプレート フラグメントにコントローラーをバインドする方法です。 ネストされたコントローラーを作成でき、継承構造を通じてデータ モデルと関数を共有できます。実際のネストは、内部のプリミティブ継承メカニズムを通じて、親コントローラー オブジェクトの $scope が内部のネストされた $ に渡されます。スコープ (関数を含むすべてのプロパティ)。例:

コードをコピーします コードは次のとおりです:

...

$scope を使用してモデル データを公開します

$scope プロパティを明示的に作成できます (例: $scope.count = 5)。テンプレート自体を介して間接的にデータ モデルを作成することもできます。

表現による。たとえば

コードをコピーします コードは次のとおりです:

カウントを 3 に設定

フォーム項目で ng-model を使用する

式と同様に、ng-model で指定されたモデル パラメーターは外部コントローラーでも機能します。唯一の違いは、フォーム項目と指定されたモデルの間に双方向のバインディングが作成されることです。

ウォッチを使用してデータ モデルの変更を監視します

$watch の関数シグネチャは次のとおりです: $watch(watchFn,watchAction,deepWatch)
watchFn は、監視対象のデータ モデルの現在の値を返す Angular 式または関数を含む文字列です。 watchAction は、watchFn が変更されたときに呼び出される関数または式です。その関数シグネチャは次のとおりです:
function(newValue,oldValue,scope) deepWatch true に設定すると、このオプションのブール型パラメーターは、監視対象オブジェクトの各プロパティが変更されたかどうかを確認するように Angular に指示します。単一の値を監視するのではなく、配列内の要素、またはオブジェクトのすべてのプロパティを監視する場合は、このパラメーターを使用できます。 Angular は配列またはオブジェクトを走査する必要があるので、コレクションが大きい場合、操作が複雑で重くなることに注意してください。

$watch 関数は関数を返します。変更通知を受け取る必要がない場合は、この返された関数を使用してモニターからログアウトできます。
プロパティを監視して監視からログアウトする必要がある場合は、次のコードを使用できます: var dereg = $scope.$watch('someModel.someProperty',callbackOnChange());
... dereg();

コード例は次のとおりです:

コードをコピー コードは次のとおりです:

<頭>
   
    <スクリプトタイプ="text/javascript">
        function CartController($scope) {
            $scope.bill = {};
            $scope.items = [
                {タイトル:「ペイントポット」、数量:8、価格:3.95}、
                {タイトル:「水玉模様」、数量:17、価格:12.95}、
                {タイトル:「小石」、数量:5、価格:6.95}
            ];
            $scope.totalCart = function() {
                var total = 0;
                for (var i=0,len=$scope.items.length;i                     total = 合計 $scope.items[i].price * $scope.items[i].quantity;
                }
                合計を返します;
            }
            $scope.subtotal = function() {
                return $scope.totalCart() - $scope.bill.discount;
            }
            function CalculateDiscount(newValue,oldValue,scope) {
                $scope.bill.discount = newValue > 100? 10:0;
            }//ここのwatchAction関数数
            $scope.$watch($scope.totalCart,calculateDiscount);//ここのwatch関数数
        }
   


   

       

            {{item.title}}
           
            {{商品.価格 |通貨}}
            {{商品.価格 * 商品.数量 |通貨}}
       

       

合計: {{totalCart()|通貨 }}

       

割引: {{bill.discount |通貨}}

       

小計: {{小計() |通貨}}

   

   

上のウォッチにはパフォーマンスの問題があるため、calculateTotals 関数が 6 回実行され、そのうち 3 回は循環するたびに都市がデータを再汚染しているためです。 以下は改良後の代コード

复制代码代码如下:

<頭>
   
    <スクリプトタイプ="text/javascript">
        function CartController($scope) {
            $scope.bill = {};
            $scope.items = [
                {タイトル:「ペイントポット」、数量:8、価格:3.95}、
                {タイトル:「水玉模様」、数量:17、価格:12.95}、
                {タイトル:「小石」、数量:5、価格:6.95}
            ];
            var totalCart = function() {
                var total = 0;
                for (var i=0,len=$scope.items.length;i                     total = 合計 $scope.items[i].price * $scope.items[i].quantity;
                }
                $scope.bill.totalcart = 合計;
                $scope.bill.discount = 合計 > 100? 10:0;
                $scope.bill.subtotal = 合計 - $scope.bill.discount;
            }
            $scope.$watch('items',totalCart,true);//ただ着ているアイテムの変更
        }
   


   

       

            {{item.title}}
           
            {{商品.価格 |通貨}}
            {{商品.価格 * 商品.数量 |通貨}}
       

       

合計: {{bill.totalcart|通貨 }}

       

割引: {{bill.discount |通貨}}

       

小計: {{bill.subtotal |通貨}}

   

   

Angular 表示画面で毎回、combill プロパティを更新するだけであれば、非常に大きな ITMS 数の場合にパフォーマンスが向上する可能性があります。watchFn の $watch 関数を使用してバンドルを作成することで、これを実現できます。 >

复制代码代码如下:

$scope.$watch(
var totalCart = function() {
var total = 0;
for (var i=0,len=$scope.items.length;i total = 合計 $scope.items[i].price * $scope.items[i].quantity;
}
$scope.bill.totalcart = 合計;
$scope.bill.discount = 合計 > 10 :0;
$scope.bill.subtotal = 合計 - $scope.bill.discount;
});

複数のものを監視する

複数のプロパティまたはオブジェクトを監視し、それらのいずれかが変更されたときに関数を実行する場合、2 つの基本的なオプションがあります。

これらのプロパティを連結した値を監視します

それらを配列またはオブジェクトに入れて、deepWatch パラメーターに値を渡します

それぞれの手順:
最初のケースでは、スコープ内に Things オブジェクトがある場合、そのオブジェクトには 2 つのプロパティ a と b があり、これら 2 つのプロパティが変更されると、callMe() 関数を実行する必要があります。これらの 2 つのプロパティを同時に監視できます。 $scope.$watch('things.a things.b',callMe(...));
リストが非常に長い場合は、連結された値を返す関数を作成する必要があります。

2 番目のケースでは、オブジェクトのすべてのプロパティを監視する必要があります。これを行うことができます。

コードをコピーします コードは次のとおりです:

$scope.$watch('things',callMe(...),true);

モジュールを使用して依存関係を整理する

provider(name,Object ORconstructor()) 説明: 複雑なロジック比較を作成する構成可能なサービス。オブジェクトをパラメータとして渡す場合、そのオブジェクト オブジェクトには、サービスの名前を返す必要がある $get という名前の関数が必要です。それ以外の場合、angularjs は渡されたものがコンストラクターであると認識し、コンストラクターを呼び出すとサービス インスタンス オブジェクトが返されます。
Factory(name,$get Function()) 説明: 構成不可能なサービスであり、作成ロジックは比較的複雑です。呼び出されたときにサービス インスタンスを返す関数を指定する必要があります。これは、provider(name,{$get:$getFunction()}) として表示されます。
service(name,constructor()) 構成不可能なサービスであり、ロジックの作成は比較的簡単です。上記のプロバイダー関数のコンストラクター パラメーターと同様に、Angular はサービス インスタンスを呼び出すことでサービス インスタンスを作成できます。

モジュールファクトリーの使用例

コードをコピー コードは次のとおりです:

<頭>


<スクリプトタイプ="text/javascript">
    var ShoppingModule = angular.module('ShoppingModule',[]);
    ShoppingModule.factory('アイテム',function() {
        var items = {};
        items.query = function() {
            戻る [
                {title:'ペイント ポット',description:'ペイントでいっぱいのポット',price:3.95},
                {title:'ペイント ポット',description:'ペイントでいっぱいのポット',price:3.95},
                {title:'ペイント ポット',description:'ペイントでいっぱいのポット',price:3.95}
            ];
        };
        返品アイテム;
    });
    function ShoppingController($scope,Items) {
        $scope.items = Items.query();
    }

ショップ!!

<表>
   
        {{item.title}}
        {{item.description}}
        {{商品.価格 |通貨}}
   

導入第三方模块

ほとんどのアプリケーションでは、すべてのコードを使用する単一のモジュールを構築し、すべての依存するトラフィックをそのモジュールに入れると、サードパーティのパケットを使用して提供されるサービスがうまく動作します。または、コマンドは、通常、自分のモジュールを持っており、アプリケーションモジュール内で参照できないようにする必要があります。 var appMod = angular.module('app',['Snazzy','Super']);

フィルターに関する例

复制代 代码如下:

<頭>


<スクリプトタイプ="text/javascript">
    var ShoppingModule = angular.module('ShoppingModule',[]);
    ShoppingModule.filter('titleCase',function() {
        var titleCaseFilter = function(input) {
            var word = input.split(' ');
            for(var i=0;i                 単語[i] = 単語[0].charAt(0).toUpperCase() 単語[i].slice(1);
            }
            return Words.join(' ');
        };
        titleCaseFilter を返す;
    });
    function ShoppingController($scope) {
        $scope.pageHeading = 'これはテスト ケースです';
    }

{{ページ見出し | titleCase}}