2014年1月26日日曜日

AngularJSでHello World

http://docs.angularjs.org/cookbook/helloworldを見つつAngularJSでHello Worldをやってみた。
Controllerのロジックは、CoffeScriptにしてみたぐらいで、後は上記のサイトの内容通り。

html

ポイントは、htmlタグでng-appディレクティブを記述しているところ。
これで、htmlタグはいかがAngularJSアプリとなる。

<!DOCTYPE html>
<html ng-app="">
<head>
  <meta charset="utf-8" />
  <title>AngularJSでHello World!!</title>
</head>
<body>
<div ng-controller="HelloController">
Your name: <input type="text" ng-model="name"/>
<hr />
Hello {{name || "World"}}!
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.min.js"></script>
<script src="hello.js"></script>
</body>
</html>

JavaScript

htmlのng-controllerディレクティブで指定したControllerに対応するfunctionを定義する。

CoffeeScriptだと関数がグローバルスコープとならないので、関数名の頭に@をつけたりwindowオブジェクトに作成してあげる必要がある。
ちょっとイケてない感じなのが残念。

このJavaScriptでは、コントローラのスコープ($scope)内にname属性を定義して'World'を代入しています。

@HelloController = ($scope) ->
  $scope.name = 'World'

実行結果

JavaScriptでname属性に設定した値が、「Hello {{name || 'World' }}!」部に出力される。

Your name:

Hello {{name || "World"}}!