はじめに
はじめに単なる 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() メソッドを使うこともできる