AngularJS概要
4492 ワード
最近、プロジェクトはangularJS開発クラスCRUDの機能を使う必要があります.もともとangularJSについて何も知らなかったので、この機会に皆さんと一緒にangularJSについて検討してみましょう.くだらないことは言わないで、直接本題に入りましょう.
angularJSとは?
AngularJSは動的WEBアプリケーションのために設計された構造フレームワークである.テンプレート言語としてHTMLを使うことができ、HTMLの文法を拡張することで、より明確にすることができます.アプリケーションコンポーネントCRUD(Create、クエリーRetrieve、Updateの更新、Deleteの削除)を簡潔に構築します.データバインディングと依存注入を利用して、大量のコードを書く必要がなくなります.これらはすべてブラウザ側のJavascriptによって実現され、サーバ側のテクノロジーと完璧に結合できます.
AngularJSは、HTMLの構築アプリケーションの不足を克服するために設計されています.HTMLは静的テキスト展示のために設計された声明式言語ですが、WEBアプリケーションを構築するには力不足に見えます.だから私はブラウザに私の欲しいことをさせるためにいくつかの仕事をしました(あなたも小さな手口だと思います).
通常、動的アプリケーションの構築における静的Webテクノロジーの不足を解決するには、次の技術を使用します.
・クラスライブラリ-クラスライブラリは、WEBアプリケーションを書くのに役立つ関数の集合です.主導的な役割を果たすのは、クラスライブラリをいつ使用するかを決定するコードです.クラスライブラリ:jQueryなど
・フレームワーク-フレームワークは特殊で実現されたWEBアプリケーションであり、具体的なビジネスロジックを埋め込む必要があります.ここでフレームワークは主導的な役割を果たし、それによって具体的な応用論理に基づいてコードを呼び出す.フレームワークは、knockout、sproutcoreなどです.
AngularJSは、HTML自体のアプリケーション構築における欠陥を補完しようとする異なる方法を使用しています.AngularJSは,我々が識別子(directives)と呼ぶ構造を用いることで,ブラウザが新しい構文を認識できるようにする.例:
・(1)二重括弧{}}構文を用いたデータバインド;
・(2)DOM制御構造を使用して反復または非表示のDOMフラグメントを実現する;
・(3)フォームとフォームの検証をサポートする.
・(4)論理コードを関連するDOM要素に関連付けることができる.
・(5)HTMLを再利用可能なコンポーネントに分割できる.
AngularJSのメリットは?
AngularJSは開発者のためにより高いレベルの抽象を提示することによってアプリケーションの開発を簡素化する.他の抽象技術と同様に、柔軟性の一部を失うことになります.言い換えれば、すべてのアプリケーションがAngularJSで行うのに適しているわけではありません.AngularJSは主にCRUDアプリケーションの構築を考慮している.幸いなことに、少なくとも90%のWEBアプリケーションはCRUDアプリケーションです.しかし、AngularJSで構築するのに適したものを知るには、AngularJSで構築するのに適していないものを知る必要があります.
ゲーム,グラフィックインタフェースエディタのように,このDOM操作は頻繁で複雑なアプリケーションであり,CRUDアプリケーションとは大きく異なり,AngularJSで構築するのに適していない.このような場合、jQueryのようなより軽量で簡単な技術を使うともっと良いかもしれません.
次に例を示します.
次は、フォームを含む典型的なCRUDアプリケーションです.フォームの値は検証され、合計値を計算するために使用されます.この合計値はローカルのスタイルにフォーマットされます.次の開発者によく見られる概念について説明します.
・(1)データモデル(data-model)をビュー(UI)に関連付ける.
・(2)ユーザの入力を書き込み、読み取り、検証する.
・(3)モデルに基づいて新たな値を算出する.
・(4)出力フォーマットをローカライズする.
index.html
script.js
実行結果:
function InvoiceCntl($scope){$scope.qty = 1;$scope.cost = 19.95;} 実行効果
Invoice:
Quantity Cost
Total: {{qty * cost | currency}}
ラベルでは、AngularJSアプリケーションであることを「ng-app」識別子で示します.この「ng-app`」記号は、AngularJS**を自動的に**(auto initialize)のアプリケーションを初期化します.「ラベル」を使用してAngularJSスクリプトをロードします.
「input」タブAngularJSを設定すると、自動的にデータが双方向にバインドされます.簡単なデータ検証も同時に行いました.
Quantity: <input type="integer"min="0"ng-model="qty"required >
Cost: <input type="number"ng-model="cost"required >
この入力ボックスのwidgetは普通に見えますが、以下の点を認識すると普通ではありません.
・ページのロードが完了すると、AngularJSはwidgetで宣言されたモデル名(qty、cost)に従って同名変数を生成します.これらの変数をMVC設計モードのM(Model)と見なすことができます.
・上のwidgetのinputには特殊な能力があることに注意してください.入力データがないか、入力データが無効な場合は、このinput入力ボックスが自動的に赤くなります.入力ボックスのこの新しい特性は,開発者がCRUDアプリケーションでよく見られるフィールド検証機能をより容易に実現できる.
いよいよ、謎の二重括弧{}}を見てみましょう.
Total: {{qty * cost | currency}}
この{式}}タグはAngularJSのデータバインディングである.式は、式とフィルタ({expression|filter}))の組み合わせであってもよい.AngularJSは、入出力データをフォーマットするフィルタを提供します.
上の例では,{}}の式を入力ボックスから取得したデータをAngularJSに乗算させ,乗算結果をローカル通貨スタイルにフォーマットしてページに出力する.
特筆すべきは,AngularJSを呼び出す方法も,フレームワークのように特定の論理を記述する方法もなく,上記の機能を完成させたことである.この実装の背後には,ブラウザが従来よりも静的ページを生成する作業を多く行い,動的WEBアプリケーションのニーズを満たすことができるためである.AngularJSは動的WEBアプリケーションの開発の敷居をクラスライブラリやフレームワークを必要としない程度に下げた.
angularJSとは?
AngularJSは動的WEBアプリケーションのために設計された構造フレームワークである.テンプレート言語としてHTMLを使うことができ、HTMLの文法を拡張することで、より明確にすることができます.アプリケーションコンポーネントCRUD(Create、クエリーRetrieve、Updateの更新、Deleteの削除)を簡潔に構築します.データバインディングと依存注入を利用して、大量のコードを書く必要がなくなります.これらはすべてブラウザ側のJavascriptによって実現され、サーバ側のテクノロジーと完璧に結合できます.
AngularJSは、HTMLの構築アプリケーションの不足を克服するために設計されています.HTMLは静的テキスト展示のために設計された声明式言語ですが、WEBアプリケーションを構築するには力不足に見えます.だから私はブラウザに私の欲しいことをさせるためにいくつかの仕事をしました(あなたも小さな手口だと思います).
通常、動的アプリケーションの構築における静的Webテクノロジーの不足を解決するには、次の技術を使用します.
・クラスライブラリ-クラスライブラリは、WEBアプリケーションを書くのに役立つ関数の集合です.主導的な役割を果たすのは、クラスライブラリをいつ使用するかを決定するコードです.クラスライブラリ:jQueryなど
・フレームワーク-フレームワークは特殊で実現されたWEBアプリケーションであり、具体的なビジネスロジックを埋め込む必要があります.ここでフレームワークは主導的な役割を果たし、それによって具体的な応用論理に基づいてコードを呼び出す.フレームワークは、knockout、sproutcoreなどです.
AngularJSは、HTML自体のアプリケーション構築における欠陥を補完しようとする異なる方法を使用しています.AngularJSは,我々が識別子(directives)と呼ぶ構造を用いることで,ブラウザが新しい構文を認識できるようにする.例:
・(1)二重括弧{}}構文を用いたデータバインド;
・(2)DOM制御構造を使用して反復または非表示のDOMフラグメントを実現する;
・(3)フォームとフォームの検証をサポートする.
・(4)論理コードを関連するDOM要素に関連付けることができる.
・(5)HTMLを再利用可能なコンポーネントに分割できる.
AngularJSのメリットは?
AngularJSは開発者のためにより高いレベルの抽象を提示することによってアプリケーションの開発を簡素化する.他の抽象技術と同様に、柔軟性の一部を失うことになります.言い換えれば、すべてのアプリケーションがAngularJSで行うのに適しているわけではありません.AngularJSは主にCRUDアプリケーションの構築を考慮している.幸いなことに、少なくとも90%のWEBアプリケーションはCRUDアプリケーションです.しかし、AngularJSで構築するのに適したものを知るには、AngularJSで構築するのに適していないものを知る必要があります.
ゲーム,グラフィックインタフェースエディタのように,このDOM操作は頻繁で複雑なアプリケーションであり,CRUDアプリケーションとは大きく異なり,AngularJSで構築するのに適していない.このような場合、jQueryのようなより軽量で簡単な技術を使うともっと良いかもしれません.
次に例を示します.
次は、フォームを含む典型的なCRUDアプリケーションです.フォームの値は検証され、合計値を計算するために使用されます.この合計値はローカルのスタイルにフォーマットされます.次の開発者によく見られる概念について説明します.
・(1)データモデル(data-model)をビュー(UI)に関連付ける.
・(2)ユーザの入力を書き込み、読み取り、検証する.
・(3)モデルに基づいて新たな値を算出する.
・(4)出力フォーマットをローカライズする.
index.html
<!doctype html>
<html ng-app>
<head>
<script src="angular.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<div ng-controller="InvoiceCntl">
<b>Invoice:</b>
<br>
<br>
<table>
<tr><td>Quantity</td><td>Cost</td></tr>
<tr>
<td><input type="integer" min="0" ng-model="qty" required ></td>
<td><input type="number" ng-model="cost" required ></td>
</tr>
</table>
<b>Total:</b> {{qty * cost | currency}}
</div>
</body>
</html>script.js
function InvoiceCntl($scope) {
$scope.qty = 1;
$scope.cost = 19.95;
}実行結果:
function InvoiceCntl($scope){$scope.qty = 1;$scope.cost = 19.95;} 実行効果
Invoice:
Quantity Cost
Total: {{qty * cost | currency}}
ラベルでは、AngularJSアプリケーションであることを「ng-app」識別子で示します.この「ng-app`」記号は、AngularJS**を自動的に**(auto initialize)のアプリケーションを初期化します.「ラベル」を使用してAngularJSスクリプトをロードします.
「input」タブAngularJSを設定すると、自動的にデータが双方向にバインドされます.簡単なデータ検証も同時に行いました.
Quantity: <input type="integer"min="0"ng-model="qty"required >
Cost: <input type="number"ng-model="cost"required >
この入力ボックスのwidgetは普通に見えますが、以下の点を認識すると普通ではありません.
・ページのロードが完了すると、AngularJSはwidgetで宣言されたモデル名(qty、cost)に従って同名変数を生成します.これらの変数をMVC設計モードのM(Model)と見なすことができます.
・上のwidgetのinputには特殊な能力があることに注意してください.入力データがないか、入力データが無効な場合は、このinput入力ボックスが自動的に赤くなります.入力ボックスのこの新しい特性は,開発者がCRUDアプリケーションでよく見られるフィールド検証機能をより容易に実現できる.
いよいよ、謎の二重括弧{}}を見てみましょう.
Total: {{qty * cost | currency}}
この{式}}タグはAngularJSのデータバインディングである.式は、式とフィルタ({expression|filter}))の組み合わせであってもよい.AngularJSは、入出力データをフォーマットするフィルタを提供します.
上の例では,{}}の式を入力ボックスから取得したデータをAngularJSに乗算させ,乗算結果をローカル通貨スタイルにフォーマットしてページに出力する.
特筆すべきは,AngularJSを呼び出す方法も,フレームワークのように特定の論理を記述する方法もなく,上記の機能を完成させたことである.この実装の背後には,ブラウザが従来よりも静的ページを生成する作業を多く行い,動的WEBアプリケーションのニーズを満たすことができるためである.AngularJSは動的WEBアプリケーションの開発の敷居をクラスライブラリやフレームワークを必要としない程度に下げた.