さて、AngularJSが動作する環境を用意した次は実際にAngularJSを利用してHello Worldを表示してみましょう。
仕組みとしては
- JSファイルでモジュール、コントローラーを作る
- HTML内のどの範囲で上のモジュール、コントローラーが動作するかを記述
- HTMLの{{}}内がjavascriptの変数として扱われAngularJSで操作できる
といった感じでしょうか。
なにはともあれコードを見ていきましょう。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<!DOCTYPE html> <html ng-app="Test"> <head> <meta charset="UTF-8" /> <meta lang = "ja" /> <title>AngularJS_Hello World</title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular.min.js"></script> <script> angular.module('myApp', []) .controller('Controller', function($scope) { $scope.msg = 'Hello World'; }); </script> </head> <body ng-controller="Controller"> {{msg}} </body> </html> |
AngularJSの機能はモジュールとメソッドという単位で実装していきます。