AngularJSでHello World

2017年4月3日AngularJS

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

仕組みとしては

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

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

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

index.html
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の機能はモジュールとメソッドという単位で実装していきます。

 

 

AngularJS

Posted by Yuya