1

私はangularjsの初心者で、Webサービスについてもまったく知りません。私の要件は次のようなものです：

資格情報 (ユーザー名とパスワード) を要求する基本的なログイン ページ (html と angularjs を使用して設計) を作成します。一連の資格情報を提供して [送信] ボタンをクリックすると、コードでフォーム データを処理し、情報を Web サービスに渡す必要があります。Web サービスの URL を持っているだけで、他には何もありません。したがって、私の主な目的は、ユーザー名とパスワードを Web サービスに (できれば JSON オブジェクトとして) 送信し、正しく機能しているかどうかを確認することです。これまでのところ、私は次のことに成功しています。

1> Web サービスにアクセスします (同じことをするために $resource を使用しました)。 2> ユーザー名とパスワードを JSON オブジェクトとして保存します。

ここで、次の 2 つのことを達成する必要があります。

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 パラメーターとして自動的に追加します。サーバーへの呼び出しを抽象化するためにコントローラーに注入できるように、このユーザーリソースをサービス/ファクトリとして作成することをお勧めします(私は読んだことがあります)。例として-私が行ったことは、そのようにサービスを作成することです(角度のある$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
            }
        );
    }
}

サービス メソッドへの呼び出しからの応答オブジェクトは promise であり、成功または失敗の関数をアタッチして、呼び出しが正常に戻るか失敗したときに呼び出されるようにします。

于 2015-01-26T10:57:04.780 に答える