AngularJS文法チートシート

## この内容について
この内容は、私が運営しているサイトに、より見やすく掲載しているので、よければそちらもご活用ください。
[AngularJSチートシート | コレワカ](https://korenarawakaru.com/tech/angular/cheatsheet)

## AngularJSとは
AngularJSはWeb系の全ての機能が完結するJavaScript製のMVWフレームワークのこと
[AngularJS公式サイト](https://angularjs.org/)

## 基本的な書き方

```html:HTML
<div ng-app="myApp" ng-controller="myCtrl">
  <!-- AngularJS適用範囲 -->
</div>
```
```javascript:JavaScript
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {});
```

## 変数・型

### 変数
<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="js,result" data-user="engineerhikaru" data-slug-hash="wvKQjpq" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="AngularJS_variable">
  <span>See the Pen <a href="https://codepen.io/engineerhikaru/pen/wvKQjpq">
  AngularJS_variable</a> by engineerhikaru (<a href="https://codepen.io/engineerhikaru">@engineerhikaru</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

### 配列変数
<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="js,result" data-user="engineerhikaru" data-slug-hash="xxwQjJK" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="AngularJS_array_variable">
  <span>See the Pen <a href="https://codepen.io/engineerhikaru/pen/xxwQjJK">
  AngularJS_array_variable</a> by engineerhikaru (<a href="https://codepen.io/engineerhikaru">@engineerhikaru</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

### 連想配列変数
<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="js,result" data-user="engineerhikaru" data-slug-hash="vYNQjvy" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="AngularJS_object-variable">
  <span>See the Pen <a href="https://codepen.io/engineerhikaru/pen/vYNQjvy">
  AngularJS_object-variable</a> by engineerhikaru (<a href="https://codepen.io/engineerhikaru">@engineerhikaru</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

## ディレクティブ

### ng-appディレクティブ
AngularJSアプリケーションのルート要素であることをAngularJSに伝える。

```html:HTML
<div ng-app="myApp">
  <!-- -->
</div>
```
```javascript:JavaScript
var app = angular.module("myApp", []);
```

### ng-initディレクティブ
AngularJSアプリケーション開始時に変数を作成・初期化する
<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="js,result" data-user="engineerhikaru" data-slug-hash="abvQjQj" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="AngularJS_ng-init">
  <span>See the Pen <a href="https://codepen.io/engineerhikaru/pen/abvQjQj">
  AngularJS_ng-init</a> by engineerhikaru (<a href="https://codepen.io/engineerhikaru">@engineerhikaru</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

### ng-controllerディレクティブ
AngularJSアプリケーション変数を処理するコントローラーを追加する

```html:HTML
<div ng-app="myApp" ng-controller="myCtrl">
  <!-- AngularJS適用範囲 -->
</div>
```
```javascript:JavaScript
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {});
```


### ng-modelディレクティブ
入力値をスコープ内の変数にバインドする
<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="js,result" data-user="engineerhikaru" data-slug-hash="bGVQjXB" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="AngularJS_ng-model">
  <span>See the Pen <a href="https://codepen.io/engineerhikaru/pen/bGVQjXB">
  AngularJS_ng-model</a> by engineerhikaru (<a href="https://codepen.io/engineerhikaru">@engineerhikaru</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

### ng-repeat
配列を展開する
<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="js,result" data-user="engineerhikaru" data-slug-hash="jObQvWG" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="AngularJS_ng-repeat">
  <span>See the Pen <a href="https://codepen.io/engineerhikaru/pen/jObQvWG">
  AngularJS_ng-repeat</a> by engineerhikaru (<a href="https://codepen.io/engineerhikaru">@engineerhikaru</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

### ng-if
条件によってDOM内の要素を削除または再作成する
<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="js,result" data-user="engineerhikaru" data-slug-hash="MWazqbG" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="AngularJS_ng-if">
  <span>See the Pen <a href="https://codepen.io/engineerhikaru/pen/MWazqbG">
  AngularJS_ng-if</a> by engineerhikaru (<a href="https://codepen.io/engineerhikaru">@engineerhikaru</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

### ng-show
条件に基づいて要素を表示・非表示にする (反対はng-hide)
<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="js,result" data-user="engineerhikaru" data-slug-hash="pojQOPL" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="AngularJS_ng-show">
  <span>See the Pen <a href="https://codepen.io/engineerhikaru/pen/pojQOPL">
  AngularJS_ng-show</a> by engineerhikaru (<a href="https://codepen.io/engineerhikaru">@engineerhikaru</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

### ng-change
入力値が変更された時に、関数を実行する
<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="js,result" data-user="engineerhikaru" data-slug-hash="vYNQzeL" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="AngularJS_ng-change">
  <span>See the Pen <a href="https://codepen.io/engineerhikaru/pen/vYNQzeL">
  AngularJS_ng-change</a> by engineerhikaru (<a href="https://codepen.io/engineerhikaru">@engineerhikaru</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

### ng-switch
一致する条件に基づいて要素の制御をする
<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="js,result" data-user="engineerhikaru" data-slug-hash="vYNQzdG" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="AngularJS_ng-switch">
  <span>See the Pen <a href="https://codepen.io/engineerhikaru/pen/vYNQzdG">
  AngularJS_ng-switch</a> by engineerhikaru (<a href="https://codepen.io/engineerhikaru">@engineerhikaru</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

### ng-click
ボタンがクリックされた時に、関数を実行する
<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="js,result" data-user="engineerhikaru" data-slug-hash="abvQaXo" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="AngularJS_ng-click">
  <span>See the Pen <a href="https://codepen.io/engineerhikaru/pen/abvQaXo">
  AngularJS_ng-click</a> by engineerhikaru (<a href="https://codepen.io/engineerhikaru">@engineerhikaru</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

### ng-style
要素にスタイルを指定する
<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="js,result" data-user="engineerhikaru" data-slug-hash="eYpQPOa" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="AngularJS_ng-style">
  <span>See the Pen <a href="https://codepen.io/engineerhikaru/pen/eYpQPOa">
  AngularJS_ng-style</a> by engineerhikaru (<a href="https://codepen.io/engineerhikaru">@engineerhikaru</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

### ng-class
クラスを動的に設定する
<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="js,result" data-user="engineerhikaru" data-slug-hash="VwvVEWW" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="AngularJS_ng-class">
  <span>See the Pen <a href="https://codepen.io/engineerhikaru/pen/VwvVEWW">
  AngularJS_ng-class</a> by engineerhikaru (<a href="https://codepen.io/engineerhikaru">@engineerhikaru</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

### ng-submit
submitボタンがクリックされた時に、関数を実行する
<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="js,result" data-user="engineerhikaru" data-slug-hash="eYpQPBO" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="AngularJS_ng-submit">
  <span>See the Pen <a href="https://codepen.io/engineerhikaru/pen/eYpQPBO">
  AngularJS_ng-submit</a> by engineerhikaru (<a href="https://codepen.io/engineerhikaru">@engineerhikaru</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

### ng-bind
テキストデータを出力
<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="js,result" data-user="engineerhikaru" data-slug-hash="PoPxyQB" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="AngularJS_ng-bind">
  <span>See the Pen <a href="https://codepen.io/engineerhikaru/pen/PoPxyQB">
  AngularJS_ng-bind</a> by engineerhikaru (<a href="https://codepen.io/engineerhikaru">@engineerhikaru</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

### ng-cloak
AngularJSが制御を開始するまでコンテンツを表示しない
<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="js,result" data-user="engineerhikaru" data-slug-hash="NWGEOzJ" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="AngularJS_ng-cloak">
  <span>See the Pen <a href="https://codepen.io/engineerhikaru/pen/NWGEOzJ">
  AngularJS_ng-cloak</a> by engineerhikaru (<a href="https://codepen.io/engineerhikaru">@engineerhikaru</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

## フィルター

### uppercase
文字列を全て大文字にする (反対はlowercaseで全て小文字になる)
<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="html,result" data-user="engineerhikaru" data-slug-hash="yLYQRQy" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="AngularJS_filter-uppercase">
  <span>See the Pen <a href="https://codepen.io/engineerhikaru/pen/yLYQRQy">
  AngularJS_filter-uppercase</a> by engineerhikaru (<a href="https://codepen.io/engineerhikaru">@engineerhikaru</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

### number
数字をカンマ区切りにする (オプションで小数点以下何桁まで表示するかを設定可能)
<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="html,result" data-user="engineerhikaru" data-slug-hash="qBOQQdp" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="AngularJS_filter-number">
  <span>See the Pen <a href="https://codepen.io/engineerhikaru/pen/qBOQQdp">
  AngularJS_filter-number</a> by engineerhikaru (<a href="https://codepen.io/engineerhikaru">@engineerhikaru</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

### currency
数字を通貨形式にフォーマットする
<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="html,result" data-user="engineerhikaru" data-slug-hash="RwWqqrq" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="AngularJS_currency">
  <span>See the Pen <a href="https://codepen.io/engineerhikaru/pen/RwWqqrq">
  AngularJS_currency</a> by engineerhikaru (<a href="https://codepen.io/engineerhikaru">@engineerhikaru</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

### date
日付を指定した形式にフォーマットする
<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="html,result" data-user="engineerhikaru" data-slug-hash="bGVQQwb" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="AngularJS_filter-date">
  <span>See the Pen <a href="https://codepen.io/engineerhikaru/pen/bGVQQwb">
  AngularJS_filter-date</a> by engineerhikaru (<a href="https://codepen.io/engineerhikaru">@engineerhikaru</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

### orderBy
配列を昇順・降順に並べる
<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="html,result" data-user="engineerhikaru" data-slug-hash="bGVQQqG" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="AngularJS_orderBy">
  <span>See the Pen <a href="https://codepen.io/engineerhikaru/pen/bGVQQqG">
  AngularJS_orderBy</a> by engineerhikaru (<a href="https://codepen.io/engineerhikaru">@engineerhikaru</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

### limitTo
指定された数までの配列の中身を取り出す
<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="html,result" data-user="engineerhikaru" data-slug-hash="BaoGGdB" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="AngularJS_filter-limitTo">
  <span>See the Pen <a href="https://codepen.io/engineerhikaru/pen/BaoGGdB">
  AngularJS_filter-limitTo</a> by engineerhikaru (<a href="https://codepen.io/engineerhikaru">@engineerhikaru</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

### filter
指定された文字に一致する配列の中身を取り出す
<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="html,result" data-user="engineerhikaru" data-slug-hash="NWGEEaG" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="AngularJS_filter-filter">
  <span>See the Pen <a href="https://codepen.io/engineerhikaru/pen/NWGEEaG">
  AngularJS_filter-filter</a> by engineerhikaru (<a href="https://codepen.io/engineerhikaru">@engineerhikaru</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

## この内容について
この内容は、私が運営しているサイトに、より見やすく掲載しているので、よければそちらもご活用ください。
[AngularJSチートシート | コレワカ](https://korenarawakaru.com/tech/angular/cheatsheet)