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>
　　<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>

ループ処理

<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>