2016-10-28 10 views
-1

私はjsonとrest callを持っています。角度jsでsearchControllerを書く方法。あなたは私を助けてください。アドバンスはありがとう。角度jsでコントローラを書く方法は?

url :- `http://local.agon.org/api/members/search/raju` 

JSONデータ: -

[ 
    { 
    "id": 3, 
    "name": "Raju", 
    "phone": 1597536841, 
    "photo": null, 
    "skill_level": "intermediate", 
    "rfid": "45128", 
    "created_at": "2016-10-20 14:39:32", 
    "updated_at": "2016-10-20 14:39:32" 
    } 
] 

方法:検索ボタンのGET

HTMLコード: -

<html ng-app="MemberCreateApp"> 
    <body> 
     <form class="navbar-form navbar-left" ng-controller="searchController" ng-click="search()"> 
     <div class="form-group"> 
      <input type="text" class="form-control input-lg" name="query" id="query" ng-model="query" placeholder="Search"/> 
     </div> 
     <button type="submit" class="btn btn-primary btn-circle btn-lg">  
      <i class="fa fa-search"></i> 
     </button>   
     </form> 
    </body> 
</html> 
+0

残りの呼び出しはない –

+0

をいただき、誠にありがとうございコントローラサービスにする必要があります私に返信します。角度jsで$ httpを使ってコントローラクラスにurlを書くことができます。 – sree

答えて

1

そのが良いように、工場内でサービスコールを保つ:

(function() { 
     'use strict'; 

     angular 
      .module('app') 
      .factory('activityApi', activityApi); 

     activityApi.$inject = ['$http']; 

     function activityApi($http) { 
      var service = { 
        getActivityById : getActivityById , 
      }; 
      return service; 


     function getActivityById (data) { 
      $http({ 
       method: 'GET', 
       url: 'http://local.agon.org/api/members/search/raju', 
       headers: { 
        "Content-Type": "text/plain", 
       }, 
       data: data, 
      }).then(function(reply) { 
       return reply; 
      }) 
     }; 

     }; 
    })(); 

コントローラ

(function() { 
    'use strict'; 

    angular 
     .module('app') 
     .controller('searchController', searchController); 

    searchController.$inject = ['activityApi','$scope']; 

    function searchController(activityApi, $scope) { 

     $scope.getUser = function(){ 
     var data = {"id":3, 
        "name":"Raju", 
        "phone":1597536841, 
        "photo":null, 
        "skill_level":"intermediate", 
        "rfid":"45128", 
        "created_at":"2016-10-20 14:39:32", 
        "updated_at":"2016-10-20 14:39:32"} 
     activityApi.getActivityById(data) 
      .then(function(result){ 
      console.log(result) 
      }) 
     } 

    } 
})(); 

あなただけ$httpを注入、コントローラ内のHTTP呼び出しを行いたい場合:

(function() { 
    'use strict'; 

    angular 
     .module('app') 
     .controller('searchController', searchController); 

    searchController.$inject = ['$http','$scope']; 

    function searchController($http, $scope) { 

     $scope.getUser = function(){ 
     var data = {"id":3, 
        "name":"Raju", 
        "phone":1597536841, 
        "photo":null, 
        "skill_level":"intermediate", 
        "rfid":"45128", 
        "created_at":"2016-10-20 14:39:32", 
        "updated_at":"2016-10-20 14:39:32"} 

     } 

     $http({ 
       method: 'GET', 
       url: 'http://local.agon.org/api/members/search/raju', 
       headers: { 
        "Content-Type": "text/plain", 
       }, 
       data: data, 
     }).then(function(reply) { 
      console.log(reply); 
     },function(err){ 
      console.log(err); 
     }); 

    } 
})(); 
+0

私に返信してくれてありがとう、ありがとう。 POSTではなくGETメソッドを使用しています。 – sree

+0

@sree、これが役立つことを願っています。 –

+0

ありがとうございました。私は確認してお知らせします。 – sree

関連する問題