在 AngularJS 中与后端服务通信的最佳方法是什么

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 中最好的方法是什么？ 提前致谢。

法比奥

Answer 1

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

您页面的控制器可以在控制器加载后立即调用服务来检索复杂对象。

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

有很多方法可以做到这一点。一旦你有了你的对象，你就可以直接引用它的属性并传递它的各个部分。

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

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

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

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

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

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

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

您的 PageController 和 Service 可能如下所示：

页面控制器

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]);

复杂服务

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

希望对您有所帮助！