外部からJSONでリストを取得して画面に表示する

AngularJS

タイトル通りだけど、外部のJSONファイルにアクセスして取得したオブジェクトを画面表示してみる。
出来上がりはこんな感じ

f:id:ats337:20140223214225p:plain

まずは、以下のようなJSONファイルを用意する。

userlist.json

{"userList" : [
        {"user" : {
                "id": "U0001",
                "name":"湯沢太一",
                "mailAddress":"yuzawa@sample.com"
        }},
        {"user": {
                "id":"U0002",
                "name":"小山雄一郎",
                "mailAddress":"koyama@sample.com"
        }}
]}

続いて実装。
外部JSONファイルを読み込むためにngResourceを使用するので、
angular-resource.min.jsを読み込むようにしておく。
更に、

angular.module('myApp', ['ngResource'])

でngResourceを取り込んでおく。

次にJavaScript実装
UserControllerというコントローラクラスを作成し、
$resourceを用いてuserlist.jsonファイルを読み込む。
読み込み後は、コールバック関数function(data)の中で、取得したJSONオブジェクトからuserListを取得している。

myApp.controller('UserController',
        function UserController($scope, $resource) {
            $scope.userList = null;

            $scope.getUserList = function() {
                $resource("userlist.json").get(
                        function(data) {
                            $scope.userList = data.userList;
                        });
            };
        }
);

最後のHTML

<div ng-controller="UserController">
    <table class="table table-striped" ng-init="getUserList()">
        <tr>
            <th>ID</th>
            <th>名前</th>
            <th>メールアドレス</th>
            <th>&nbsp;</th>
        </tr>
        <tr ng-repeat="user in userList">
            <td>{{user.user.id}}</td>
            <td>{{user.user.name}}</td>
            <td>{{user.user.mailAddress}}</td>
            <td>&nbsp;</td>
        </tr>
    </table>
</div>

ng-initで、初期表示時にUserControllerクラスのgetUserList関数を呼び出すように設定する。
更に、ng-repeatを用いて、userListをループして行を構成している。

Bootstrapでformを横に配置

Bootstrap

f:id:ats337:20140222022949p:plain

上記のようにformを横に配置する場合はform-inlineクラスを使用すればよい。

<form class="form-inline" role="form">
    <div class="form-group">
        <input type="text" placeholder="検索" id="searchWord" class="form-control">
    </div>
    <button type="button" class="btn btn-default">
        <span class="glyphicon glyphicon-search">検索
    </button>
    <button type="button" class="btn btn-default">
        <span class="glyphicon glyphicon-th-large">表示
    </button>
    <button type="button" class="btn btn-default">
        <span class="glyphicon glyphicon-plus">追加
    </button>
</form>

AngularJSのネームスペース

AngularJS

今回はAngularJSのネームスペースの話をします。
AngularJSのネームスペースには以下の種類があります。

