AngularJS チュートリアル step-2


f:id:Naotsugu:20140418011743p:plain


前回からの続きになります。


まず前回の単なる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>




この時点でブラウザで表示すると以下の表示。
f:id:Naotsugu:20140103002112p:plain


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 の内容が繰り返し表示される。
f:id:Naotsugu:20140103003256p:plain


テスト

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 を以下のように編集してブラウザで開くとテストが実行される。
f:id:Naotsugu:20140103013502p:plain



CDN利用だけど、https://github.com/pivotal/jasmine/tree/master/dist から jasmine-standalone-2.0.0.zip 落して解凍してSpecRunner.htmlとlibフォルダをapp/test以下にコピーでも可。