Fatal编程技术网
  • html/
  • Html 如何在angular js中编写控制器？

Html 如何在angular js中编写控制器？

html angularjs json

Html 如何在angular js中编写控制器？,html,angularjs,json,Html,Angularjs,Json,我有json和rest调用。如何在angular js中编写searchController。你能帮我吗？谢谢 url :- `http://local.agon.org/api/members/search/raju` Json数据：- [ { "id": 3, "name": "Raju", "phone": 1597536841, "photo": null, "skill_level": "intermediate", "rfid"

我有json和rest调用。如何在angular js中编写searchController。你能帮我吗？谢谢

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>
最好将服务呼叫保留在工厂中，例如：

(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);
         });

    }
})();
休息电话应该在服务中，而不是控制员非常感谢您给我的回复。我们可以使用angular js中的$http在控制器类中编写url。非常感谢您给我回复。我使用的是GET方法而不是POST。@sree，希望这对您有所帮助。非常感谢您，先生，我会检查并让您知道。