AngularJSを使ってみた

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の色んな機能もあるので、もっと遊んでみたいと思います。