HOME ≫ 備忘帳 ≫ AngularJSチュートリアル ≫

0.ブートストラップ

＜戻る（チュートリアル目次）　次へ（1.静的テンプレート）＞

 

まずはAngulerJSのソースがどんなものか、どのように実行されるのか見てみましょう。

開発環境の準備ができたら、コマンドプロンプトや Git Bash などでanguler-phonecatディレクトリに移動し、以下のコマンドを実行します。

git checkout -f step-0

これでワークスペース（anguler-phonecat/app）がチュートリアルのステップ0の状態にリセットされます。

チュートリアルの今後のステップでも、このようにして該当するファイル一式を取得できます。
その際、ワークスペースであなたが行った更新は失われます。

また、以下のコマンドでウェブサーバを起動します。

npm start

その後、ブラウザで http://localhost:8000/app/ を開きます。

「Nothing here yet!」とだけ表示されれば成功です。

このページ app/index.html のコードは以下の通りです。

<!doctype html>
<html lang="en" ng-app>
<head>
	<meta charset="utf-8">
	<title>My HTML File</title>
	<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css">
	<link rel="stylesheet" href="css/app.css">
	<script src="bower_components/angular/angular.js"></script>
</head>
<body>

	<p>Nothing here {{'yet' + '!'}}</p>

</body>
</html>

[ ページ先頭へ ]

何をしているのか？

ng-app ディレクティブ

AngulerJSでは、ng-で始まるカスタム属性を、ディレクティブとして使います。

<html ng-app>

このディレクティブを設定した部分を、Angularはルート要素ngAppだと認識します。
ページ全体(htmlタグ)に設定することも、ページの一部分(divなど)に設定することもできます。その内側が、Angularにとってのアプリケーションです。

つまり → Angularがいじるのはng-appの内側だけなので、別のシステムと共存できます。

AngularJSのスクリプト

<script src="bower_components/angular/angular.js">

anguler.jsを読み込みます。

AngulerはHTMLページが完全に読み込まれた後に、ngAppディレクティブを探し、その内側をアプリケーションとして準備します。

二重中カッコ

Nothing here {{'yet' + '!'}}

この部分は、Angulerのテンプレート機能のデモです。

Angulerは二重中カッコの中をAngular式として評価し、結果をその場所に挿入します。
この例では式は静的ですが、もし式の評価結果が変わった時には、新しい結果がリアルタイムに反映されます。

Anguler式とは、（普通のjavascriptのようにwindowではなく）現在のモデルのコンテキストで評価される、Javascriptコードです。

[ ページ先頭へ ]

AngulerJSアプリのブートストラップ

アプリを起動するときAngularJSが行っていることは：

  1. 依存性の注入（injection）を行うためのインジェクターを作ります。
  2. インジェクターはアプリのコンテキストになる、ルートスコープを作ります。
  3. ngApp内側のDOMを"コンパイル"して、その中のディレクティブやバインディングを処理します。

Angularはこういった準備が終わると、マウスクリック、キー入力、HTTPレスポンスの受け取りなどのブラウザイベントを待ちます。

イベントが発生すると、Angularはそれによってモデルの変更が起こるか判断し、影響が受ける箇所があれば全て反映させます。

ワークスペースにあるファイルについて

ワークスペースにあるファイルは、angular-seedプロジェクトが元になっています。

angular-seedプロジェクトは、新しいAngulerプロジェクトを作る時のベースとして使えるよう、公開されています。
フレームワーク（app/bower_components/フォルダに入っているbowerなど）や、典型的なウェブアプリ開発に使うツール（npmなど）をインストールする設定になっています。

このチュートリアル用に、angular-seedに以下の変更を加えています。

 

＜戻る（チュートリアル目次）　次へ（1.静的テンプレート）＞

最終更新日：2015/12/24

[ ページ先頭へ ]