0

CRUD 操作を個別に実装する必要がある 3 つの異なるビジネス オブジェクトを持つ Angular アプリケーションがあります。それらをa、b、cと呼びましょう。これらの CRUD 操作を管理するために、同等の aCtrl,bCtrl,cCtrl と aSvc,bSvc,cSvc があります。したがって、この例では、aCtrl が「a」の CRUD を管理します。aSvc は、ajax 呼び出しを使用してデータをバックエンドに永続化するのに役立ちます。また、アプリケーションが初めて読み込まれたときに、すべてのオブジェクト a、b、c をバックエンドから 1 つの json オブジェクトにまとめてプルする allCtrl と allSvc もあります (それらを個別にプルするのではなく、1 つの統合された json オブジェクトをプッシュするようにバックエンドを設計しました)。 a、b、cが埋め込まれています。

「すべて」のオブジェクト

{
 a:{},
 b:{},
 c:{}
}

そのため、単純で意味のある方法でアプリを構成することに行き詰まっています。アプリが初めて読み込まれると、バックエンドから allSvc によって「all」オブジェクトが取り込まれます。これには、CRUD を実行するために必要なすべてのデータが含まれています (もちろん、バックエンドとの同期を維持する必要があります)。アプリが初めて読み込まれるときに、タイプ 'a' のオブジェクトを一覧表示し、編集/削除/追加のオプションをユーザーに提供したいと考えています。同様に、オブジェクト「b」、「c」に対してまったく同じことを行う他のページにユーザーを連れて行くためのドロップダウンナビゲーションがあります。

ここに私がこれまでに行ったことと、私が惨めに失敗した方法の一部を示します:)

index.html

<html lang="en" ng-app="myApp">
 ...
 ...
 <div class="" ng-view></div>

js

var myApp = angular.module('myApp', ['ngRoute','restangular']);  
myApp.controller('aCtrl', function($scope, aSvc) 
myApp.controller('bCtrl', function($scope, bSvc) 
myApp.controller('cCtrl', function($scope, cSvc) 
myApp.controller('allCtrl', function($scope, allSvc)

ルート

myApp.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/a/list', {templateUrl: 'partials/a/list.html',controller: 'aCtrl'});
$routeProvider.when('/a/add', {templateUrl: 'partials/a/add.html', controller: 'aCtrl'});
$routeProvider.when('/a/edit/:id', {templateUrl: 'partials/a/edit.html', controller: 'aCtrl'});
$routeProvider.when('/a/delete/:id', {templateUrl: 'partials/a/list.html', controller: 'aCtrl'});
.... similary I have routes for b & c to perform crud
$routeProvider.otherwise({redirectTo: '/a/list'});

}]);

aCtrl

myApp.controller('aCtrl', function($scope, aSvc,allSvc) {
$scope.allCollection= allService.getAll();
$scope.aCollection = allCollection.a;

この設計では、適切に編集/削除を実行するために routeParams を意味のある設定を行うことができません。また、userId (CRUD 操作を実行する必要があるログイン ユーザー) も考慮する必要があります。ルートをより適切に管理するにはどうすればよいですか? 例として、「a」を編集するには /a/edit/userId/aId のようなものを使用し、「a」を削除するには /a/delete/userId/aId のようなものを使用する必要がありますか?

この糞を磨くのを手伝ってください。

4

1 に答える 1

0

コントローラーでサービス/更新/リクエストの呼び出しを分離しました。プロジェクトは以下のパスにあります。さらに改善できると思う人がいたら教えてください。ただし、サービスをテストするために、strongloop を使用しました。説明はリポジトリ自体にあります。

Angular - 作成、更新、削除

サンプルは次のようになります。

'use strict';

function MainController($scope, $state, $rootScope, $window, $stateParams, HttpService) {


  $scope.init = function () {
    HttpService.load("http://0.0.0.0:3000/api/custdetails")
      .then(function (response) {
        if (response) {
          console.log(JSON.stringify(response.data));
          $scope.showAllData = response.data;
        }
      }, function (error) {
        console.log("Error occurred");
      });
  };

  $scope.addMoreData = function () {
    var data = {
      cust_name: $scope.custNameModel,
      phone_number: $scope.phoneNumberModel,
      id: $scope.idModel
    };

    HttpService.update('http://0.0.0.0:3000/api/custdetails?', data);
    $scope.init();

  };

  $scope.updateData = function () {
    var data = {
      cust_name: $scope.custNameModel,
      phone_number: $scope.phoneNumberModel,
      id: $scope.idModel
    };

    HttpService.patch('http://0.0.0.0:3000/api/custdetails?', data);
    $scope.init();

  };

  $scope.deleteData = function () {
    console.log("ID defined is: " + $scope.idModel);
    HttpService.delete("http://0.0.0.0:3000/api/custdetails", $scope.idModel);
    $scope.init();

  };

}

于 2016-06-23T05:36:38.123 に答える