一个应用程序中多个模型对象的角度 CRUD

Angular CRUD for more than one model object in one application

本文关键字：对象 CRUD 模型 一个 应用程序      更新时间：2023-09-26

我有一个 Angular 应用程序，它有三个不同的业务对象，需要在所有对象上独立实现 CRUD 操作。让我们称它们为 a，b，c。我有等效的aCtrl，bCtrl，cCtrl和aSvc，bSvc，cSvc来管理这些CRUD操作。因此，在此示例中，aCtrl 管理"a"的 CRUD。aSvc 通过 ajax 调用帮助将数据持久保存到后端。我还有一个 allCtrl 和 allSvc，当应用程序第一次加载时，它会将所有对象 a、b、c 从后端拉到一个 json 对象中（而不是单独拉取它们，我设计了后端来推送一个嵌入了 a、b、c 的统一 json 对象。

"all"对象

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

所以我被困在一个直接有意义的方式构建应用程序上。当应用程序首次加载时，我将由 allSvc 从后端拉入"all"对象。这拥有执行 CRUD 所需的所有数据（当然，我必须使其与后端保持同步）。当应用程序首次加载时，我想列出类型为"a"的对象，然后为用户提供编辑/删除/添加的选项。同样，我有下拉导航将用户带到对对象"b"、"c"执行完全相同操作的其他页面。

以下是我到目前为止

所做的事情的一些片段，以及我是如何惨败的:)

索引.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/edit/userId/aId 之类的东西来编辑"a"和/a/delete/userId/aId 来删除"a"作为示例吗？

请帮我擦亮这个草皮。

我已经在控制器中分离了服务/更新/请求调用，该项目可以在以下路径中找到。如果有人认为可以进一步改进，请告诉我。但是，为了测试服务，我使用了强循环，描述可以在存储库本身找到。

角度 - 创建、更新、删除

该示例如下所示：

'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();
  };
}

相关文章：