ネームスペース インクルードするJSファイル 説明
ng(core module なし(デフォルトで使用可能) デフォルトで提供されるAngularJSのコアコンポーネントが含まれる。
ngRoute angular-route.js URLルーティングを有効にするために使用する。hashbangとHTML5のプッシュステートの両方をサポートする。
ngAnimate angular-animate.js アニメーションを有効にするために使用する。ngAnimateがインクルードされている場合、種々のコアngディレクティブはアプリケーションにアニメーションのフックを提供する。アニメーションはCSSトランジション/アニメーションやJavaScriptのコールバックを使用して定義される。
ngResource angular-resource.js REST APIにデータ送信するために使用する。
ngCookies angular-cookies.js Cookieを管理するために使用する。
ngTouch angular-touch.js モバイルブラウザ/デバイス用に開発するために使用する。
ngSanitize angular-sanitize.js アプリケーション内のHTMLデータを安全に解析・操作するために使用する。
ngMock anguar-mocks.js 単体テスト内のモック用のmodule、factory、service、providerをインジェクトするために使用する。


Angularのネームスペースは衝突を避けるために、接頭辞としてpublicなオブジェクトには$を、privateなオブジェクトには$$を付けています。
$や$$を接頭辞としないようにしましょう。

AngularJSをはじめてみる

AngularJS

久々の更新です。
今日からしばらくAngularJSの勉強をしていこうと思います。

http://angularjs.org/
AngularJSはGoogleによって開発されているJavaScriptのライブラリです。

AngulaeJSの目的はMVCを備えたブラウザベースのアプリケーションの開発とテスト両方を容易にすることだそうです。

まずは、AngularJSのトップページを読み進めながら、最初の一步を学んでいきましょう。

最初にAngularJSを用いたコードを示します。
HTMLドキュメントとして、以下を記入してブラウザで開いてください。
(ソースコードはAngularJS公式サイトより引用)

<!doctype html>
<html ng-app><--①ng-app宣言 -->
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js"></script><!-- ②AngularJSのインクルード -->
  </head>
  <body>
    <div>
      <label>Name:</label>
      <input type="text" ng-model="yourName" placeholder="Enter a name here"><!-- ③ng-modelの宣言 -->
      <hr>
      <h1>Hello {{yourName}}!</h1><!-- ④変数のバインド -->
    </div>
  </body>
</html>

1つずつ見ていきます。

①ng-appの宣言
AngularJSを適用したいタグ要素の属性として、「ng-app」を設定することによって、
設定したタグの中はAngularJSの機能を使うことができます。

②AngularJSのインクルード
JavaScriptライブラリの宣言です。
もちろん、ダウンロードしたAngularのJavaScriptファイルを読み込むこともできます。

③ng-modelの宣言
ng-modelが何かは置いておいて、ここではこのテキストボックスに"yourName"というプロパティを定義した・・・・くらいに考えればよいです。

④変数のバインド
プロパティを{{}}で囲むことで、そのプロパティにアクセスできます。
ここでは、テキストボックスに入力した文字列が入ってくることになります。

以下が実行イメージになります。

f:id:ats337:20140129015611p:plain

Backbone.jsのModelクラス(attributes)

Backbone.js

今回はattributesについてです。
まずはソースコードを示します。

<html>
<head>
<script type="text/javascript" src="../js/jquery-1.10.1.js"></script>
<script type="text/javascript" src="../js/underscore.js"></script>
<script type="text/javascript" src="../js/backbone.js"></script>
<script type="text/javascript">
var Player = Backbone.Model.extend({
	
});

$(document).ready(function() {
	player = new Player({
		id : 1,
		name : "田中一郎",
		age : "29",
		email : "xxxxx@abc.com"
	});
	
	console.log(player.attributes);
	
	var tmp = player.attributes;
	console.log(tmp.name);
	console.log(tmp["name"]);
});
</script>
</head>
<body>
</body>
</html>

結果は以下のようになります。

Object {id: 1, name: "田中一郎", age: "29", email: "xxxxx@abc.com"}
田中一郎
田中一郎

attributesを使用すると、Modelクラスをオブジェクトにコンバートするようです。

Backbone.jsのModelクラス(idAttrbute)

Backbone.js

今回はidAttributeについてです。
idAttributeはidプロパティが指すプロパティを指定するためのプロパティです。

以下にソースコードを示します。

<html>
<head>
<script type="text/javascript" src="../js/jquery-1.10.1.js"></script>
<script type="text/javascript" src="../js/underscore.js"></script>
<script type="text/javascript" src="../js/backbone.js"></script>
<script type="text/javascript">
var Player = Backbone.Model.extend({
	idAttribute : "subid" // -①
});

$(document).ready(function() {
	player = new Player({
		subid : 1, // - ②
		name : "田中一郎"
	});
	
	console.log("player [id : " + player.id + ", subid : " + player.subid + " name : " + player.get("name") + "]"); // - ③
});
</script>
</head>
<body>
</body>
</html>

結果は以下のようになります。

player [id : 1, subid : undefined name : 田中一郎]

①ではidAttributeとして"subid"というプロパティを指定しています。
これで、idで参照するプロパティが"subid"になります。

②では"subid"に"1"を設定しています。

更に③ではplayer.idで、playerクラスのsubidプロパティを参照できることを示しています。
ちなみに、player.subidでは参照できません。

Backbone.jsのModelクラス④

Backbone.js

今回はidとcidについてです。
これらは関数ではなくプロパティであり、特別な意味を持つ値のようです。

idは開発時に任意に設定できる値、
cidはプログラムが勝手に生成します。

以下にソースコードを示します。

<html>
<head>
<script type="text/javascript" src="../js/jquery-1.10.1.js"></script>
<script type="text/javascript" src="../js/underscore.js"></script>
<script type="text/javascript" src="../js/backbone.js"></script>
<script type="text/javascript">
var Player = Backbone.Model.extend({
});

$(document).ready(function() {
	player = new Player({
		id : 1,
		name : "田中一郎"
	});
	
	player2 = new Player({
		id : 2,
		name : "中村学"
	});
	
	console.log("player [ cid : " + player.cid + ", id : " + player.id + ", name : " + player.name + "]");
	console.log("player2 [ cid : " + player2.cid + ", id : " + player2.id + ", name : " + player2.name + "]");
});
</script>
</head>
<body>
</body>
</html>

結果は以下のようになります。

player [ cid : c1, id : 1, name : undefined]
player2 [ cid : c2, id : 2, name : undefined]

Playerクラスを2クラス作成して、それぞれidとnameを設定します。
cidは設定していませんが、値が取れてきています。
idとcidはplayer.idのように取得できますが、name属性は同様に取得できません。
この場合、name属性はplayer.get("name")として取得することになります。