LoginSignup
9

More than 5 years have passed since last update.

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

Last updated at Posted at 2015-06-02

どうもさいそんです。
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の話はまた別の機会に。

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で指定したものが読み込まれます。
というわけで、

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です。

とりあえず、見てみる

$ gulp serve

こちらのコマンドを叩くと、変更をウォッチしながらgulpがサーバーを用意してくれて、見ることができます。

AngularでFormを使う

フォームを使うにあたって、できなきゃいけないのが「データの取得」です。

ng-model

上記にHTMLの名前を入力する部分。
普段ならname="username"なんてやったりしますが、Angularでは

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"としました。

実際にデータを見てみる

app/form-data-binding/form-data-binding.html
<pre>{{user|json}}</pre>

ボタンの下に上記のタグを追加して、テキストフィールドに文字を入力してみてください。
ボタンの下に見慣れたJSON形式でデータが表示されます。
また、変更したらすぐデータも変わります。
これがAngularでよく言われる 双方向データバインディング と言われるものです。
簡単に説明するとこう。

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

双方向データバインディングについてはこちらを御覧ください

じゃあこのデータをコントローラーで扱うには?

AngularJSでは、$scopeというオブジェクトを使用しテンプレートと連携をして、テンプレート内に記述した変数の設定やメソッドの起動などを行うことができます。
$scopeは、モデルの監視などが来ます。
試しに、「ボタンをクリックする」をメソッドの発火タイミングにして、先ほどのmodelの中身を見てみましょう!

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>


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」について見ていこうと思います。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
9