ES6のAngularJSにおいてロジックをServiceに移して、コントローラーから使用する方法

以下においてプロジェクトを作成した後にロジックをコントローラーではなく、
Serviceに移して、コントローラーからはそれをdiして使う方法について書いていきます。

AngularJSをgulpで開発する - keiwt’s diary

servicesディレクトリの作成

まずは{{プロジェクトのルートディレクトリ}}/src/app/servicesディレクトリを作成します。
ちなみにappと同階層にservicesディレクトリを作成しても、ES6→ES5にコンパイルする対象になりませんので、~ not found from "{{プロジェクトのルートディレクトリ}}.tmp/traceur/app/index.jsとなります。

$ gulp serveの実行ソースは.tmp下になりますのでご注意を。
また、もし.tmpしたをきれいにしたい場合は$ gulp cleanとします。

サービスを作成

  • navbar.service.jsの作成
'use strict';
/*jshint esnext: true */

class NavbarService {
  constructor () {
  }
  createNavItems() {
    var navItems = {
      '0': {
        dispName: 'Home',
        active: false,
        href: '#/'
      },
      '1': {
        dispName: 'About',
        active: false,
        href: '#/about/'
      },
      '2': {
        dispName: 'Contact',
        active: false,
        href: '#/contact/'
      }
    };
    if (location.href.indexOf('about') !== -1) {
      navItems['1'].active = true;
    } else if (location.href.indexOf('contact') !== -1) {
      navItems['2'].active = true;
    } else {
      navItems['0'].active = true;
    }
    return navItems;
  }
}

export default NavbarService;

※exportすることにより他のクラスにおいてimportすることができるようになります

{{プロジェクトのルートディレクトリ}}/src/app/index.jsの編集

'use strict';
/*jshint esnext: true */

import MainCtrl from './main/main.controller';
..........
import NavbarService from './services/navbar.service';

angular.module('skillcracy', ['ngAnimate', 'ngCookies', 'ngTouch', 'ngSanitize', 'ngResource', 'ngRoute', 'ui.bootstrap'])
  .controller('MainCtrl', MainCtrl)
...........

  .service('NavbarService', NavbarService)

  .config(function ($routeProvider) {
...........
;

{{プロジェクトのルートディレクトリ}}/src/components/navbar/navbar.controller.jsの編集

'use strict';
/*jshint esnext: true */

class NavbarCtrl {
  constructor ($scope, NavbarService) {
    $scope.date = new Date();
    $scope.navItems = NavbarService.createNavItems();
  }
}

NavbarCtrl.$inject = ['$scope', 'NavbarService'];

export default NavbarCtrl;

※$injectでDIするのとconstructorの引数に追加します
※これでロジックをコントローラーから分離することができます