Question

我是AngularJS的初学者。我想知道哪种方法可以解决我的问题。我有一个服务，它返回一个像这样的复杂JSON对象（更复杂!!!）：

var complexObj = {
    property1: 'p1',
    property2: 'p2',
    complexNested: {
        nestedProperty1: 'np1',
        nestedProperty2: 'np2'
    },
    arrayOfObjects: [{ arrP1: 'arrp1', arrP2: 'arrp2' }, { arrP1:'arrp3', arrP2: 'arrp4' }]
};

我想：

页面加载从服务中检索json对象
将每个属性或嵌套对象绑定到正确的控制器
用户通过UI修改值
收集所有已修改的数据并重建复杂对象
将修改后的对象发回服务以进行更新和计算

以前我使用过Knockout.js并完成此任务，可以轻松地序列化模型并使用映射插件。哪个是AngularJS的最佳方式？提前谢谢。

的Fabio

Answer 1

页面加载从服务中检索json对象

控件加载后，页面的Controller可以调用服务来检索复杂对象。

将每个属性或嵌套对象绑定到正确的控制器

有很多方法可以做到这一点。获得对象后，可以直接引用其属性并传递它的各个部分。

如果您正在使用父子控制器，则子项可以修改存储在父项范围内的复杂对象。

如果使用指令，则可以根据需要通过隔离范围传递复杂对象的特定部分。

您还可以将复杂对象存储在服务（单例）中并在控制器之间共享。

用户通过UI修改值收集所有修改过的数据并重建复杂对象

Angular的双向数据绑定将处理这一部分。使用ngModel指令保存您需要的任何输入。您所做的任何更改都应反映在“主”对象中。

将修改后的对象发回服务以进行更新和计算

这将是再次调用您的服务的问题，它应该以对象为主体发出PUT请求。

您的PageController和服务可能如下所示：

的PageController

function PageController($scope, ComplexObjectService) {
    loadComplexObject();
    function loadComplexObject() {
        ComplexObjectService.get().then(function(complexObject) {
            $scope.complexObject = complexObject;
        });
    }

    $scope.onSave = function(complexObject) {
        ComplexObjectService.save(complexObject).then(function(result) {
            //Do something.
        });
    }


}
angular
    .module('ModuleName')
    .controller('PageController', ['$scope', 'ComplexObjectService', PageController]);

ComplexService

function ComplexObjectService($http) {
    this.get = function() {
        return $http.get('/api/to/get/complex/object').then(function(response) {
            return response.data;
        });
    };

    this.save = function(complexObject) {
        return $http.put('/api/to/save/complex/object', complexObject).then(function(response) {
            return response.data;
        });
    };
}
angular
    .module('ModuleName')
    .service('ComplexObjectService', ['$http', ComplexObjectService]);

Answer 2

尝试使用此方法获取json：

// Simple GET request example :
$http.get('/someUrl').
success(function(data, status, headers, config) {
  // Parse jour json
}).
error(function(data, status, headers, config) {
  // show errors
});

尝试将其发回服务器：

// Simple POST request example (passing data) :
var json = {one:"one", two:"two"};
$http.post('/someUrl', json).
success(function(data, status, headers, config) {
  // this callback will be called asynchronously
}).
error(function(data, status, headers, config) {
  // called asynchronously if an error occurs
});

如果您想要一本好的入门指南，请参阅有关angualJS的codeplex教程的第5课第2节：AngulaJS tutorial

和/或关注Angular API reference

希望这有帮助！

如何在AngularJS中与后端服务进行通信的最佳方法

2 个答案: