KEIS BLOGは株式会社ケイズ・ソフトウェアが運営しています。

KEIS BLOG

AngularJS入門06

LINEで送る
Pocket

misawa01
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なんだ とか

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

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

実装方法

misawa02
まずは[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

misawa03
ディレクティブ(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除外(コントローラーのクラス化)」をご紹介します。

【関連記事】
Google App Engine 第一回
Google App Engine 第二回
Javaのライブラリを手軽にテストしたい!! Groovy入門 第1回
Google App Engine 第三回
Google App Engine 第四回
Google App Engine 第五回
Google App Engine 第六回
Google App Engine 第七回
Google App Engine 第八回
Google App Engine 第九回
Google App Engine 第十回
Google App Engine 第十一回
Google App Engine 第十二回
AngularJS入門01
AngularJS入門02
AngularJS入門03
AngularJS入門04
AngularJS入門05

LINEで送る
Pocket