AngularJS:はじめ方

goto_jp 732views 更新:2014年4月22日

前々から楽だ楽だと言われ気になっていた「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側で {{}} で指定されている箇所がスコープとなり、その箇所を置き換えています。

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません