この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。
viewとかテストを試してみる
さて、前回はYeomanでAngularJSアプリのひな形を作成しました。 今回はこれをベースにAngularJSの機能を試していきましょう。
環境構築方法
今回使用した動作環境は前回と同じく、以下のとおりです。 前回を参考に環境をセットアップしてAngularJSのアプリひな形を作成してください。
- OS : MacOS X 10.7.5
- Node.js : v0.10.8
ついでに、コンソールでserverタスクを実行しておき、ファイルの変更がすぐに反映されるようにしましょう。
% cd /path/your/angularApp
% grunt server
ng-repeatでリスト表示
ここでも説明されていますが、ng-repeatを使うとforルーブのように繰り返し処理を行うことができます。 試しに、views/main.htmlを次のように記述してみましょう。
<div class="hero-unit">
<h3>try ng-repeat</h3>
<table>
<tr><th>row number</th></tr>
<tr ng-repeat="i in [0, 1, 2, 3, 4, 5]"><td>{{"row:" + (i+1)}}</td></tr>
</table>
</div>
trタグにng-repeat属性が設定されています。for-inループのように、配列の要素が順番にiに代入され、文字列と結合されて表示されます。
では次に、Controllerで定義したリスト形式のデータを、ul/liタグで繰り返し表示をしてみましょう。 app/scripts/controllers/main.jsにhtmlで表示するための配列を定義します。
'use strict';
angular.module('angApp').controller('MainCtrl', function ($scope) {
$scope.awsServices = [
{"name": "EC2",
"desc": "クラウド内で規模の変更が可能なコンピュータ処理能力を提供するウェブサービス."},
{"name": "Auto Scaling",
"desc": "Amazon EC2 の能力を、自動的に拡大縮小する."},
{"name": "Amazon RDS",
"desc": "クラウド上でRDBを簡単にセットアップして運用することのできる."}
];
});
$scopeのawsServicesにオブジェクト配列を設定しています。 その設定した値を、app/views/main.htmlでng-repeatを使って表示します。
<div class="hero-unit">
<h3>use ng-repeat</h3>
<ul>
<li ng-repeat="service in awsServices">
{{service.name}}
<p>{{service.desc}}</p>
</li>
</ul>
</div>
htmlとJavaScriptがしっかり分離できていますね。
Karmaでテストを行う
generator-angularでひな形を生成すると、Karmaを用いたテストも同時に生成されます。 テストを記述すればtestタスクでそのまま実行できます。すでにテスト用のtest/spec/controllers/main.jsファイルが生成されていますので、 次のように記述してテストを実行してみましょう。
'use strict';
describe('Controller: MainCtrl', function () {
// load the controller's module
beforeEach(module('angApp'));
var MainCtrl, scope;
// Initialize the controller and a mock scope
beforeEach(inject(function ($controller, $rootScope) {
scope = $rootScope.$new();
MainCtrl = $controller('MainCtrl', {
$scope: scope
});
}));
it('should create "awsServices" model with 3 items', function () {
expect(scope.awsServices.length).toBe(3);
});
});
% grunt test
・
・
Running "connect:test" (connect) task
Starting connect web server on localhost:9000.
Running "karma:unit" (karma) task
INFO [karma]: Karma server started at http://localhost:8080/
INFO [launcher]: Starting browser Chrome
WARN [watcher]: Pattern "/Users/syuta/srcs/nodeapps/ang/test/mock/**/*.js" does not match any file.
INFO [Chrome 27.0 (Mac)]: Connected on socket id BLZ4NFDhoDN1gXHljcd_
Chrome 27.0 (Mac): Executed 1 of 1 SUCCESS (0.127 secs / 0.024 secs)
Done, without errors.
まとめ
今回はAngularJSのviewとKarmaを使ったテストを試してみました。 Yeomanを使うことでアプリだけでなく、テストのひな形やjshintの設定ファイル等も生成してくれるので、とても楽ですね。