連載
» 2016年11月17日 05時00分 UPDATE

MEANスタックで始めるWebアプリ開発入門(終):AngularJSユーザーのためのAngular2超入門 (1/2)

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

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

 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>'
    }
});
       1|2 次のページへ

Copyright© 2017 ITmedia, Inc. All Rights Reserved.

@IT Special

- PR -

TechTargetジャパン

この記事に関連するホワイトペーパー

RSSについて

アイティメディアIDについて

メールマガジン登録

@ITのメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。