UTALI

みんなの役に立つ情報をどんどん公開していきます

5分で理解するAngularJS | 初心者向け

AngularJSとは?


  • Googleが開発した動的サイト(SPA)を作成するためのフレームワーク

  • JavaScriptで実装されている

  • 基本はMVCモデル

  • HTMLファイルに任意のコードを埋め込むことによって簡単にSPA化することができる。

SPA?

  • シングルページWebアプリケーションの訳

  • DOMを再構築することなくデータだけを差し替える

  • レンダリングの時間が削減されることによって大幅にユーザビリティの向上が期待できる。

実績

Googleの提供しているWebアプリケーションはほぼ全てAngularJSの上で構築されている

  • GoogleMaps
  • Gmail

など

初めてみる

1.HTMLファイルの中でAngularJSを利用することを宣言する。またアプリの名前を属性値として指定する。

命名規則としては慣例的にアッパーキャメルが使用されている。

<html ng-app="testApp">

2.AngularJSをCDNから読み込む

https://cdnjs.com/libraries/angular.js/

を参考に

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js"></script>

3.AngularJSのロジックを記述したJavaScriptファイルを作成する。

テスト段階では、scriptタグ内に直接書き込んでも構わない。

<script>
//testAppの宣言
var testApp = angular.module('testApp', []);
</script>

今回はapp.jsとして別ファイルとして管理することにする。

4.コントローラを宣言して、HTML内のDOM要素と関連づける

var testApp = angular.module('testApp', []);
testApp.controller('testAppController', function($scope) {
     //変数をセット
    
    $scope.title = "Hello World";
});

HTMLファイルに関連づけたいコントローラと同じ名前を指定する

<html ng-app="testApp">
<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js"></script>
     <script src="app.js"></script>
</head>
<body>
   <!-- この中でコントローラ内で指定した変数が利用できる -->
   <div ng-controller="testAppController"> 
      <h1>{{title}}</h1></div>
</body>
</html>

HTMLテンプレート内でコントローラで指定した変数を呼び出すには{{ }}で変数を囲う必要があります。

この例では、h1タグ内で指定されている{{title}}が該当します

5.ブラウザで表示することでAngularJSで作成したアプリが動作する

f:id:mochizuki_p:20170308184140p:plain


app.js内で定義したtitleが実際のWebページ内でも表示されていることがわかる。

AngularJSの面白い機能

スコープ内で使用できる関数

JavaScriptについての基礎的な知識を持って入ればJavaScriptでの関数は第1級であることをご存知だと思います。

つまり、AngularJSでも関数を変数としてscopeに格納してテンプレートの内部から呼び出すことが可能になります。

試しにh1タグ内のメッセージを消去する関数を定義してみます

var testApp = angular.module('testApp', []);
testApp.controller('testAppController', function($scope) {
     //変数をセット

     $scope.title = "Hello World";
    //関数を定義する
     $scope.deleteMessage = function() {

        $scope.title = "";

     }
})

特定のDOM要素がクリックされた際にこの関数が発火するように設定するにはng-clickで関数を指定します。

<html ng-app="testApp">
<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js"></script>
     <script src="app.js"></script>
</head>
<body>
   <div ng-controller="testAppController"> 
      <h1>{{title}}</h1>
      <button ng-click="deleteMessage()">消去</button></div>
</body>
</html>

inputの入力値とスコープ変数を関連づける

動的サイトで最も重要な機能の一つは入力値を使って、出力する値を切り替えることです。

そのためにはテンプレート内でng-modelを使用して、$scopeで定義した変数と関連づけます。

なお、初期値はng-initで、クエリ形式で与えます

<html ng-app="testApp">
<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js"></script>
     <script src="app.js"></script>
</head>
<body>
   <div ng-controller="testAppController"> 
      <h1>{{title}}</h1>
      <input ng-init="message={{title}}" type="text" ng-model="title"/></div>
</body>
</html>

このようにinputの入力値の変更に応じてtitleの値も変更されていることがわかると思います。

for文に相当するng-repeat

AngularJSのテンプレート内でfor文に相当する繰り返しを実行するにはng-repeatを利用します。

var testApp = angular.module('testApp', []);
testApp.controller('testAppController', function($scope) {
     //このオブジェクト内で、コントローラ内で使用する変数の管理を行う。
     $scope = {};
     //変数をセット
     $scope.languages = [
      {"name": "Python", "developer": "Guido van Rossum"},
      {"name": "Ruby", "developer": "Matsumoto Yukihiro"},
      {"name": "C++", "developer": "Bjarne Stroustrap"},
      {"name": "PHP", "developer" : "Rasmus Lerdorf"}
      ];
})
<html ng-app="testApp">
<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js"></script>
     <script src="app.js"></script>
</head>
<body>
   <div ng-controller="testAppController"> 
        <div ng-repeat="language in languages">
            <span> language: {{ language.name}}</span>
            <span> developer: {{language.developer}} </span>
        </div></div>
</body>
</html>

実際に出力してみると

f:id:mochizuki_p:20170308184148p:plain