AngularJSはJavascriptのFrameworkです。
ディレクティブでHTML属性設置し、データをHTMLにバインドします。
今は一番使われているJsのFrameworkのようです。
AngularJSを遊んで、メンバーリストを管理ページを作ってみました。
この中に使っているものを紹介します。
★ng-app 、★ng-controller
とりあえずAngularJs利用できるには、AngularのLibraryを挿入します
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
Jsからの情報をHTMLに表示するとき、AngularJs Application名を定義する必要あります。
AngularJsのコントローラーはこのアプリケーションをコントロールできます。
<div ng-app="myCompany" ng-controller="myCtrl">
<!--何かある-->
</div>
<script>
var app = angular.module('myCompany', []);
app.controller('myCtrl', function($scope) {
//何かする
});
</script>
★ng-model
HTMLには ng-model で変数を表示できます。
$scopeはJSでmodelをコントロールします。
<div ng-app="myCompany" ng-controller="myCtrl">
Name: <input type="text" ng-model="name"><br>
Age : <input type="text" ng-model="age"><br>
私は {{name + ", " + age}} 歳です。
</div>
<script>
var app = angular.module('myCompany', []);
app.controller('myCtrl', function($scope) {
$scope.name= "ワシ二―";
$scope.age= 16;
});
</script>
表示：
★ng-repeat
以上のメンバーリストお試しページには、Arrayでリストを使ってるので、表示するときこのng-repeatを使うと繰り返し表示できて便利です。
<div ng-app="myApp" ng-controller="myCtrl">
<li ng-repeat="x in employees">
{{x.name}}
</li>
</div>
<script>
app.controller('myCtrl', function($scope) {
$scope.employees = {
mem0 : { name: "Wasinee" , team : "red"},
mem1 : { name: "Pikachuu" , team : "yellow"},
mem2 : { name: "Evee" , team : "red"},
mem3 : { name: "Miniryu" , team : "blue"}
};
});
</script>
表示：
★filter
面白いところは Fliterでリアルタイム検索でくることです
<input type="text" ng-model="filt.name">
<li ng-repeat="x in employees | filter:flit.name">
{{x.name}}
</li>
テキストボックスからフィルターをもらって、その文字が混ざっている項目だけ表示します。（リストは1dimensionのArrayの場合は .name はいらない）
表示：
★ng-click
ng-click は基本Javascripの onClick と同じで、でも呼ぶFunctionはAngularの$scopeで書きます。
html:
<button ng-click="removeData()" >削除</button>
js:
$scope.removeData = function() {
$scope.employees.splice(<削除するArrayIndex>, 1);
//何かやる
};
★ng-disabled , ★ng-show ,★$invalid (バリデーション)
ng-disabled はそのオブジェクトを無効か有効にするか True / False で判断します
ng-show も同様で、表示か非表示するのに使います。
.$invalid は Formの全オブジェクトは正しく入力されてないなら False になりますので、無効か有効かによく使えます。
<form name="addForm">
<span>メンバー名 : </span>
<input ng-model="addMe" required>
<button ng-disabled="addForm.$invalid" ng-click="addItem()">追加</button>
<span ng-show="addForm.$dirty && addForm.$invalid" style="color:red">
メンバー名を入力してください
</span>
</form>
使ってみた感想は jquery 使わずにData管理、バリデーション、情報のフィルター、ボタンイベントのコントロールできるので、便利で、コード量も少なくなっているとおもいます。
まだAngularJsの色んな機能もあるので、もっと遊んでみたいと思います。
