0

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

“全部”对象

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

所以我坚持以一种直接有意义的方式构建应用程序。当应用程序第一次加载时，我将从后端的 allSvc 拉入“所有”对象。这包含执行 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'});

}]);

一个Ctrl

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”吗？

请帮我擦亮这个粪便。

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 回答