【AngularJS】　入門

Javascript AngularJS

全部ドットインストールの内容。
AngularJS入門 (全12回) - プログラミングならドットインストール


AngularJSの特徴

<html lang="ja" ng-app>

と書く。ngはAngularのng。

そして、例えば

<input type = "text" ng-model="name">
<p>こんにちは{{name}}<p>

と書くと、動的にこんにちはのあとにnameが表示される。
つまり、HTMLの要素をmodel、つまりデータとしてそのままviewに表示できる。
{{}}はjsの式も評価できるので、{{5*3}}とかもok。
バリデーションルールもけっこうつけられる。
formの中の書き方はhtmlとは違う。actionとか無いし。


◼︎ディレクティブ ng- なんちゃら
ng-model
ng-controller
ng-submit
ng-repeat
ng-click
ng-class-even
ng-class-odd
ng-show

◼︎Controllerを使ってみる
headの中にscriptタグにファイル名書く
divで「ng-controller」を書く
その中で使いたいやつ書く
ループはng-repeat

js側でvar mainCtrlと変数名にして書く。
変数名=コントローラ名みたいなノリかな。

◼︎フィルターをつかう
| を入れる。

<!-- 全部大文字 -->
{{user.name|uppercase}}

◼︎ループで使えるフィルター

<!-- 入力した文字に該当するものだけ表示 query.nameにすると対象がnameだけ-->
<input type="text" ng-model="query.name">
<li ng-repeat="user in users|filter:query">

◼︎ループで使える便利なフィルター

<li ng-repeat = "user in users" ng-class-even="'even'" ng-class-odd="'odd'">
{{$index}} {{$first}} {{$last}} {{$middle}} {{user.name}} {{user.age}}
</li>


◼︎コントローラーのネストとイベント
ループを入れ子にしたときの挙動とクリックイベントについて
//index.html

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

//myscript.js

var mainCtrl = function($scope){
    $scope.users = [
        {"name":"hoge", "age":10},
        {"name":"Fuga", "age":11},
    ];
}

var userItemCtrl = function($scope){
    $scope.increment = function(){
        $scope.user.age++;
    }
}

$scopeってなんだよと思っていたが、viewにデータを渡したり、viewから発生したイベントを監視するなど「viewとのやりとりを行うことができる特別なオブジェクト」らしい。

◼︎フォームの基本

<div ng-controller="mainCtrl">
<form name="myName" ng-submit="addUser()">
    <p>Name:<input type="text" name="name" ng-model="user.name"></p>
    <p><input type="submit" value="add"></p>
</form>
<!--    debug-->
<pre>{{user|json}}</pre>
</div>

◼︎エラーメッセージを表示する
novalidate をつける。これはHTML5のバリデーションを無効化するという意味。
なので、AngularJSでバリデーションを使いたいときは必須。

<form novalidate name="myForm" ng-submit="addUser()">
    <p>Name:
    <input type="text" name="name" ng-model="user.name" required ng-minlength="5" ng-maxlength="8">
    <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>
    <p><input type="submit" value="add"></p>
</form>

◼︎number, email, urlといったフォーム部品の設置

<form novalidate name="myForm" ng-submit="addUser()">
    <p>Name:
    <input type="text" name="name" ng-model="user.name" required ng-minlength="5" ng-maxlength="8">
    <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>
    <p>Score:
       <input type="number" name="score" ng-model="user.score">
    </p>
    <p>Email:
       <input type="email" name="email" ng-model="user.email">
       <span ng-show="myForm.email.$error.email">Not valid email!</span>
    </p>      
    <p>Web: 
    <input type="url" name="url" ng-model="user.url">
      <span ng-show="myForm.url.$error.url">Not valid web url!</span>
    </p>
    <p><input type="submit" value="add"></p>
</form>

◼︎checkbox, radio, textareaといったフォーム部品の設置

<form novalidate name="myForm" ng-submit="addUser()">
    <p>18+:
        <input type="checkbox" ng-model="user.adult" ng-true-value="adult" ng-false-value="child">
    </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>Memo:
    <textarea ng-model="user.memo" ng-maxlength="140"></textarea>{{140-user.memo.length}}
    </p>
</form>