AngularJS入門06

2016年10月10日
CATEGORY- 1. 技術力｛技術情報｝

AngularJS入門06

AngularJSとは

AngularJSとはGoogleとコミュニティにより開発されたJavaScript（MVW *1）フレームワークです。データバインディング、DI（依存注入）などの機能を保有し、複雑なアプリケーションもシンプルに実装可能です。
*1 「MVW」とは「Model View Whatever」の略で、「Model」「View」「その他何でも」という意味です。

今回は
「2. Angular2へのマイグレーションを見越しての、$scope除外（コントローラーのクラス化）」をご紹介します。
$scopeといえば、Angularの基本ですが、Angular2では$scopeが廃止されます。
そこで今のうちから$scopeを除外した作りを心がけておけば、マイグレーションも楽に行えるはずです。

Angular2のブログを書けとか
なんでTypeScriptじゃなくてCoffeeScriptなんだとか

色々ツッコミどころは多いですが、学習の時間が取れないのと、個人的な趣味で書いています。

ではクラス化を行うための手法を見ていきましょう。

実装方法

まずは[main.coffee]の実装です。
[main.coffee]は[index.html]ページ用のJavaScriptです。

以下、全体のソースコードです。

それでは、各パート毎の機能を見ていきましょう。

始めにMainControllerクラスを作成します。
クラスの作りはシンプルで、コンストラクタでmodelを作成して、titleを設定しています。

  class MainController
    constructor: () ->
      @model =
        title: 'AngularJS入門'

次にモジュール(‘mainApp)を作成し、(‘ngRoute’)をDIします。

  angular
  .module 'mainApp', ['ngRoute']

次にApplicationの初期設定を行います。
ここでは、それぞれのサンプルページへのルーティング設定を行います。
whenで入力されたURLを分岐し、whenの引数のHashで表示するページを指定します。

構文:

$routeProvider.when(params[Hash]).when(params[Hash]).otherwise(params[Hash])

params[Hash]:
templateUrl: 表示するテンプレートのパスを指定
=> templateUrl: ‘samples/sample01.html’
controller: 表示に使用するコントローラーを指定
=> controller: ‘Sample01Controller’
controllerAs: コントローラーの別名を指定
=> controllerAs: ‘s01’

  angular
  .config [
    '$routeProvider'
    '$locationProvider'
    ($routeProvider, $locationProvider) ->
      $routeProvider
        .when '/sample00', {
          templateUrl: 'samples/sample00.html'
        }
        .when '/sample01', {
          templateUrl: 'samples/sample01.html',
          controller: 'Sample01Controller',
          controllerAs: 's01'
        }
        .when '/sample02', {
          templateUrl: 'samples/sample02.html',
          controller: 'Sample02Controller',
          controllerAs: 's02'
        }
        .when '/sample03', {
          templateUrl: 'samples/sample03.html',
          controller: 'Sample03Controller',
          controllerAs: 's03'
        }
  ]

次の行では$rootScopeにイベントを追加しています。
このイベントを追加しないと、テンプレートを切り替えた時にMaterial Designが正しく表示されない場合があります。

  angular
  .run ($rootScope, $location, $timeout) ->
      $rootScope.$on '$viewContentLoaded', ->
        $timeout ->
          componentHandler.upgradeAllRegistered()

次に上で作成したクラスをコントローラーとして登録します。

  angular
  .controller 'MainController', MainController

最後にディレクティブ(menuClose)をangularに追加します。
このディレクティブはMaterial Designのnavigation menuの表示／非表示を切り替える機能を実装しています。

  angular
  .directive 'menuClose', ->
    restrict: 'AC'
    link: ($scope, $element) ->
      $element.bind 'click', ->
        document.querySelector('.mdl-layout').MaterialLayout.drawerToggleHandler_()
        return
      return

ディレクティブ(menuClose)の具体的な使い方は、
navigation menuが開いた状態で、menu itemが押された時に、navigation menuを非表示にします。
下記の例では、navエレメントのアトリビュートとしてmenuCloseを設定しています。
ディレクティブの実装時はキャメルケースからスネークケースで設定します。

	<nav class="mdl-navigation" menu-close>
	  <a class="mdl-navigation__link" href="/#/sample01">Sample01</a>
	  <a class="mdl-navigation__link" href="/#/sample02">Sample02</a>
	</nav>

ソースコード
ソースコードは以下のリポジトリよりチェックアウトできます
https://github.com/Sin330/ng_sample

デモ
下記のサイトから今回紹介したサンプルが実行できます。
https://ng-smple.appspot.com/

次回も引き続き「2. Angular2へのマイグレーションを見越しての、$scope除外（コントローラーのクラス化）」をご紹介します。

2016年10月10日
CATEGORY- 1. 技術力｛技術情報｝

AngularJS入門06

CATEGORY

LATEST ENTRY

秀長に学ぶ(3)

秀長に学ぶ(2)

秀長に学ぶ(1)

ダム式経営について

経営の安定について

TAG