AngularJSの基本形
それでは早速AngularJSを書いていきましょう。
以下がAngularJSを導入したindex.htmlです。
|
1 2 3 4 5 6 7 8 9 10 11 |
<!DOCTYPE html> <html ng-app> <!-- AngularJSを使いますよ宣言 --> <head> <meta charset="UTF-8" /> <title>AngularJS_test</title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular.min.js"></script><!-- AngularJSを配布サイトから読み込み --> </head> <body> {{6 + 8}} <!-- {{}}内の記述は<script>の外でもjavascriptの構文として扱うことができる！ --> </body> </html> |
キモは <html ng-app> angular.min.jsの読み込み、そして{{}}内でJavascriptの処理が行える点でしょう。
では定番のHello Worldを表示してみましょう。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!DOCTYPE html> <html ng-app> <head> <meta charset="UTF-8" /> <title>AngularJS_test</title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular.min.js"></script> <script> </script> </head> <body> <div>{{doc="Hello World"}}</div> </body> </html> |
こんな感じで{{}}内にjavascriptを記述できます。
が、これではAngularJSを使ってHello Worldを表示したとは言えません。
あくまでAngularJSを導入してJavascriptをbody内に記述できるようにしてHello Worldを表示したにすぎませんよね。
それでは次回AngularJSを使ってHello Worldを表示してみましょう。