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