AngularJS チュートリアル step-0


f:id:Naotsugu:20140418011743p:plain


はじめに

はじめに単なる HTML ファイルを準備。
app/index.html

<!doctype html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>My HTML File</title>
  <link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

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

</body>
</html>


ブラウザで開くと単に以下が表示される。

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



Angular.js を読み込む

angular.min.js を CDN から読み込む。合わせて 要素に ng-app ディレクティブを追加。

<!doctype html>
<html lang="ja" ng-app>
<head>
  <meta charset="utf-8">
  <title>My HTML File</title>
  <link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

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

  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js"></script>
</body>
</html>

ブラウザで開くと先ほどの表示は以下の様に変わる。

Nothing here yet!



ng-app

AngularJS は ng-app ディレクティブ以下の指定がある要素に対して動作する。
<html ng-app> とするとページ全体を対象とし、<body ng-app> のようにすると body 要素以下を対象とする。
<div ng-app> のようにするとより限定的に指定できる。
通常は ng-app="hoge" のようにモジュールを指定するが、これは後ほど。


ng-app 以下の {{}} で囲まれた式が実行される。この中には Angular 式が書ける。

<p>1 + 2 = {{ 1 + 2 }}</p>
  • グローバルに式が評価されるのとは異なり 全てのプロパティは Angular のスコープに従って評価される
  • ReferenceError か TypeError となる JavaScript と異なり undefined と null は許容される
  • Angular 式では条件式などによるフロー制御はできない

JavaScript として評価したい場合は $eval() メソッドを使うこともできる