新卒エンジニアが初めてAngularJSを触ってみた【form周りとHTML周りを触ってみた】

どうも[さいそん](https://twitter.com/tak723sio)です。
AngularJSにほとんど触っと事ない新卒エンジニアです。
前回は
[新卒エンジニアが初めてAngularJSを触ってみた　導入編](http://qiita.com/saison/items/77bf3ab9efb44080abbb)
ということで、Yeomanを使ってプロジェクトのひな形を作りました。

今回は実際にサービスを作る上で触れる機会が多いであろう __Form周りとHTML周り__ を見ていこうと思います。

## 前提
[前回の記事](http://qiita.com/saison/items/77bf3ab9efb44080abbb)で作った環境でやっていきます。

## プロジェクトのひな形を見てみる

```
├── (gulpとかnode_modulesとか　今回は省略) 
└── src
    ├── app
    │   ├── components
    │   │   └── navbar
    │   │       ├── navbar.controller.js
    │   │       └── navbar.html
    │   ├── index.js
    │   ├── index.scss
    │   ├── main
    │   │   ├── main.controller.js
    │   │   ├── main.controller.spec.js
    │   │   └── main.html
    │   └── vendor.scss
    ├── assets
    │   └── images
    │       └── (各種アイコン)
    ├── favicon.ico
    └── index.html
```


基本的に見ていくのはsrcの中身です。
`App` ディレクトリの中身に各機能とページをフォルダごとに管理する感じですね。
例えば「ユーザーリスト」を追加するとかなったら

```
└── src
    ├── app
    │   ├── components
    │   │   └── navbar
    │   │       ├── navbar.controller.js
    │   │       └── navbar.html
    │   ├── index.js
    │   ├── index.scss
    │   ├── main
    │   │   ├── main.controller.js
    │   │   ├── main.controller.spec.js
    │   │   └── main.html
	(↓ここから)
    │   ├── user-list
    │   │   ├── user-list.controller.js
    │   │   ├── user-list.controller.spec.js
    │   │   └── user-list.html
	(↑ここまで)
    │   └── vendor.scss
    ├── assets
    │   └── images
    │       └── (各種アイコン)
    ├── favicon.ico
    └── index.html
```

的な感じですかね。

## Formのページを作ってみる
### ディレクトリ
```
└── src
    ├── app
    │   ├── components
    │   │   └── navbar
    │   │       ├── navbar.controller.js
    │   │       └── navbar.html
    │   ├── form-data-binding
    │   │   ├── form-data-binding.controller.js
    │   │   └── form-data-binding.html
    │   ├── index.js
    │   ├── index.scss
    │   └── vendor.scss
    ├── assets
    │   └── images
    │       └── (各種アイコン)
    ├── favicon.ico
    └── index.html
```
とりあえず、メインは消しました(DEMO的な感じでしたので)
今回は```form-data-binding```というディレクトリにいろいろ作っていきます。
### ルーティング
前回UI-Routerを選択しましたので、Angularの純正の書き方とは異なります。
ただ、今回はform周りの話なのでUI-Routerの話はまた別の機会に。

``` javascript:src/app/index.js
'use strict';

angular.module('saisonApp', [
  'ngAnimate',
  'ngCookies',
  'ngTouch',
  'ngSanitize',
  'ngResource',
  'ui.router'
]).config(function ($stateProvider, $urlRouterProvider) {
  $stateProvider
    .state('home', {
      url: '/',
      templateUrl: 'app/form-data-binding/form-data-binding.html',
      controller: 'FormDataBindingCtrl'
    });

  $urlRouterProvider.otherwise('/');
});

```
変わっているのは```$stateProvider```の中身です。(詳しくは別の回で)
### 実際にFormを書いてみよう
`index.html`を見ていただくとわかると思うのですが、
`<html>`や`<body>`などのタグが書かれていて、ページの中身は
`<div ui-view></div>`というところに読み込まれて表示される形になっています。
読み込むHTMLは上のルーティング時に書いた`templateUrl`で指定したものが読み込まれます。
というわけで、

```html:app/form-data-binding/form-data-binding.html
<div class="container">
  <div class="page-header">
    <h1>新卒エンジニアが初めてAngularJSを触ってみた<small>form周りとHTML周りを触ってみた</small></h1>
  </div>
  <form>
    <div class="form-group">
      <label>Name</label>
      <input type="text" class="form-control" placeholder="name">
    </div>
    <div class="form-group">
      <label>E-Mail</label>
      <input type="email" class="form-control" placeholder="e-mail">
    </div>
    <button type="submit" class="btn btn-default">Submit</button>
  </form>
</div>

```
これを基板のHTMLとして使っていきます。
特に何を書いたわけでもなく今まで通りのHTMLです。
### とりあえず、見てみる
```shell
$ gulp serve
```
こちらのコマンドを叩くと、変更をウォッチしながらgulpがサーバーを用意してくれて、見ることができます。

## AngularでFormを使う
フォームを使うにあたって、できなきゃいけないのが「データの取得」です。
### ng-model
上記にHTMLの名前を入力する部分。
普段なら`name="username"`なんてやったりしますが、Angularでは

```html:app/form-data-binding/form-data-binding.html
<input type="text" class="form-control" placeholder="name" ng-model="user.name">
```

`ng-model="user.name"`という属性を追加してあげるとAngular側でデータを取得することができます。
もう1つの方は`ng-model="user.email"`としました。
### 実際にデータを見てみる
```html:app/form-data-binding/form-data-binding.html
<pre>{{user|json}}</pre>
```
ボタンの下に上記のタグを追加して、テキストフィールドに文字を入力してみてください。
ボタンの下に見慣れたJSON形式でデータが表示されます。
また、変更したらすぐデータも変わります。
これがAngularでよく言われる __双方向データバインディング__ と言われるものです。
簡単に説明するとこう。

>モデルが変更されると、その変更がビューに反映され、その逆もまた然りです。

双方向データバインディングについては[こちら](http://js.studio-kingdom.com/angularjs/guide/databinding)を御覧ください
### じゃあこのデータをコントローラーで扱うには？
AngularJSでは、`$scope`というオブジェクトを使用しテンプレートと連携をして、テンプレート内に記述した変数の設定やメソッドの起動などを行うことができます。
$scopeは、モデルの監視などが来ます。
試しに、「ボタンをクリックする」をメソッドの発火タイミングにして、先ほどのmodelの中身を見てみましょう！

```html:app/form-data-binding/form-data-binding.html
<div class="container">
  <div class="page-header">
    <h1>新卒エンジニアが初めてAngularJSを触ってみた<small>form周りとHTML周りを触ってみた</small></h1>
  </div>
  <form>
    <div class="form-group">
      <label>Name</label>
      <input type="text" class="form-control" placeholder="name" ng-model="user.name">
    </div>
    <div class="form-group">
      <label>E-Mail</label>
      <input type="email" class="form-control" placeholder="e-mail" ng-model="user.email">
    </div>
    <button type="submit" class="btn btn-default" ng-click="btnClick()">Submit</button>
    <pre>{{user|json}}</pre>
  </form>
</div>


```

```javascript:app/form-data-bindingform-data-binding.controller.js
'use strict';

angular.module('saison').controller('FormDataBindingCtrl', function ($scope) {
  $scope.btnClick = function () {
    console.log($scope.user);
  }
});

```
テキストボックスに入れた値がlogとして出力されたのがわかると思います。

このようにして、Formのデータを扱っていきます。
### ng-xxxについて
さて、今回

- ng-model
- ng-click

を紹介しましたが、他にも多くのものがあります。他にも

- ng-show
- ng-if
- ng-change

などなど、多くのものがあります。詳しくは公式ドキュメントを見てください。

## まとめ
うまいこと説明できなかった気がしますが、今回はForm周りを扱ってみる感じでやっていきました。
次回は繰り返してデータを表示させる「ng-repeat」について見ていこうと思います。