AngularJSとは？
– JavaScriptのMVCフレームワーク
– Model View Controller
【sample1】入力した内容をインタラクティブにブラウザに反映（表示）できる
##### index.html ######
<!DOCTYPE html>
<html lang=”ja” ng-app>
<head>
<meta charset=”UTF-8“>
<title>Angularの練習</title>
<script src=”https://ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular.min.js”></script>
<script src=“myscript.js”></script>
</head>
<body>
<h1>AngularJSの練習</h1>
<input type=”text” ng-model=”name“>
<p>こんにちは！{{name}}</p>
<p>こんにちは！{{5 * 3}}</p>
</body>
</html>
<!DOCTYPE html>
<html lang=”ja” ng-app>
<head>
<meta charset=”UTF-8“>
<title>Angularの練習</title>
<script src=”https://ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular.min.js”></script>
<script src=“myscript.js”></script>
</head>
<body>
<h1>AngularJSの練習</h1>
<input type=”text” ng-model=”name“>
<p>こんにちは！{{name}}</p>
<p>こんにちは！{{5 * 3}}</p>
</body>
</html>
【sample2】ループで使えるフィルター
###### index.html ######
<!DOCTYPE html>
<html lang=”ja” ng-app>
<head>
<meta charset=”UTF-8“>
<title>Angularの練習</title>
<script src=”https://ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular.min.js”></script>
<script src=“myscript.js”></script>
</head>
<body>
<h1>AngularJSの練習</h1>
<div ng-controller=”mainCtrl“>
<p><input type=”text” ng-model=”query.name“></p>
<ul>
<li ng-repeat=”user in users|filter:query|limitTo:3|orderBy:’-score’“>
{{user.name}} {{user.score}}
</li>
</ul>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang=”ja” ng-app>
<head>
<meta charset=”UTF-8“>
<title>Angularの練習</title>
<script src=”https://ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular.min.js”></script>
<script src=“myscript.js”></script>
</head>
<body>
<h1>AngularJSの練習</h1>
<div ng-controller=”mainCtrl“>
<p><input type=”text” ng-model=”query.name“></p>
<ul>
<li ng-repeat=”user in users|filter:query|limitTo:3|orderBy:’-score’“>
{{user.name}} {{user.score}}
</li>
</ul>
</div>
</body>
</html>
###### myscript.js ######
var mainCtrl = function($scope) {
$scope.users = [
{“name“:”taguchi“, “score“:52.22},
{“name“:”tanaka“, “score“:38.22},
{“name“:”yamada”, “score“:11.11},
{“name“:”hayashi”, “score“:5.25},
{“name“:”tanahashi”, “score“:82.4},
{“name“:”yasuda”, “score“:55.21},
{“name“:”minami”, “score“:32.8},
{“name“:”yanagi”, “score“:72.2}
];
}
var mainCtrl = function($scope) {
$scope.users = [
{“name“:”taguchi“, “score“:52.22},
{“name“:”tanaka“, “score“:38.22},
{“name“:”yamada”, “score“:11.11},
{“name“:”hayashi”, “score“:5.25},
{“name“:”tanahashi”, “score“:82.4},
{“name“:”yasuda”, “score“:55.21},
{“name“:”minami”, “score“:32.8},
{“name“:”yanagi”, “score“:72.2}
];
}
