AngularJSのControllerとDirectiveの使い方

js

AngularJSの目玉の機能のControllerとDirectiveの使い方を紹介していきます。

ControllerとDirectiveはAngularJSを使う上で基本的な部分です。

理解を深めておいて損はないです!というよりは使い方は確実にしておきましょう。

[スポンサーリンク]

ControllerとDirectiveを使ったサンプルソース

HTMLソースを紹介します。
7行目でコントローラの設定をして、12行目でDirectiveの設定をしています。

<!doctype html>
<html ng-app="sampleApp">
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
    <script src="../js/main.js"></script>
  </head>
  <body ng-controller="sampleController">
    <div>
      <p><input type="text" ng-model="yourName"></p>
      <p>Hello {{yourName}}!</p>
      <div>{{msg}}</div>
      <div sample-directive></div>
    </div>
  </body>
</html>

JavaScriptのサンプルです。

"use strict";
(function() {
  var app = angular.module('sampleApp', []);

  //Controllerの設定をしています。
  app.controller('sampleController', function($scope) {
    $scope.msg = 'Controllerでセットした値を表示しています。';
  });

  //Directiveの設定をしています。
  app.directive('sampleDirective', function(){
    return {
      template: '<span>Directiveでセットした値を表示しています。</span>'
    }; 
  });
})();

See the Pen angular-controller-directive by morinkey (@morinkey) on CodePen.

AngularJSのバージョン

サンプルコードのバージョンは、1.5.0 を使っています。

さいごに

Directiveのハイフンつなぎって需要あるのでしょうか。全検索して探すときにすごく不便なんですよね。私にはちょっとわかりにくいなぁ。。

このあたりもAngularJS2.0で改善されると嬉しいですね!

それでは!