ゆーすけべー日記

AngularJSの勉強してたら「作業用BGMサービス」が出来た

Posted at — Dec 13, 2013

久しぶりにWebのフロントエンドの実装をするため最近流行りの AngularJS に入門してみる。オフィシャルのチュートリアルをざっと見ても感覚がつかめないので、具体的で簡易なアプリをつくった方が勉強になるだろうと思い… 結果的に FMTube っていう「チョー簡単に使えるYouTubeミュージックプレイヤー」が完成したのであった。後述するが似たようなモノをいくつかリリースしているのですが初見の人にとっては 作業用BGM とかにかなり捗るサイトなので使ってみてください!特に Mr.Children で検索した結果 がいい意味でヤバいw

FMTube

以下AngularJSを使ってFMTubeをつくるまでの課程と感想をざっくりと箇条書きで!



以下がコード

 app.factory('Tracks', function($http) {
  return {
    get : function(query, callback) {
      $http.jsonp('http://ws.audioscrobbler.com/2.0/', {
        params : {
          api_key : ‘your_api_key’,
          method : 'artist.getTopTracks',
          limit : 20,
          format : 'json',
          callback : 'JSON_CALLBACK',
          artist : query
        }
      }).success(function(data){
       if(data.toptracks) {
          callback(data.toptracks.track);
        }
        return [];
     });
      return [];
    }
  };
});
 

するとController側からはこんな感じで呼び出しをしてHTMLに書いたテンプレート通り即座に描画される

 Tracks.get('Mr.Children', function(tracks){
  $scope.tracks = tracks;
});
 

でだ、何を知り得たかというとAngularJSっていうのはフレームワークとして

今どきのWebアプリのフロントを記述するための ルールを押し付けそのためのヘルパーを提供している

って思いました。ハイ。まぁコードはAngularJS勉強して2日目なので参考にならないと思うけど、FMTubeはよいので使ってみてね!もしくはAngularJSではこのくらいのアプリをつくって勉強するのがいいと感じたので、その辺りもよければ参考にしてください!

comments powered by Disqus