AngularJS

概要

JavaScriptのMVMフレームワーク
MVW(Model-View-Whatever)
正確にはAngularJSはMVVMフレームワーク
AngularJSではMVCの「C」が置き換わった「VM(View-Model)」部分が自動化される。
クライアント側動作専用
CRUD機能有り
・フォーム入力を同一ページに即時表示(ポストバックやボタン押下の必要無し)
入力チェック
・検索
・ソート
等をクライアント側だけの機能で実現できる

使い方

<!–ライブラリのCDN参照–>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
ファイルを参照する場合はAngularJS公式サイトからダウンロード
https://angularjs.org/

即時表示

<html ng-app>
  <script Angulur.JSライブラリの参照 </script>
  <p><input type="text" ng-model="name"></p>
  <p>{{name}}</p>
</html>


↑ に入力した文字が ↓ に即時表示される。

{{name}}

入力チェック

<html ng-app>
  <form novalidate name="myForm">
  名前:<input type="text" name="txtCheck"
    ng-model="check"
    required
    ng-minlength="2"
    ng-maxlength="5">
    
    <p ng-show="myForm.txtCheck.$error.required">未入力</p>
    <p ng-show="myForm.txtCheck.$error.minlength">2文字未満</p>
    <p ng-show="myForm.txtCheck.$error.maxlength">5文字を超えている</p>
  </form>
</html>

名前:

↑ の入力チェック結果が ↓ に即時表示される。

未入力

2文字未満

5文字を超えている


ループ処理

<html ng-app>
  <script>
    var loopCtrl = function($scope) {
      $scope.week = [
        {"jp":"月","en":"Monday"},
        {"jp":"火","en":"Tuesday"},
        {"jp":"水","en":"Wednesday"},
        {"jp":"木","en":"Thursday"},
        {"jp":"金","en":"Friday"},
        {"jp":"土","en":"Saturday"},
        {"jp":"日","en":"Sunday"}
      ];
    }
  </script>
  <div ng-controller="loopCtrl">
    <p>{{week.length}} days</p>
    <ul>
      <li ng-repeat="day in week">{{day.jp}} {{day.en}}</li>
    </ul>
  </div>
</html>


ng-controller=”loopCtrl”>

{{week.length}} days

  • {{day.jp}} {{day.en}}