Re:Start

いまはディレクターやってます

Angular.jsを始めよう

JavaScript

どうやって、始めるか。といってもドットインストール駆動ですが（´∀｀）

まず、公式サイトがあります。ドットインストールを一通りおえたら、きっとここのチュートリアルとかにお世話になるんだと思われます。

はじめかた

  • 実行する為に必要な二つの事
<!-- ①ng-appと記述する -->
<html lang="ja" ng-app>
...
<head>
...
<!-- ②jsをオンラインで読み込む -->
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script>
...
</head>
  • ng-というのは、Angularのngから取ってるらしいので、ソースを読む時は注意すること！
  • ng-model でNAMEを指定すると、{{NAME}}の形で呼び出せるようになる。{{}}で囲むと簡単な数式の計算もできる
<body>
  <input type="text" ng-model="name">
  <p>こんにちは!{{name}}</p>
  <p>こんにちは!{{18 * name}}</p>
</body>

controller

  • 呼び出し元のhtmlでは、コントローラで実行したい範囲をdivで囲み、ng-controllerにjsで作成したファンクションを設定する
  • 指定したメソッドから、簡単にループさせてデータを取得することができる
  <div ng-controller="mainCtrl">
  	<p>{{users.length}} users.</p>
  	<ul>
  	  <li ng-repeat="user in users">
  	    {{user.name}} {{user.score}}
  	  </li>
  	</ul>
  </div>
  • javascript
  • $scopeで指定すると、呼び出しもとに変数やメソッドを返すようになる
var mainCtrl = function($scope) {
	$scope.users = [
	  {"name":"taguchi", "score":52.3},
	  {"name":"tanaka", "score":11.3},
	  {"name":"arai", "score":999},
	]
}

filter

  • 変数にフォーマット指定することができる
  • 下の場合、todayという変数は、別途js内でスコープに指定している
  • {{xx|xx}}という形式で記述する。詳細は本サイト参照
  	<p>{{35 * 999|number}}</p>
  	<p>{{35 * 999|currency}}</p>
  	<p>{{today|date:'yyyy-MM-dd'}}</p>
  • リストから出力する時に出力形式を変えたり、並び替えをしたり、結果を抽出したりすることもできる
  • リストにスタイルを設定すると行毎に色を変える事もさらりとできる
  • divにコントローラーを設定して、さらにその中のリストタグにコントローラーを指定することもできる。
    • この場合、中のコントローラでは外のコントローラの変数を自由に使える(ソースの読み方が面倒くさくなりそうだけど
    • それぞれにボタンを設定して、表示されている値を足して行く事も簡単にできる

form

  • validatorは、HTML5で標準的に用意されているバリデーションを外す為に、formタグに novalidate と記述する
  • その他、input タグに required や min-length など指定し、エラーメッセージも個別に設定できる
    <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">TooShort!</span>
        <span ng-show="myForm.name.$error.maxlength">TooLong!</span>
      </p>
      <p><input type="submit" value="add"></p>
    </form>
  • checkbox オンとオフでそれぞれ登録する値も指定できる
  • radioボタン modelの値を合わせる事でグルーピング。値はname
  • textareaも使用可能。
  • モデル名.lengthで入力された文字数を取得できるので利用すると便利かも。
  • selectはちょっと変わっているが、optionsに表示したい値を入れれば基本はok。初期に何を選択させた状態にするかも指定できる
  • その他、何が設定できるかなど詳細を知りたい場合は、公式サイトのドキュメントを参照するとよい。

test

  • テストもしやすいように用意されている(ここはDLしないとだめぽ？)

参考URL

公式サイト