AngularJsの編集ビューでデータを表示する方法

Question

AngularJSの新機能です。私はASP.Net MVCとAngularJSを使用するWebサイトで作業しています。このサイトには、基本的な機能追加/更新/削除/取得機能があります。私は角度ルーティングを使ってサイトをナビゲートしています。ルーティングコードを以下に示す：

var app = angular.module("paymentApp", ['ngRoute']); 
app.config(function ($routeProvider, $locationProvider) { 
    $routeProvider 
     .when("/", { 
      templateUrl: "payment/EditPayment/1", 
      controller: "paymentController" 
     }) 
     .when("/MakePayment", { 
      templateUrl: "payment/MakePayment", 
      controller: "paymentController" 
     }) 
     .when("/SearchPayment", { 
      templateUrl: "payment/SearchPayment", 
      controller: "paymentController" 
     }) 
     .when("/EditPayment/:payid", { 
      templateUrl: function (params) { return "payment/EditPayment/" + params.payid }, 
      controller: "paymentController" 
     }) 
     .when("/DeletePayment/:id", { 
      templateUrl: function (params) { return "payment/DeletePayment/" + params.id }, 
      controller: "paymentController" 
     }) 
     .when("/Flush", { 
      templateUrl: "payment/InvalidateCacheForIndexAction", 
      controller: "paymentController" 
     }); 
    $locationProvider.html5Mode(true).hashPrefix(''); 
}); 

あなたは、私はユーザーとして表示するあらゆる事前にデータを持っていないMakePayment/SearchPaymentビューを表示するには、MVCのアクションメソッドを呼び出しています上記のコードから把握することができます

それらのビューにデータを入力する必要があります。ただし、EditPaymentビューには、以前に行われた支払いのデータが含まれます。私のルーティングコードは単に値なしでEditPaymentビューをプルするだけです。私は、そのビューに既存のデータを表示する正しい方法が何であるか分かりません。

マイEditPayment.cshtmコードは以下の通りです：また

app.controller("paymentController", function ($scope, $rootScope, $routeParams, paymentService) {  
    $scope.paymentId; 
    $scope.billerId; 
    $scope.billAccount; 
    $scope.paymentAmount; 
    $scope.feeAmount=1.0; 
    $scope.platform = 1; 
    $scope.confCode; 
    $scope.makePayment = function() { 
     var payment = { 
      BillerId: $scope.billerId, 
      BillAccount: $scope.billAccount, 
      PayAmt: $scope.paymentAmount, 
      FeeAmt: $scope.feeAmount, 
      Platform: $scope.platform, 
     }; 
     paymentService.makePayment(payment).then(function (response) { 
      $scope.confCode = response.data.ConfCode; 
     }); 
    }; 

    $scope.searchPayment = function() {   
     var searchPay = { 
      BillerId: $scope.billerId, 
      BillAccount: $scope.billAccount 
     }; 
     paymentService.searchPayment(searchPay).then(function (response) { 
      $scope.payments = response.data;    
     }); 
    }; 
}); 

、私が追加/更新/編集/削除のために同じコントローラを使用しています：

<h2>Edit Payment</h2> 

<div ng-controller="paymentController" class="row"> 
    <div class="col-md-8"> 
     <section id="paymentForm"> 
      <form class="form-horizontal"> 

       @Html.AntiForgeryToken() 
       <h4>Edit payment</h4> 
       <hr /> 
       <span class="text-danger" ng-show="false">Validation error summary</span> 
       <div ng-show="confCode"> 
        <label style="background-color:darkseagreen;">Payment has been made successfully. Confirmation code: {{confCode}}</label> 
       </div> 
       <div class="form-group"> 
        <label class="col-md-2 control-label">Payment Id</label> 
        <div class="col-md-10"> 
         <input type="number" class="form-control" ng-model="paymentId" readonly /> 
         <span class="text-danger" ng-show="false">Payment Id required</span> 
        </div> 
       </div> 
       <div class="form-group"> 
        <label class="col-md-2 control-label">Biller Id</label> 
        <div class="col-md-10" name="BillerId" id="BillerId"> 
         <select class="form-control" ng-model="billerId" ng-init="billerId='0'"> 
          <option disabled hidden value="0">Select biller</option> 
          <option value="1">Idea</option> 
          <option value="2">Airtel</option> 
          <option value="3">Vodafone</option> 
          <option value="4">Jio</option> 
         </select> 
         <span class="text-danger" ng-show="false">Biller Id required</span> 
        </div> 
       </div> 
       <div class="form-group"> 
        <label class="col-md-2 control-label">Bill Account</label> 
        <div class="col-md-10"> 
         <input type="text" class="form-control" ng-model="billAccount" /> 
         <span class="text-danger" ng-show="false">Bill account required</span> 
        </div> 
       </div> 
       <div class="form-group"> 
        <label class="col-md-2 control-label">Payment amount</label> 
        <div class="col-md-10"> 
         <input type="number" class="form-control" ng-model="paymentAmount" /> 
         <span class="text-danger" ng-show="false">Payment amount required</span> 
        </div> 
       </div> 
       <div class="form-group"> 
        <label class="col-md-2 control-label">Fee amount</label> 
        <div class="col-md-10"> 
         <input type="number" class="form-control" ng-model="feeAmount" value="1.0" readonly /> 
         <span class="text-danger" ng-show="false">Fee amount required</span> 
        </div> 
       </div> 

       <div class="form-group"> 
        <label class="col-md-2 control-label">Platform</label> 
        <div class="col-md-10"> 
         <input type="text" class="form-control" ng-model="platform" value="1.0" readonly /> 
         <span class="text-danger" ng-show="false">Platform required</span> 
        </div> 
       </div> 

       <div class="form-group"> 
        <div class="col-md-offset-2 col-md-10"> 
         <input type="submit" value="Pay" class="btn btn-default" ng-click="makePayment()" /> 
        </div> 
       </div> 
      </form> 
     </section> 
    </div> 
</div> 

@section Scripts { 
    @Scripts.Render("~/bundles/jqueryval") 

私paymentController.jsは次のようになります。それは正しいアプローチですか？

Answer 1

最初に、追加/更新/編集/削除に同じコントローラを使用することが良い/悪いアプローチであるかどうかは、主に視点の問題です。私の考えでは、大きなシステムを計画しているときにこれを行う最善の方法ではないし、少なくともあなたのアプリケーションをより大きなものに拡大する計画もあります。時には多くの機能が異なる場合でも、多くの機能が一緒になっているため、作業が面倒で非生産的になります。これは、特定のケースで評価され、再利用コードのバランスを見つけ、明確かつ分離されたものにする必要があります。常にきちんとした清潔で可能なコードを探してください。

編集ビューを作成する方法については、ルートからpayidを取得し、バックエンドから情報を取得するために使用する必要があります。

シーケンスは次のように行く必要があります：あなたはEditPaymentビューをロード

• ユーザーのクリック編集支払い、（あなたがルートにpayidを追加）

• （そう、これはpaymentControllerをintatiates）

• paymentControllerをロードする瞬間、payidのようなルートで次のようにチェックしてください。 $route.current.params.payid

• $route.current.params.payidが存在する場合は、あなたのデータは、バックエンドから取り出されると、それは、（このデータを得るために、あなたはおそらくすでにサービスを作った）あなたのビューがその支払いに関連するデータをロードする必要があり

• を意味し、それをビューモデルにバインドします。

• 完了！ でEditPaymentがその特定の支払いに関連するデータを表示するはずです。