angular.jsをチュートリアルから学ぶ
- 2013.10.23
- javascript Prog
- 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
-
前の記事
angular.jsを試してみた 2013.10.21
-
次の記事
angular.jsをチュートリアルから学ぶ step2 Angular Templates 2013.10.24
