AngularJSでHello World


さて、AngularJSが動作する環境を用意した次は実際にAngularJSを利用してHello Worldを表示してみましょう。

仕組みとしては

  1. JSファイルでモジュール、コントローラーを作る
  2. HTML内のどの範囲で上のモジュール、コントローラーが動作するかを記述
  3. HTMLの{{}}内がjavascriptの変数として扱われAngularJSで操作できる

といった感じでしょうか。

なにはともあれコードを見ていきましょう。

AngularJSの機能はモジュールとメソッドという単位で実装していきます。

 

 

AngularJSの基本形

 


それでは早速AngularJSを書いていきましょう。

以下がAngularJSを導入したindex.htmlです。

キモは <html ng-app> angular.min.jsの読み込み、そして{{}}内でJavascriptの処理が行える点でしょう。

では定番のHello Worldを表示してみましょう。

こんな感じで{{}}内にjavascriptを記述できます。

が、これではAngularJSを使ってHello Worldを表示したとは言えません。

あくまでAngularJSを導入してJavascriptをbody内に記述できるようにしてHello Worldを表示したにすぎませんよね。

それでは次回AngularJSを使ってHello Worldを表示してみましょう。