前回からの続きになります。
まず前回の単なるHTMLをそのまま。
<!doctype html> <html lang="ja" ng-app> <head> <meta charset="utf-8"> <title>Phone Gallery</title> <link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"> </head> <body> <ul> <li> <span>Nexus S</span> <p>Fast just got faster with Nexus S.</p> </li> <li> <span>Motorola XOOM™ with Wi-Fi</span> <p>The Next, Next Generation tablet.</p> </li> </ul> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js"></script> </body> </html>
上記 ng-app ディレクティブに phonecatApp というモジュール名を指定する。
<html lang="en" ng-app="phonecatApp">
body タグに ng-controller というディレクティブを定義し PhoneListCtrl を指定する。
<body ng-controller="PhoneListCtrl">
リストの繰り返しに ng-repeat を指定する。
<li ng-repeat="phone in phones"> {{phone.name}} <p>{{phone.snippet}}</p> </li>
この時点で以下となる。
<!doctype html> <html lang="ja" ng-app="phonecatApp"> <head> <meta charset="utf-8"> <title>Phone Gallery</title> <link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"> </head> <body ng-controller="PhoneListCtrl"> <ul> <li ng-repeat="phone in phones"> {{phone.name}} <p>{{phone.snippet}}</p> </li> </ul> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js"></script> </body> </html>
この時点でブラウザで表示すると以下の表示。
app/js/controllers.js
phonecatApp モジュールを定義して、コントローラを定義。
'use strict'; /* Controllers */ var phonecatApp = angular.module('phonecatApp', []); phonecatApp.controller('PhoneListCtrl', function($scope) { $scope.phones = [ {'name': 'Nexus S', 'snippet': 'Fast just got faster with Nexus S.'}, {'name': 'Motorola XOOM™ with Wi-Fi', 'snippet': 'The Next, Next Generation tablet.'}, {'name': 'MOTOROLA XOOM™', 'snippet': 'The Next, Next Generation tablet.'} ]; });
angular.module('phonecatApp', []) で phonecatApp という名前で Angular モジュールを定義。
モジュールに対して、PhoneListCtrl という名前でコントローラを定義。このコントローラは<body> タグにつけた PhoneListCtrl という名前を参照する。
コントローラの中で、引数で取る $scope の phones を簡易的に定義。
作成した controllers.js を読み込むために index.html にスクリプトの読み込みを追加。
<script src="js/controllers.js"></script>
以上でコントローラで定義した phones の内容が繰り返し表示される。
テスト
Behavior-driven Development (BDD) テストツールの Jasmine を利用。
以下の SpecRunner.html を作成。必要ライブラリは CDN で読み込むことにする(angular-mocks.js も必要)。
app/test/SpecRunner.html
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Jasmine Spec Runner</title> <link rel="stylesheet" type="text/css" href="http://cdn.jsdelivr.net/jasmine/2.0.0rc2/jasmine.css"> <script type="text/javascript" src="http://cdn.jsdelivr.net/jasmine/2.0.0rc2/jasmine.js"></script> <script type="text/javascript" src="http://cdn.jsdelivr.net/jasmine/2.0.0rc2/jasmine-html.js"></script> <script type="text/javascript" src="http://cdn.jsdelivr.net/jasmine/2.0.0rc2/boot.js"></script> <!-- include source files here... --> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular-mocks.js"></script> <script type="text/javascript" src="../js/controllers.js"></script> <!-- include spec files here... --> <script type="text/javascript" src="unit/controllersSpec.js"></script> </head> <body> </body> </html>
SpecRunner.html を以下のように編集してブラウザで開くとテストが実行される。
CDN利用だけど、https://github.com/pivotal/jasmine/tree/master/dist から jasmine-standalone-2.0.0.zip 落して解凍してSpecRunner.htmlとlibフォルダをapp/test以下にコピーでも可。
blog1.mammb.com
