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


Follow me!