angular.jsをチュートリアルから学ぶ

JavaScriptフレームワークであるangularjsを最近調べています。

フロントエンドのフレームワークがまだ不慣れで何ができるかまだ手探りの状態ですので、
動く物をどんどん掲載していこうと思います。

angularjsのサイトにあったチュートリアルをもとに、
ひとまず動きがわかる物を追っていきます。

チュートリアルstep0

はじめのチュートリアルは 0-Bootstraping
http://docs.angularjs.org/tutorial/step_00
cssなどは今回外して掲載しています。

index.html


<!DOCTYPE HTML>
<html lang="ja" ng-app>
<head>
<meta charset="utf-8">

</head>
<body>
<p>1 + 2 = {{1 + 2}}</p>
<p>2 * 2 = {{2 * 2}}</p>
<p>2 / 2 = {{2 / 2}}</p>
<p>5 % 3 = {{5 % 3}}</p>

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
</body>
</html>

ng-appの記述

ひとまず前回と同じように最小限の構成で表示するようにしています。
普通のHTMLと異なるところは、
htmlを宣言している場所の ng-app と言う記述
これはangularjsを利用したアプリであることの宣言をしているようです。
いきなりbodyの中にある{{}}の中に計算式を入れてもちゃんと計算結果が表示されます。

{{}}について

{{}}でくくった中はangularjsの管理になります。
ここで変数や計算式などなどを直接記入することができました。

ひとまずstep0なのでいちばんシンプルな形でangularjsに触れているようです。

表示結果


1 + 2 = 3
2 * 2 = 4
2 / 2 = 1
5 % 3 = 2