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}}
Follow me!
