AngularJS(JavaScriptのMVCフレームワーク)

 

AngularJSとは?

– JavaScriptのMVCフレームワーク
– Model View Controller

【sample1】入力した内容をインタラクティブにブラウザに反映(表示)できる

#####    index.html  ######
<!DOCTYPE html>
<html lang=”jang-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=”jang-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}
];
}

About

You may also like...

Your email will not be published. Name and Email fields are required