如何创建服务并在控制器中使用它
How to create service and use it in controller
我有一个简单的登录表单,我想在成功的 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);
});
}
});
超级简单。首先创建一个服务,它注入 $http
模块。创建一个可以从 $http
模块中调用 which returns promise 的方法。在此示例中,它是一个 get
方法。
app.service("ExampleService", function($http){
this.ExampleRequest = function(){
return $http.get('url');
}
});
注入上面创建的服务,你可以调用你在服务中定义的函数。请注意 .then
来自 promise。
app.controller("exampleCtrl", function($scope, ExampleService){
$scope.onClick = function(){
ExampleService.ExampleRequest().then(function(data){
// Do something with data
});
}
});
创建一个 myService
工厂并创建一个函数来发送 http 请求和 return 响应。
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);
});
}
});
我有一个简单的登录表单,我想在成功的 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);
});
}
});
超级简单。首先创建一个服务,它注入 $http
模块。创建一个可以从 $http
模块中调用 which returns promise 的方法。在此示例中,它是一个 get
方法。
app.service("ExampleService", function($http){
this.ExampleRequest = function(){
return $http.get('url');
}
});
注入上面创建的服务,你可以调用你在服务中定义的函数。请注意 .then
来自 promise。
app.controller("exampleCtrl", function($scope, ExampleService){
$scope.onClick = function(){
ExampleService.ExampleRequest().then(function(data){
// Do something with data
});
}
});
创建一个 myService
工厂并创建一个函数来发送 http 请求和 return 响应。
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);
});
}
});