質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.60%

  • AngularJS

    566questions

    AngularJSはオープンソースのJavaScriptフレームワークです。ブラウザ上で動作するウェブアプリケーションの開発にMVCアーキテクチャを取り入れることを目的としています。

Angular.jsのコントローラーの処理の分割に関して

解決済

回答 2

投稿

  • 評価
  • クリップ 2
  • VIEW 1,692

ivezuki

score 35

下のコードはAngular.jsで通信してデータを取得している処理でしっかり動いているのですが、非常にファットコントローラーになってしまっています。

otorecoApp.controller('NewSongListCtrl', ['$scope', '$http', '$sce', function($scope, $http, $sce) {
  $scope.newSongs = [];
  $http({method: 'GET', url: 'top/getNewSongs'}).
    success(function(data, status, headers, config) {
      for(var i = 0; i < data.length; i++) {
        $scope.newSongs.push(
          {
            songName: data[i].Song.name,
            artistName: data[i].Artist.name,
            songNameForSearch: optimize(data[i].Song.name),
            artistNameForSearch: optimize(data[i].Artist.name),
            artistId: data[i].Artist.id,
            naturalLow: returnPitchName(data[i].Song.natural_low),
            naturalHigh: returnPitchName(data[i].Song.natural_high),
            falsettoLow: returnPitchName(data[i].Song.falsetto_low),
            falsettoHigh: returnPitchName(data[i].Song.falsetto_high)
          }
        );
      }
    }).
    error(function(data, status, headers, config) {
      console.log(status);
    });

    $scope.search = function(index) {
      $scope.searchResults = [];
      $scope.googleUrl = [];
      artistName = $scope.newSongs[index].artistNameForSearch;
      songName = $scope.newSongs[index].songNameForSearch;
      $http({method: 'GET', url: 'http://gdata.youtube.com/feeds/api/videos?vq=' + artistName + ' ' + songName + '&max-results=10&alt=json'}).
        success(function(data, status, headers, config) {
          $scope.googleUrl.push({url: 'www.google.co.jp/#q=' + artistName + ' ' + songName + '歌詞&qscrl=1'});
          for(var i = 0; i < 4; i++) {
            var rs = data.feed.entry[i].link[0].href.match(/http:\/\/www\.youtube\.com\/watch\?v=(.*?)&feature=youtube_gdata/);
            $scope.searchResults.push(
              {
                artistName: artistName,
                songName: songName,
                movieTitle: data.feed.entry[i].title.$t,
                movieUrl: $sce.trustAsResourceUrl('http://www.youtube.com/embed/' + rs[1] + '?rel=1&fs=1')
              }
            );
          }
        }).error(function(data, status, headers, config) {
          console.log(status);
        });
    }
}]);

そこで通信してる処理だけでも別の関数に切り分けるなりしたいのですが、どうやってやればいいのかわかりません。
良い分け方を知っていましたらご教授お願い致します。
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

+1

factoryでサービスを作るのが一番楽だと思います。
newSongsあたりをモデルとして切り出すのが良いのではないかなと。
あとは$httpの通信部分もサービスとしてまとめるのも良いと思います。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

checkベストアンサー

0

serviceを作って呼び出すのが良いと思います。

http://qiita.com/opengl-8080/items/2fe0a20c314b1c824cc5

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.60%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • AngularJS

    566questions

    AngularJSはオープンソースのJavaScriptフレームワークです。ブラウザ上で動作するウェブアプリケーションの開発にMVCアーキテクチャを取り入れることを目的としています。