- Angular 1.5.3で確認
HTML
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="UTF-8">
<title>hello world</title>
<script src="./angular.min.js"></script>
<script src="./controller.js"></script>
</head>
<body>
<div ng-controller="HelloController">
<input type="text" ng-model="greeting.text" value="{{greeting.text}}">
<p>{{greeting.text}}</p>
</div>
</body>
</html>
- ng-app でモジュール定義
- ng-controller でコントローラの適用範囲を定義
- ng-model フォームコントロールとモデルのバインディング
- {{}} でモデルの参照
JavaScript
// コントローラとして呼び出されるメソッドの定義
function HelloController($scope) {
$scope.greeting = { text : "hello world" };
}
// 'app'モジュールにHelloControllerコントローラの登録
angular.module('app', [])
.controller('HelloController', HelloController);
- コントローラで読みだされる Functionの定義
- angularmodule で 'app' にコントローラの登録