AngularJS入門を勉強した


JSのMVCフレームワーク
[AngularJS.org](http://angularjs.org)

## AngularJSイントロダクション

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

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

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

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

## 動かす

```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>
</head>
<body>
    <h1>AngularJS Playground!!!</h1>
    <input type="text" ng-model="text">
    <p>{{ text }}</p>
</body>
</html>
```

連動する！すごい

##コントローラ

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

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

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

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

## フィルタ
```html:表示のフィルタ
<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>
```

```html: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>
```

## ループ中で使える命令
```html
<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 -->
```

## コントローラの入れ子
```html
<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>
```
```JavaScript
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の書き方

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

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