AngularJS_AngularJS の最もよく使用される関数の概要

AngularJS は、開発者により高いレベルの抽象化を提供することで、アプリケーション開発を簡素化します。他の抽象化手法と同様に、ある程度の柔軟性が失われます。言い換えれば、すべてのアプリケーションが AngularJS に適しているわけではありません。 AngularJS は主に CRUD アプリケーションの構築に関係します。幸いなことに、WEB アプリケーションの少なくとも 90% は CRUD アプリケーションです。ただし、AngularJS での構築に何が適しているかを理解するには、AngularJS での構築に何が適していないのかを理解する必要があります。

たとえば、ゲーム、グラフィカル インターフェイス エディター、頻繁で複雑な DOM 操作を行うアプリケーションは CRUD アプリケーションとは大きく異なり、AngularJS での構築には適していません。このような状況では、jQuery のような軽量でシンプルなテクノロジを使用する方が良いかもしれません。

最初の反復出力 ng-repeat タグ

ng-repeat は、table ul ol と他のタグを js の配列と完全に組み合わせます

<ul>
<li ng-repeat="person in persons">
{{person.name}} is {{person.age}} years old.
</li>
</ul>

出力の順序も指定できます:

<li ng-repeat="person in persons | orderBy:'name'">

ng-model タグの 2 番目の動的バインディング

ユーザー入力と値を含む HTML タグは、js 内の変数に動的にバインドできます。これが動的バインディングです。

<input type="text" ng-model='password'>

バインドされた変数の場合、{{}} を使用して

を直接参照できます

<span>you input password is {{password}}</span>

fiter に慣れていれば、必要な形式で簡単に出力できます

<span>{{1288323623006 | date:'yyyy-MM-dd HH:mm:ss Z'}}</span>

3 番目のバインディング クリック イベント ng-click イベント

ng-click を使用すると、クリック イベントをラベルに簡単にバインドできます。

<button ng-click="pressMe()"/>

もちろん、$scope ドメインで独自の pressMe メソッドを定義する必要があることが前提です。

従来の onclick メソッドとは異なり、次のようにオブジェクトを ng-click メソッドに渡すこともできます。

<ul>
<li ng-repeat="person in persons">
<button ng-click="printf(person)"/>
</li>
</ul>

そしてもちろん ng-dblclick タグ

4 番目の分岐ステートメント: ng-switch on、ng-if/ng-show/ng-hide/ng-disabled タグ

分岐ステートメントを使用すると、インターフェイス上で論理的な判断を記述することができます。

<ul>
<li ng-repeat="person in persons">
<span ng-switch on="person.sex">
<span ng-switch-when="1">you are a boy</span>
<span ng-switch-when="2">you are a girl</span>
</span>
<span ng-if="person.sex==1">you may be a father</span>
<span ng-show="person.sex==2">you may be a mother</span>
<span>
please input your baby's name:<input type="text" ng-disabled="!person.hasBaby"/>
</span>
<span>
</li>
</ul>

5 番目の検証文法: ng-trim ng-minlength ng-maxlength 必須 ng-pattern およびその他のタグ

フォームの入力ボックスでは、上記のタグを使用してユーザー入力を検証できます。
文字通りの意味はすでにご存知でしょう。

<form name="yourForm">
<input type="text" name="inputText" required ng-trim="true" ng-model="userNum" ng-pattern="/^[0-9]*[1-9][0-9]*$/" ng-maxlength="6" maxlength="6"/>
</form>

$scope.yourForm.inputText.$error.required を使用して、入力ボックスが空かどうかを判断できます

$scope.yourForm.inputText.$invalid を使用して、入力コンテンツが ng-pattern、ng-maxlength、maxlength を満たすかどうかを判断できます

$scope.userNum を通じて取得した入力コンテンツでは、ng-trim が存在するため、先頭と末尾の空白が削除されています。

6 番目のドロップダウン ボックスの ng-options タグ

ng-options は、ドロップダウン ボックス用に特別に作成されたタグです。

<select ng-model="yourSelected" ng-options="person.id as person.name in persons"></select>

ドロップダウン ボックスに person.name が表示され、いずれかを選択すると、選択した person.id を yourSelected から取得できます。

その7: CSSのNGスタイルタグを制御する

ng-style を使用すると、CSS 属性を簡単に制御できます

<span ng-style="myColor">your color</span>

次のように myColor に値を割り当てることで、必要な効果を変更できます。

$scope.myColor={color:'blue'};
$scope.myColor={cursor: 'pointer',color:'blue'};

非同期リクエスト用の 8 番目の $http オブジェクト。

AngularJS は、非同期リクエスト用に jquery の $.ajax に似たオブジェクトを提供します。
AngularJS では非同期操作が高く評価されているため、非同期パラメーターも提供する jquery.ajax とは異なり、$http 操作はすべて非同期です。

$http({method : 'POST',params : { id:123}, data:{name:'john',age:27}, url : "/mypath"})
.success(function(response, status, headers, config){
//do anything what you want;
})
.error(function(response, status, headers, config){
//do anything what you want;
});

POST リクエストを作成している場合、params のデータは URL の末尾に配置され、data のデータはリクエスト本文に配置されます。

上記では、AngularJS で最もよく使用される 8 つの関数を紹介しました。お役に立てば幸いです。