Works by

Ren's blog

@rennnosuke_rk 技術ブログです

【AngularJS】ServiceにControllerのロジックを退避する

AngularJSではControllerにロジックを記述しますが、ロジックが複雑になるにつれControllerは肥大化してしまいます。

// Controller
angular.module('MyApp')
  .controller('MyController', [
    '$scope',
    '$location',
    '$http',
    '$q',
     function($scope, $location, $http, $q){
       $scope.hoge = "Hello, hoge!";

       /*
        * 様々な処理
        */

       function doSomething(){
         // Do something...
       };

       /*
        * ...
        */

       doSomething();

      /*
       *  肥大化してしまう....
       */
  }]);



Controllerの肥大化を防ぐためには、コンテキストに依存しない分離可能な一部のロジックを別のモジュールとして独立させるなどの必要があります。
AngularJSではこのロジックの分離をServiceを用いて行うことができます。

'use strict';

// Service
angular.module('MyApp')
  .factory('doService', function(){

    service = {
      doSomething: function doSomething(){
         // Do something...
       };
    }

    return service;
  }]);

// Controller
angular.module('MyApp')
  .controller('MyController', [
    '$scope',
    '$location',
    '$http',
    '$q',
    'doService'
     function($scope, $location, $http, $q, doService){
       $scope.hoge = "Hello, hoge!";

       doService.doSomething();

  }]);


汎用的なUtility関数や定数、共通で使うAPIコールなど、分離しやすく、様々なControllerでよく使われる機能をServiceとして分離すると 保守しやすくなっていい感じです。