如何创建服务并在控制器中使用它答案

【问题标题】：How to create service and use it in controller如何创建服务并在控制器中使用它
【发布时间】：2018-07-01 06:36:50
【问题描述】：

我有一个简单的登录表单，我想在成功的 HTTP 请求后验证用户，它工作正常。但是，我已经在控制器本身中编写了所有代码，我不希望这样。我是 angularjs 的新手，所以我无法创建服务。所以我需要为我的逻辑创建服务。任何人都可以为控制器中的逻辑创建服务，以便代码工作完全相同吗？ sample.html（目前只打印用户名、密码和响应状态码）

<html>
<head>
<script src="angular.js"></script>
<script src="angular.min.js"></script>
<script src="angular-route.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="myapp">
<div ng-controller="mycontroller">
    Username <input type="text" ng-model="login" /><br><br> Password <input 
type="password" ng-model="pass" /><br>
    <button type="submit" ng-click="myfunc()">Login</button>
    <center>User name is {{ login }}, password is{{pass}}<br>
{{success.code}}
</div>
</body>
</div>
</body>
</html>

控制器

var app = angular.module("myapp", []);
app.controller("mycontroller", function($scope, $http, $log) {
$scope.login = "";
$scope.pass = "";
$scope.myfunc = function() {
    var obj = {
        login_id: $scope.login,
        password: $scope.pass
    }
    var mydata = JSON.stringify(obj);
    $http({
        method: 'POST',
        url: "http://myapiurl.com/signin/",
        headers: {
            "authorization": "oauth mytoken",
            'Access-Control-Allow-Origin': '*'
        },
        data: mydata
    }).then(function(response) {
            console.log(response)
            $scope.success = response.data;
        },
        function(reason) {
            $scope.error = reason.data
            console.log(reason);
            $log.info(reason.data);
        });
}
});

【问题讨论】：

你只需要返回一个 Promise，$http 已经这样做了：return $http(...).then((res)=>{return res.data});。将其全部包装在带有参数的函数中并将其发送回控制器（一旦注入）：YourService.myfunc($scope.login,$scope.pass).then((data)=>{$scope.success=data;})

标签： javascript angularjs angular-services angular-controller

【解决方案1】：

超级简单。首先创建一个服务，注入$http 模块。创建一个可以调用的方法，该方法从$http 模块返回承诺。在这个例子中，它是一个get 方法。

app.service("ExampleService", function($http){

    this.ExampleRequest = function(){
       return $http.get('url');
    }

});

注入上面创建的服务，你可以调用你在服务中定义的函数。请注意，.then 来自承诺。

app.controller("exampleCtrl", function($scope, ExampleService){

    $scope.onClick = function(){
       ExampleService.ExampleRequest().then(function(data){
        //  Do something with data
       });
    }

});

【讨论】：

不应该是ExampleService.ExampleRequest()，因为你在调用一个函数？
@AlekseySolovey 好地方。谢谢

【解决方案2】：

创建一个myService 工厂并创建一个函数来发送http req 并返回响应。

app.factory('myService', function($http) {

    return {
        httpReq: function(data) {
            return $http({
                method: 'POST',
                url: "http://myapiurl.com/signin/",
                headers: {
                    "authorization": "oauth mytoken",
                    'Access-Control-Allow-Origin': '*'
                },
                data: data
            })
        }
    }
});

现在从控制器调用它。

app.controller("mycontroller", function($scope, myService, $log) {
    $scope.login = "";
    $scope.pass = "";
    $scope.myfunc = function() {
        var obj = {
            login_id: $scope.login,
            password: $scope.pass
        }
        var mydata = JSON.stringify(obj);
        myService.httpReq(mydata)
            .then(function(response) {
                    console.log(response)
                    $scope.success = response.data;
                },
                function(reason) {
                    $scope.error = reason.data
                    console.log(reason);
                    $log.info(reason.data);
                });
    }
});

【讨论】：