AngularJSユーザーのためのAngular2超入門：MEANスタックで始めるWebアプリ開発入門（終）（1/2 ページ）

MEANスタックを用いたWebアプリの開発方法について紹介していく本連載。今回は、前回カスタムディレクティブで解説しきれなかった内容と、最近リリースされたAngular2を紹介します。

» 2016年11月17日 05時00分公開

[中村修太，クラスメソッド]

今回の主な内容

　MEANスタックを用いたWebアプリの開発方法について紹介していく本連載「MEANスタックで始めるWebアプリ開発入門」。前回の「AngularJSを使いこなすなら絶対に知っておきたいフィルタとカスタムディレクティブの基本」では、AngularJSのフィルタとカスタムディレクティブについて解説しました。

　MEANスタックに関連する情報を基本から解説してきた本連載も、今回が最終回です。最終回となる今回は、前回カスタムディレクティブで解説しきれなかった内容と、最近リリースされたAngular2を紹介します。

　なお、本記事を見て実際にサンプルを動かしたい場合は、以前の連載記事（第1回、第2回）を見て環境を作成しておきましょう。

AngularJS 1.xのディレクティブで指定できるプロパティ

　前回はカスタムディレクティブを作成するためにdirective関数を使用し、プロパティとしてcompileに関数を記述しました。

myApp.directive('mySimpleDirective', function () {
    return {
        //コンパイルプロパティに関数を指定
        compile: function (tElement, tAttrs, tTransclude) {
          ・・・
        }
    }
});

　これ以外にも、directive関数ではさまざまなプロパティを指定することが可能です。ここでは代表的なプロパティの使い方をいくつか紹介します。

template/templataUrl

　templateおよびtemplateUrlプロパティは、ディレクティブ用テンプレートを指定するためのプロパティです（※この2つのプロパティは、両方同時に指定することはできません）。

　サンプルを見てみましょう。

<!DOCTYPE html>
<html ng-app='mySimpleApp'>
<head>
    <script src="bower_components/angular/angular.js"></script>
</head>
<script>
var myApp = angular.module('mySimpleApp', []);
myApp.controller('myController', ['$scope',
    function ($scope) {
    }
]).directive('myTemplateDirective', function () {
    return {
        template : '<p> my template directive!</p>'
    }
});
</script>
<body ng-controller="myController">
  <div my-template-directive></div>
</body>
</html>

　上記例ではtemplateプロパティを指定しています。この場合、templateフィールドにはtemplateの内容を文字列で指定するか、template内容を返す関数を指定します。このサンプルを実行すると、画面に「my template directive!」と表示されます。

　次にtemplateUrlプロパティを使用します。このプロパティはtemplateを文字列や関数でなく、ファイル名で指定できます。

　まずは下記のようなhtmlファイルを作成します。

<!-- sample-template.html -->
<p> this is my template directive!!</p>

　そして、ディレクティブでは次のようにtemplateUrlを使用してファイルのパスを指定します。

myApp.controller('myController', ['$scope',
    function ($scope) {
    }
]).directive('myTemplateDirective', function () {
    return {
        templateUrl : 'sample-template.html'
    }
});

　指定するURLは相対パスでも絶対パスでも指定は可能です。複雑なHTMLを展開する場合は、こちらの形式の方がいいでしょう。

restrict

　作成したカスタムディレクティブは、属性として指定するのか要素やclassとして指定するのか、またはコメントとして指定するのかなど、用途に応じて変更したいと思います。そのような場合は、restrictプロパティを使用すると、ディレクティブをHTMLのどこで指定するかを設定できます。

　これは下記のように4つのプロパティが指定できます。

A：ディレクティブを属性名として指定可
E：ディレクティブを要素として指定可
C：ディレクティブをclassとして指定可
M：ディレクティブをコメントとして指定可

　それぞれ動作を確認するためにディレクティブを定義してみましょう。

myApp.controller('myController', ['$scope',
    function ($scope) {
    }
]).directive('sampleDirA', function () {
  return {
      restrict: 'A',
      template: '<p>this is sampleDir-A</p>'
  }
}).directive('sampleDirE', function () {
    return {
        restrict: 'E',
        template: '<p>this is sampleDir-E</p>'
    }
}).directive('sampleDirC', function () {
    return {
        restrict: 'C',
        template: '<p>this is sampleDir-C</p>'
    }
}).directive('sampleDirM', function () {
    return {
        restrict: 'M',
        replace : true,
        template: '<pre>this is sampleDir-M</pre>'
    }
});

　ディレクティブの指定方法は下記のようになります。

<!-- restrict : A ディレクティブの属性として指定する -->
<div sample-dir-a></div>
 
<!-- restrict : E ディレクティブの要素として指定する -->
<sample-dir-e></sample-dir-e>
 
<!-- restrict : C ディレクティブのclassとして指定する -->
<div class = "sample-dir-c"></div>
 
<!-- restrict : M コメントとして指定する-->
<!-- directive:sample-dir-m -->

　それぞれ、属性や要素、classとしてディレクティブを指定しています。

　restrictに「M」を指定した場合は、コメントがディレクティブに置換されますが、replaceを「true」に指定する必要があります。replaceはディレクティブの展開方法を指定するプロパティで、template/templateUrlで指定された内容は、通常ディレクティブ指定要素内に追加されます。

<!-- replace : falseの場合の展開結果 -->
<div sample-dir-a>
  <p>this is sampleDir-A</p>
</div>

　「replace: true」を指定した場合、ディレクティブ指定要素自体を置換するため、下記のように展開されます。

<!-- replace : trueの場合の展開結果 -->
<p>this is sampleDir-A</p>

　なおrestrictは、下記のように複数指定することも可能です。

・・・
}).directive('murtiRestrict', function () {
    return {
        restrict: 'AM',
        template: '<pre> select restrict A M</pre>'
    }
});

Angular2の基礎知識

JavaScriptを中心としたWebアプリ開発の栄枯盛衰まとめ――LiveScriptからAngularJS／React.jsまで
＠ITが誕生した2000年頃はJavaScriptが不遇だった時代。そこから現在のような人気のプログラミング言語になるまでには、どのような歴史があったのか。15周年を迎えた＠ITの豊富なWeb開発関連記事とともに振り返る。
Socket.IOでセンサー＆MongoDB〜AngularJSアプリ間の通信を行う
家電〜Webアプリ間の双方向通信をSocket.IOで行うアプリについて、サーバー側のArduino連携やMongoDBへのデータ保存などと、クライアント側のAngularJSに分けて動作を解説します。
エンタープライズ開発現場が知っておきたいHTML5の4つの意義
Windows XP時代にエンタープライズ向けシステムのクライアント開発現場が抱えていた問題は、HTML5（Web標準）という一つ上のレイヤーからアプローチし解決する道が模索されています。本記事では、先月開催されたカンファレンス「Enterprise × HTML5 Web Application Conference 2014」から幾つかのセッションの内容をピックアップし、HTML5ソリューションの全体像を俯瞰し、上記解決の道がどこに向かおうとしているのかを探ってみます。