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

Question

I am a beginner with AngularJS. I want to know which is the best approach for solve my problem. I have a service which return a complex JSON object like this (more complex!!!):

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

I want:

• On page load retrieve the json object from the service
• Bind each property or nested object to the correct controller
• User modify the values through UI
• Collect all the modified data and rebuild the complex object
• Send the modified object back to service for update and calcultation

Previously I used Knockout.js and complete this task easily serializing the model and using the mapping plugin. Which is the best way in AngularJS? Thanks in advance.

Fabio

Answer 1

On page load retrieve the json object from the service

The Controller for your page can call the Service to retrieve the complex object as soon as the controller loads.

Bind each property or nested object to the correct controller

There's many ways to do this. Once you have your object, you can reference its properties directly and pass pieces of it around.

If you're using parent-child controllers, the child can modify the complex object that is stored in the parent's scope.

If you use directives, you can pass specific pieces of the complex object as needed via isolated scopes.

You can also have the complex object stored in the Service (which is a singleton) and shared between controllers.

User modify the values through UI
Collect all the modified data and rebuild the complex object

Angular's 2-way data-binding will handle this part. Use the ngModel directive to save whatever input you need. Any changes you make should be reflected back in the 'master' object.

Send the modified object back to service for update and calcultation

This would be a matter of calling your Service again, which should make a PUT request with the object as its body.

Your PageController and Service might look something like this:

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

Try with this to get the 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
});

And try with this to post back to the server:

// 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
});

If you want a good getting started guide follow the lesson number 5 section 2 on the codeplex tutorial on angualJS: AngulaJS tutorial

and/or follow the Angular API reference

Hope this help!