AngularJS入門を勉強した #Angular

JSのMVCフレームワーク
AngularJS.org

AngularJSイントロダクション

AngularJSはJavaScriptのフレームワークです．HTMLのページに<script>タグを使って加える事ができます．AngularJSは命令をつかってHTML属性を拡張し，そして式を使ってデータをHTMLに結びつけます．

AngularJSはJavaScriptのフレームワークです．

AngularJSはJavaScritpのフレームワークです．JavaScriptでかかれたライブラリです．
AngularJSはJavaScriptファイルとして配布されています，また，webページにいかのScriptタグを使って付け加えることができます．

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>

動かす

<!DOCTYPE html>
<html lang="ja" ng-app="myApp">
<head>
    <meta charset="UTF-8" />
    <title>AngularJS Playground!!!</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
</head>
<body>
    <h1>AngularJS Playground!!!</h1>
    <input type="text" ng-model="text">
    <p>{{ text }}</p>
</body>
</html>

連動する！すごい

コントローラ

<!DOCTYPE html>
<html lang="ja" ng-app="myApp">
<head>
    <meta charset="UTF-8" />
    <title>AngularJS Playground!!!</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
    <script src="myscript.js"></script>
</head>
<body>
    <h1>AngularJS Playground!!!</h1>
    <div ng-controller="mainCtrl">
        <ul>
            <li ng-repeat="user in users">{{user.name}}のスコアは{{user.score}}です．</li>
        </ul>
    </div>
</body>
</html>

angular.module("myApp", [])
  .controller("mainCtrl", function($scope) {
    // $scope.name = "Zero";
    $scope.users = [
        {"name": "sato", "score": 10},
        {"name": "tanaka", "score": 12},
        {"name": "satotanaka", "score": 99999}
    ];
});

コントローラのテンプレ

var myApp = angular.module("%AppName%", []); // AppName アプリケーションの名前 無いとコケる

myApp.controller("%CtrlName%", function($scope) { // CtrlName コントローラの名前
    $scope.x = 0;
});

フィルタ

表示のフィルタ

<p>{{user.name|upppercase}}</p> <!-- 大文字 -->
<p>{{user.score|number:2}}</p> <!-- 少数第x位まで表示 -->
<p>{{user.score|number}}</p> <!-- 3桁ごとにカンマ入る -->
<p>{{user.name| currency}}</p> <!-- ＄表記 -->
<p>{{today| date:yyyy-mm-dd}}</p> <!-- dateオブジェクトの整形 -->

<p>現在の時刻は{{now|date:"H時m分s秒"}}デス．</p>

ng-repeateのフィルタ

<li ng-repeat="user in users| limitTo: 5">{{user.name}}のスコアは{{user.score}}です．</li>
<li ng-repeat="user in users| orderBy: 'score'">{{user.name}}のスコアは{{user.score}}です．</li>

<input type="text" ng-model="query> <!-- クエリする -->
<li ng-repeat="user in users|filter:query">{{user.name}}のスコアは{{user.score}}です．</li>

<input type="text" ng-model="query.name> <!-- nameの部分のみを対象にクエリする -->
<li ng-repeat="user in users|filter:query">{{user.name}}のスコアは{{user.score}}です．</li>

ループ中で使える命令

<li ng-repeat="user in users">{{$index}}</li> <!-- 0から順に表示 -->
<li ng-repeat="user in users">{{$last}}</li> <!-- 最後の要素かどうか true/false -->
<li ng-repeat="user in users">{{$first}}</li> <!-- 最初の要素かどうか true/false -->
<li ng-repeat="user in users">{{$middle}}</li> <!-- 最後でも最初でもない要素かどうか true/false -->

コントローラの入れ子

<div ng-controller="mainCtrl">
  <ul>
    <li ng-repeat="user in users" ng-controller="userItemCtrl">{{user.name}}: {{user.score}}
    <button ng-click="inc()">+1</button></li>
  </ul>
</div>

var myApp = angular.module("myApp", []);

myApp.controller("mainCtrl", function($scope) {
  $scope.users = [
    {"name": "sato", "score": 12},
    {"name": "tanaka", "score": 9},
    {"name": "satotanaka", "score": 99999}
  ];
});

myApp.controller("userItemCtrl", function($scope) {
  $scope.inc = function() {
    $scope.user.score++;
  };
});

formの書き方

<form novalidate name="myForm" ng-submit="addUser()">

  <p>名前: <input type="text" name="name" ng-model="user.name" required ng-minlength="3" ng-maxlength="10"></p>

  <span ng-show="myForm.name.$error.required">Required!</span>
  <span ng-show="myForm.name.$error.minlength">Too Short!</span>
  <span ng-show="myForm.name.$error.maxlength">Too Long!</span>

  <p><input type="submit" value="追加"></p>
</form>

form を novalidateにする
ng-showはtrueのときだけ表示される要素
{フォーム名}.{要素名}.$error.{制約名} 制約違反のとき true
制約がいろいろあるので効果的に使おう！（リファレンス参照）
- text
- number
- email
- url
- radio
- select

<form novalidate name="myForm" ng-submit="addUser()">

  <p>Email:
    <input type="email" name="email" ng-model="user.email">
  </p>

  <span ng-show="myForm.email.$error.email">Invalid Email Address!</span>

  <p>Web:
    <input type="url" name="url" ng-model="user.url">
  </p>

  <span ng-show="myForm.url.$error.url">Invalid URL!</span>

  <p>規約に同意:
    <input type="checkbox" ng-model="user.agree" ng-true-value="'agree'" ng-false-value="'collision'">
  </p>

  <p>Phone:
    <input type="radio" ng-model="user.phone" value="iphone">iPhone
    <input type="radio" ng-model="user.phone" value="android">Android
  </p>

  <p>Note:
    <textarea ng-model="user.note" ng-max-Lngth="140"></textarea>
    {{140 - user.note.length}}
  </p>

  <p>Color:
    <select ng-model="user.color" ng-options="'Label:' + color for color in ['blue', 'red', 'okudake!']" ng-init="user.color='blue'"></select>
  </p>

  <p><input type="submit" value="追加"></p>
</form>