初めてAnglarJSを知った
5021 ワード
最近授業表のAPPに接触して、AnglarJSと知り合いになりました.
概念
AnglarJSはWebアプリケーションにおいて非常に完璧なJavaScript MVCフレームである.AnglarJSは完全にJavaScriptとHTMLから構成されています.AnglarJSフレームの核心概念はMVCアーキテクチャモードです.
MVC
MVCについてはよく知っています.アングラー応用では、ビュー層はDOMで、コントローラはJavaScript類で、モデルデータは対象の属性に格納されています.
データーバインディング
プログラムが実行されているときに、私たちは新しいデータをインターフェースに挿入したいです.またはユーザー入力に基づくデータを変更すると、インターフェースとJavaScript属性で同時に取得したデータが正しい状態であることを確認できます.
依存注入
依存注入は、特定のコントローラまたはサービスが必要な場合には、コードの中で直接にnewオペレータでインスタンスを作成するのではなく、そのすべての依存関係を取得するために要求を送信します.
コマンド
AnglarJSは、コマンドと呼ばれる新しい属性によってHTMLを拡張します.
例
概念
AnglarJSはWebアプリケーションにおいて非常に完璧なJavaScript MVCフレームである.AnglarJSは完全にJavaScriptとHTMLから構成されています.AnglarJSフレームの核心概念はMVCアーキテクチャモードです.
MVC
MVCについてはよく知っています.アングラー応用では、ビュー層はDOMで、コントローラはJavaScript類で、モデルデータは対象の属性に格納されています.
データーバインディング
プログラムが実行されているときに、私たちは新しいデータをインターフェースに挿入したいです.またはユーザー入力に基づくデータを変更すると、インターフェースとJavaScript属性で同時に取得したデータが正しい状態であることを確認できます.
依存注入
依存注入は、特定のコントローラまたはサービスが必要な場合には、コードの中で直接にnewオペレータでインスタンスを作成するのではなく、そのすべての依存関係を取得するために要求を送信します.
コマンド
AnglarJSは、コマンドと呼ばれる新しい属性によってHTMLを拡張します.
例
<!DOCTYPE html> <html ng-app> <head> <base/> <title>Your Shopping Cart</title> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> </head> <body ng-controller='CartController'> <h1>Your Order</h1> <div ng-repeat='item in items'> <span>{{item.title}}</span> <input ng-model='item.quantity'/> <span>{{item.price | currency}}</span> <span>{{item.price * item.quantity | currency}}</span> <button ng-click="remove($index)"> Remove </button> </div> <script> function CartController($scope) { ////@formatter:off $scope.items = [{ title : 'Paint pots', quantity : 8, price : 3.95 }, { title : 'Polka dots', quantity : 17, price : 12.95 }, { title : 'Pebbles', quantity : 5, price : 6.95 }]; ////@formatter:on $scope.remove = function(index) { $scope.items.splice(index, 1); }; } </script> </body> </html>