AngularJSチートシート TECH

AngularJSとは

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

AngularJS公式サイト

基本文法

AngularJSはAngularJSモジュールを用いて、実装します

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

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

変数・型

変数

変数の代入は$scope.〇〇で、変数の出力は{{}}を使います。

<div ng-app="myApp" ng-controller="myCtrl">
  <p>{{ hoge }}</p>
</div>

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

配列変数

値を配列にして、変数として扱うことができます。

<div ng-app="myApp" ng-controller="myCtrl">
  <p>{{ hoge[0] }}</p>
  <p>{{ hoge[1] }}</p>
</div>

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

連想配列変数

配列の値に、キーと呼ばれる呼び出す時の名前を設定します。

<div ng-app="myApp" ng-controller="myCtrl">
  <p>{{ hoge.world }}</p>
  <p>{{ hoge.japan }}</p>
</div>

var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
  $scope.hoge = {"world": "Hello World", "japan": "Hello Japan"};
});

ディレクティブ

ng-app

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

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

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

ng-init

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

<div ng-app="myApp" ng-init="hoge = 'Hello World'">
  <p>{{ hoge }</p>
</div>

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

ng-controller

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

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

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

ng-model

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

<div ng-app="myApp" ng-controller="myCtrl">
  <input type="text" ng-model="hoge">
  <p>{{ hoge }}</p>
</div>

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

ng-repeat

配列を展開する

<div ng-app="myApp" ng-controller="myCtrl">
  <ul ng-repeat="item in items">
    <li>{{ item.name }}</li>
  </ul>
</div>

var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
  $scope.items = [
    {"number": 1, "name": "アイテム1"},
    {"number": 2, "name": "アイテム2"},
  ];
});

ng-if

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

<div ng-app="myApp" ng-controller="myCtrl">
  <input type="checkbox" ng-model="hoge">
  <div ng-if="hoge">
    <p>Hello World</p>
  </div>
</div>

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

ng-show

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

<div ng-app="myApp" ng-controller="myCtrl">
  <input type="checkbox" ng-model="hoge">
  <div ng-show="hoge">
    <p>Hello World</p>
  </div>
</div>

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

ng-change

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

<div ng-app="myApp" ng-controller="myCtrl">
  <input type="text" ng-change="myFunc()" ng-model="hoge">
  <p>{{ result }}</p>
</div>

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

ng-switch

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

<div ng-app="myApp" ng-controller="myCtrl">
  <select ng-model="switchItem">
    <option value="アイテム1">アイテム1</option>
    <option value="アイテム2">アイテム2</option>
  </select>
  <div ng-switch="switchItem">
    <div ng-switch-when="アイテム1"><p>アイテム1を選択中</p></div>
    <div ng-switch-when="アイテム2"><p>アイテム2を選択中</p></div>
    <div ng-switch-default><p>選択されていません</p></div>
  </div>
</div>

var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
  $scope.switchItem = "アイテム1";
});

ng-click

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

<div ng-app="myApp" ng-controller="myCtrl">
  <button ng-click="myFunc()">カウント {{ count }}</button>
</div>

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

ng-style

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

<div ng-app="myApp" ng-controller="myCtrl">
  <div ng-style="myStyle">
    <p>Hello World</p>
  </div>
</div>

var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
  $scope.myStyle = {
    "background": "red",
    "color": "white",
    "padding": "20px",
  };
});

ng-class

クラスを動的に設定する

<div ng-app="myApp" ng-controller="myCtrl">
  <input type="radio" ng-model="classValue" value="red" checked>
  <input type="radio" ng-model="classValue" value="blue">
  <div ng-class="classValue">
    <p>Hello World</p>
  </div>
</div>

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

ng-submit

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

<div ng-app="myApp" ng-controller="myCtrl">
  <form ng-submit="myFunc()">
    <input type="text" ng-model="formText">
    <input type="submit">
  </form>
  <p ng-show="result">{{ formText }}の内容で送信されました</p>
</div>

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

ng-bind

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

<div ng-app="myApp" ng-controller="myCtrl">
  <p ng-bind="hoge"></p>
</div>

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

ng-cloak

HTMLデータを出力

<div ng-app="myApp">
  <p ng-cloak>{{ "Hello World" }}</p>
</div>

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

フィルター

uppercase

文字を大文字・小文字にする

<div ng-app="myApp">
  <p>{{ hoge | uppercase }}</p>
  <p>{{ hoge | lowercase }}</p>
</div>

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

number

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

<div ng-app="myApp">
  <p>{{ hoge | number }}</p>
  <p>{{ hoge | number : 3 }}</p>
</div>

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

currency

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

<div ng-app="myApp">
  <p>{{ price | currency }}</p>
  <p>{{ price | currency : "¥" }}</p>
</div>

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

date

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

<div ng-app="myApp">
  <p>{{ today | date }}</p>
  <p>{{ today | date : "yyyy-MM-dd" }}</p>
</div>

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

orderBy

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

<div ng-app="myApp">
  <ul ng-repeat="item in items | orderBy: 'point' ">
    <p>{{ item.name }}: {{ item.point }}</p>
  </ul>
  <ul ng-repeat="item in items | orderBy: '-point' ">
    <p>{{ item.name }}: {{ item.point }}</p>
  </ul>
</div>

var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
  $scope.items = [
    {"name": "アイテム1", "point": 200},
    {"name": "アイテム2", "point": 300},
    {"name": "アイテム3", "point": 100},
  ];
});

limitTo

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

<div ng-app="myApp">
  <ul ng-repeat="item in items | limitTo: 3 ">
    <p>{{ item.name }}: {{ item.point }}</p>
  </ul>
</div>

var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
  $scope.items = [
    {"name": "アイテム1", "point": 200},
    {"name": "アイテム2", "point": 300},
    {"name": "アイテム3", "point": 100},
    {"name": "アイテム4", "point": 400},
    {"name": "アイテム5", "point": 500},
  ];
});

filter

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

<div ng-app="myApp">
  <input type="text" ng-model="query" placeholder="全てのデータに一致">
  <ul ng-repeat="item in items | filter:query">
    <p>{{ item.name }}: {{ item.price }}円</p>
  </ul>
  <input type="text" ng-model="query2.name" placeholder="一部のデータに一致">
  <ul ng-repeat="item in items | filter:query2">
    <p>{{ item.name }}: {{ item.price }}円</p>
  </ul>
</div>

var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
  $scope.items = [
    {"name": "ラーメン", "price": 900},
    {"name": "チャーハン", "price": 700},
    {"name": "餃子", "price": 300},
  ];
});
このページをTwitterで共有する
CSSをHTMLに適用する方法【3パターン】 おすすめテキストエディタ&IDE