さとやn Blog

試合はRuby,勝負はC#!

2015年02月

AngularJS - Google検索するディレクティブを作る

AngularJS100日業の1つとして(実際に1日1つはできていなけど)今日はGoole検索のディレクティブを作った。 cssはBootstrapとか使用。

JavaScript

function GoogleSearchCtrl($http, $window) {                                                                                                                              
  var vm = this;                                                                                                                                                         
  vm.onSubmit = function(){                                                                                                                                              
    var apikey = 'YOUR API KEY';      
    var cx = 'YOUR CX';                                                                                                        
    var url = 'https://www.googleapis.com/customsearch/v1?key=' + apikey + '&cx=' + cx + '&q=' + vm.keyword + '&callback=JSON_CALLBACK';
    $http.jsonp(url)                                                                                                                                                     
    .success(function(res){                                                                                                                                              
      vm.result = res;                                                                                                                                                   
    })                                                                                                                                                                   
    .error(function(res){                                                                                                                                                
      console.log(res);                                                                                                                                                  
      $window.alert('error');                                                                                                                                            
    });                                                                                                                                                                  
  };                                                                                                                                                                     
}                                                                                                                                                                        
                                                                                                                                                                         
function googleSearchDiretive() {                                                                                                                                        
  return {                                                                                                                                                               
    restrict: 'EA',                                                                                                                                                      
    templateUrl: 'views/directives/google_search.html',                                                                                                                  
    controllerAs: 'gs',                                                                                                                                                  
    controller: ['$http', '$window', GoogleSearchCtrl],                                                                                                                  
  };                                                                                                                                                                     
}                                                                                                                                                                        

view

 <div class="panel panel-default">                
   <div class="panel-heading">                    
     <div class="panel-title">Google Search</div> 
   </div>                                         
   <div class="panel-body">                       
     <google-search />                            
   </div>                                         
 </div>             

template

<div>                                                                                                                                                                           
  <form name="gsForm" role="form form-horizontal" ng-submit="gs.onSubmit()" novalidate>                                                                                         
    <div class="form-group">                                                                                                                                                    
      <label for="" class="col-sm-2 control-label">Google</label>                                                                                                               
      <div class="col-sm-8 relative">                                                                                                                                           
        <input type="text" class="form-control" id="" placeholder="Input Search Word" required="input any words" ng-model="gs.keyword">                                         
        <a class="glyphicon glyphicon-remove-circle clearTextButton btn text-danger" ng-click="gs.keyword=null; gs.result = null;" ng-show="gsForm.$valid && gsForm.$dirty"></a>
      </div>                                                                                                                                                                    
      <div class="col-sm-2">                                                                                                                                                    
        <fieldset ng-disabled="gsForm.$invalid">                                                                                                                                
          <button type="submit" class="btn btn-default">Search</button>                                                                                                         
        </fieldset>                                                                                                                                                             
      </div>                                                                                                                                                                    
    </div>                                                                                                                                                                      
  </form>                                                                                                                                                                       
                                                                                                                                                                                
  <table class="table talbe-striped" ng-show="gs.result.items">                                                                                                                 
    <caption>Search Result</caption>                                                                                                                                            
    <thead>                                                                                                                                                                     
      <tr>                                                                                                                                                                      
        <th>TITLE</th>                                                                                                                                                          
        <th>LINK</th>                                                                                                                                                           
      </tr>                                                                                                                                                                     
    </thead>                                                                                                                                                                    
    <tbody>                                                                                                                                                                     
      <tr ng-repeat="item in gs.result.items">                                                                                                                                  
        <td class="text-info">                                                                                                                                                  
          <img class="img-rounded" src="{{item.pagemap.cse_thumbnail[0].src}}" alt="" style="width: 48px" ng-if="item.pagemap.cse_thumbnail">                                   
          {{item.title}}                                                                                                                                                        
        </td>                                                                                                                                                                   
        <td class="">                                                                                                                                                           
          <a href="" ng-href="{{item.link}}" target="_blank">{{item.displayLink}}</a>                                                                                           
        </td>                                                                                                                                                                   
      </tr>                                                                                                                                                                     
    </tbody>                                                                                                                                                                    
  </table>                                                                                                                                                                      
</div>                                                                                                                                                                          
                              
Screenshot from 2015-02-05 09:02:10

AngularJS - angular-translate で多言語対応

Railsではおなじみの I18n.translate("hoge") みたいなことをAngularJSでもやる場合は、なんかいくつかあるみたいだけど、
angular-translate というのが一番情報が多そうなので試してみた。
  とりあえず
bower intall angular-translate
でインストール。
  
angular.module("myApp", ["pascalprecht.translate"])
.config(function($translateProvider){
  $translateProvider.translation("ja",
    {
       NAME: "名前",
       AGE: "年齢",
    })});
viewで使う場合は
  <div  translate="NAME"></div> 
とやると
 
 <div>名前</div>
な感じになる。

JavaScriptで直接呼び出す場合は$filterから呼び出す

  var nameLabel = $filter("translate")("NAME"); // 名前

Railsと同様にネストしてても同じように使える

var label = $filter("translate")("MEMBER.NAME");
大文字にしているのはサンプルがそうなっていたからで特にそうしなければならないわけではないらしい。

AngularJS - ページが変更時に定期実行を停止する

AngularJSで $interval とか使ってデータを定期的に取得したりする場合、別のページに遷移しても明示的に処理を停止させないと全く関係ないページのデータの取得がバックグラウンドで継続してしまう。
そういう場合は $locationChangeStart イベントでタスクをキャンセルさせれば良い。

var intervalTaskId = $interval(
  function(){ console.log("hoge"); },
  1000
);

$rootScope.$on(
  "$locationChangeStart", 
  function(){ $interval.cancel( intervalTaskId ); }
);

grunt serve で外部からアクセス

docker コンテナでgrunt serve してブラウザでアクセスしても接続ができない。
ポート9000公開してるのに変だなー。Railsとか普通に見れるのになー。妙に変だなーと思って調べたら、Grunt.jsファイルの下記の部分を変更してあげる必要があるようです。

hostnameをlocalhostから0.0.0.0にすれば無事見れる。

    // The actual grunt server settings
    connect: {
      options: {
        port: 9000,
        // Change this to '0.0.0.0' to access the server from outside.
        // hostname: 'localhost',
        hostname: '0.0.0.0',
        livereload: 35729
      },
livedoor プロフィール
QRコード
QRコード
  • ライブドアブログ