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>
ループ処理
<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>
{{week.length}} days
- {{day.jp}} {{day.en}}
