AngularJS文法チートシート

この内容について

この内容は、私が運営しているサイトに、より見やすく掲載しているので、よければそちらもご活用ください。
AngularJSチートシート | コレワカ

AngularJSとは

AngularJSはWeb系の全ての機能が完結するJavaScript製のMVWフレームワークのこと
AngularJS公式サイト

基本的な書き方

HTML

<div ng-app="myApp" ng-controller="myCtrl">
  <!-- AngularJS適用範囲 -->
</div>

JavaScript

var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {});

変数・型

変数

See the Pen AngularJS_variable by engineerhikaru (@engineerhikaru) on CodePen.

配列変数

See the Pen AngularJS_array_variable by engineerhikaru (@engineerhikaru) on CodePen.

連想配列変数

See the Pen AngularJS_object-variable by engineerhikaru (@engineerhikaru) on CodePen.

ディレクティブ

ng-appディレクティブ

AngularJSアプリケーションのルート要素であることをAngularJSに伝える。

HTML

<div ng-app="myApp">
  <!-- -->
</div>

JavaScript

var app = angular.module("myApp", []);

ng-initディレクティブ

AngularJSアプリケーション開始時に変数を作成・初期化する

See the Pen
AngularJS_ng-init by engineerhikaru (@engineerhikaru)
on CodePen.

ng-controllerディレクティブ

AngularJSアプリケーション変数を処理するコントローラーを追加する

HTML

<div ng-app="myApp" ng-controller="myCtrl">
  <!-- AngularJS適用範囲 -->
</div>

JavaScript

var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {});

ng-modelディレクティブ

入力値をスコープ内の変数にバインドする

See the Pen
AngularJS_ng-model by engineerhikaru (@engineerhikaru)
on CodePen.

ng-repeat

配列を展開する

See the Pen
AngularJS_ng-repeat by engineerhikaru (@engineerhikaru)
on CodePen.

ng-if

条件によってDOM内の要素を削除または再作成する

See the Pen
AngularJS_ng-if by engineerhikaru (@engineerhikaru)
on CodePen.

ng-show

条件に基づいて要素を表示・非表示にする (反対はng-hide)

See the Pen
AngularJS_ng-show by engineerhikaru (@engineerhikaru)
on CodePen.

ng-change

入力値が変更された時に、関数を実行する

See the Pen
AngularJS_ng-change by engineerhikaru (@engineerhikaru)
on CodePen.

ng-switch

一致する条件に基づいて要素の制御をする

See the Pen
AngularJS_ng-switch by engineerhikaru (@engineerhikaru)
on CodePen.

ng-click

ボタンがクリックされた時に、関数を実行する

See the Pen
AngularJS_ng-click by engineerhikaru (@engineerhikaru)
on CodePen.

ng-style

要素にスタイルを指定する

See the Pen
AngularJS_ng-style by engineerhikaru (@engineerhikaru)
on CodePen.

ng-class

クラスを動的に設定する

See the Pen
AngularJS_ng-class by engineerhikaru (@engineerhikaru)
on CodePen.

ng-submit

submitボタンがクリックされた時に、関数を実行する

See the Pen
AngularJS_ng-submit by engineerhikaru (@engineerhikaru)
on CodePen.

ng-bind

テキストデータを出力

See the Pen
AngularJS_ng-bind by engineerhikaru (@engineerhikaru)
on CodePen.

ng-cloak

AngularJSが制御を開始するまでコンテンツを表示しない

See the Pen
AngularJS_ng-cloak by engineerhikaru (@engineerhikaru)
on CodePen.

フィルター

uppercase

文字列を全て大文字にする (反対はlowercaseで全て小文字になる)

See the Pen
AngularJS_filter-uppercase by engineerhikaru (@engineerhikaru)
on CodePen.

number

数字をカンマ区切りにする (オプションで小数点以下何桁まで表示するかを設定可能)

See the Pen
AngularJS_filter-number by engineerhikaru (@engineerhikaru)
on CodePen.

currency

数字を通貨形式にフォーマットする

See the Pen
AngularJS_currency by engineerhikaru (@engineerhikaru)
on CodePen.

date

日付を指定した形式にフォーマットする

See the Pen
AngularJS_filter-date by engineerhikaru (@engineerhikaru)
on CodePen.

orderBy

配列を昇順・降順に並べる

See the Pen
AngularJS_orderBy by engineerhikaru (@engineerhikaru)
on CodePen.

limitTo

指定された数までの配列の中身を取り出す

See the Pen
AngularJS_filter-limitTo by engineerhikaru (@engineerhikaru)
on CodePen.

filter

指定された文字に一致する配列の中身を取り出す

See the Pen
AngularJS_filter-filter by engineerhikaru (@engineerhikaru)
on CodePen.

この内容について

この内容は、私が運営しているサイトに、より見やすく掲載しているので、よければそちらもご活用ください。
AngularJSチートシート | コレワカ