1

我是 angularjs 的绝对新手，对 Web 服务也一无所知。我的要求是这样的：

我将有一个基本的登录页面（使用 html 和 angularjs 设计），它将询问我的凭据（用户名和密码）。在提供一组凭据并单击“提交”按钮时，我的代码需要处理表单数据并将信息传递给 Web 服务。我只有网络服务的网址，没有别的。因此，我的主要目标是将用户名和密码发送到网络服务（最好作为 JSON 对象）并检查其是否正常工作。到目前为止，我已经成功地做到了：

1> 点击 web 服务（我使用 $resource 来做同样的事情。） 2> 将用户名和密码存储为 JSON 对象。

现在我需要完成两件事：

1> 将此数据作为“POST”发送，最重要的是，2> 将此 JSON 数据（作为对象或字符串）发送到 Web 服务。

我绝对一无所知...请通过修改我的代码来帮助我。

提前致谢。这是我的 JS 文件：

var app = angular.module('angularjs-starter', ['ngResource']);

app.controller('MainCtrl', function ($scope,$http,$resource) {
$http.defaults.useXDomain = true;

$scope.checkUsername = function(){

var USERNAME = $scope.inputUsername;
var PASSWORD = $scope.inputPassword;

var f = JSON.stringify({USERNAME: USERNAME, PASSWORD: PASSWORD });

var result= JSON.parse(f);

var Something = $resource("/some url/:id", {id: "@id"},
      {
      post:{
          method:"POST",
          isArray:false
           },
      });
  $scope.something = Something.get({id:1});

  $scope.alertMessage = "Web service has been successfully hit!";


};

});

这是我的 HTML 文件：

<!DOCTYPE html>
<html ng-app="angularjs-starter">
<head lang="en">
<meta charset="utf-8">
<title>Authentication</title>

<script src="C:\Users\Rup\Desktop\POC2\js\angular.js"></script>
<script src="C:\Users\Rup\Desktop\POC2\js\angular-resource.js"></script>
<script src="C:\Users\Rup\Desktop\POC2\experiment_2.js"></script>

<link rel="stylesheet" href="style.css">


</head>

<body ng-controller="MainCtrl">
   <h1>Hello</h1>
   <form name="form1" class="form-horizontal">
          <label class="control-label" for="inputUsername">Username</label> <input
                 type="text" id="inputUsername" placeholder="Username"
                 ng-model="inputUsername"> <br /> <label
                 class="control-label" for="inputPassword">Password</label> <input
                 type="password" id="inputPassword" placeholder="Password"
                 ng-model="inputPassword"> <br /> <span class="help-block">{{alertMessage}}</span>
          <br />
          <!--<a class="btn">Sign in</a>-->
          <button ng-click="checkUsername()">Submit</button>
   </form>
</body>

</html>
4

1 回答 1

0

好消息是这应该是相当直截了当的。你有正确的想法，你只需要像使用“post”方法一样扩展资源对象，当你调用它时 - 传入你的 JSON 对象。然后，Angular 会自动将传入的 JSON 对象附加为 post 参数。将此用户资源创建为服务/工厂是一个好主意（我已阅读），以便您可以将其注入控制器以抽象对服务器的调用。举个例子——我所做的就是像这样创建服务（依赖于 angular $resource）：

var myApp = angualar.module('myApp', []);

myApp.factory('UserService', ["$resource", 
        function UserService($resource) {
            var UserService = $resource('/rest/user', {}, {
                search: {
                    method: 'POST',
                    url: window.location.origin +'/yourServer/rest/search' //custom url of your service to be called 
                }
            });

            return UserService;
        }
    ])

然后在你的控制器中，注入要使用的服务，并创建一个方法，然后调用你闪亮的新服务：

myApp.controller("myAppController", ["$scope", "UserService", 
        function myAppCtrl($scope, UserService) {

    $scope.search = function () {
        var params = {
         param1: "searchValue1",
         param2: "searchValue2"
        }
        var response = UserService.search(params);
        response.$promise.then(
            function success() {
                //celebrate!

            }, 
            function fail(err) {
                //comiserate
            }
        );
    }
}

调用服务方法的响应对象是一个承诺，当调用成功返回或失败时，您将附加成功或失败函数以调用。

于 2015-01-26T10:57:04.780 回答