AngularJS:はじめ方

前々から楽だ楽だと言われ気になっていた「AngularJS」に触れてみたら本当に楽っぽいので自分も勉強と平行してメモしたく思います。

「AngularJS」とはGoogleとそのコミュニティで開発されているOSSのJSフレームワークで、利用感としてはjQueryでやっていたことをさらに直感的に、コード量を少なく書けるイメージです。

Hello World

サンプルはこちら。
http://jsdo.it/goto_jp/yNQp

HTML

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script>
<body ng-app>
  <div ng-controller="helloWorld">
    <span>{{hello}}</span>
  </div>
</body>

まず一行目でAngularJSを読み込んでいます。
jQueryなどと同じく、これだけで利用可能になります。

見慣れない「ng-」で始まる属性はAngularJSのトリガーとなる属性です。(AngularJSの2~3文字目から取っているようです)

ng-app
AngularJSの宣言。おやくそく。

ng-controller
JS側で定義したfunction(AngularJSではコントローラと呼ぶ)を指定し、それを呼び出します。

JavaScript

function helloWorld($scope){
  $scope.hello = "Hello World";
}

HTML側で {{}} で指定されている箇所がスコープとなり、その箇所を置き換えています。