どうもさいそんです。
AngularJSにほとんど触っと事ない新卒エンジニアです。
前回は
新卒エンジニアが初めてAngularJSを触ってみた 導入編
ということで、Yeomanを使ってプロジェクトのひな形を作りました。
今回は実際にサービスを作る上で触れる機会が多いであろう Form周りとHTML周り を見ていこうと思います。
前提
前回の記事で作った環境でやっていきます。
プロジェクトのひな形を見てみる
├── (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の話はまた別の機会に。
'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
で指定したものが読み込まれます。
というわけで、
<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です。
とりあえず、見てみる
$ gulp serve
こちらのコマンドを叩くと、変更をウォッチしながらgulpがサーバーを用意してくれて、見ることができます。
AngularでFormを使う
フォームを使うにあたって、できなきゃいけないのが「データの取得」です。
ng-model
上記にHTMLの名前を入力する部分。
普段ならname="username"
なんてやったりしますが、Angularでは
<input type="text" class="form-control" placeholder="name" ng-model="user.name">
ng-model="user.name"
という属性を追加してあげるとAngular側でデータを取得することができます。
もう1つの方はng-model="user.email"
としました。
実際にデータを見てみる
<pre>{{user|json}}</pre>
ボタンの下に上記のタグを追加して、テキストフィールドに文字を入力してみてください。
ボタンの下に見慣れたJSON形式でデータが表示されます。
また、変更したらすぐデータも変わります。
これがAngularでよく言われる 双方向データバインディング と言われるものです。
簡単に説明するとこう。
モデルが変更されると、その変更がビューに反映され、その逆もまた然りです。
双方向データバインディングについてはこちらを御覧ください
じゃあこのデータをコントローラーで扱うには?
AngularJSでは、$scope
というオブジェクトを使用しテンプレートと連携をして、テンプレート内に記述した変数の設定やメソッドの起動などを行うことができます。
$scopeは、モデルの監視などが来ます。
試しに、「ボタンをクリックする」をメソッドの発火タイミングにして、先ほどのmodelの中身を見てみましょう!
<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>
'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」について見ていこうと思います。