java如何将POJO插入Angular的模型？

Question

我习惯于在MVC模式视图中看到控制器和模型是分开的，现在在许多“如何看到控制器中实现的模型”中看到了，而对我来说，这种做法并不尊重MVC模式

就我而言，我想要的是，例如：

波乔汽车：

    public class Car
    {
     private int price;
     private int doors;

     public Car (int px, int dr)
     {
        this.price = px;
        this.doors = dr;
    }
   }

在我的java程序中实例化之后

Car car = new Car(1000, 4);

现在，我怎样才能把这个物体放到Angular的模型中呢

提前谢谢

Answer 1

你没有，你也不能

您可以用Java创建web服务。你可以make Angular to call that web service。但是你从Java变成了Angular的模型，因为那不是a3

Answer 2

angularjs的MVC模式意味着所有层（M、V、C）都在客户端。 在这种模式中，服务器端通常返回简单的json文件，无论您是否使用MVC模式实现服务器端代码，ajax都会请求这些文件

因此，如果您喜欢在服务器端代码中使用POJO，我建议将POJO转换为json格式，并将其作为json文件使用。 在客户端angularjs代码中，您可以将json转换为javascript简单对象并将其用作模型

Answer 3

重写Car类的tostring方法

public String toString(){
        return new JSONObject(this).toString();
    }

您可以将该对象放在json中，并将其作为json返回

Car car = new Car(1000, 4);

JSONObject jsonReturn = new JSONObject();
jsonReturn.put("car ", car );

Answer 4

我通常使用以下模式

angular.module('yourServiceName.car.model', [])
.factory('Car', function() {
    function Car(car) {
        /* extend with lodash.
         * Since this is a POJO, don't transform anything you dont need.
         */
        _.assign(this, car, this); 
    }

    Car.Enums = {SOME:1, ENUM:2, YOU:3, MIGHT:4, NEED:5};

    Car.prototype.method = function() {
        /* some model specific method.
         * don't throw REST or UI things here tho.
         */
    } 

    Car.create = {
        fromJSON: function(json) {
            /* only use this for JSON missing transformations, like
             * 'Y'|'N' to true|false
             * dateString to Date instance
             */
            json.startDate = Date.parse(json.startDate); or something.

            // I want to see 'Car' in my debug window, instead of 'Object'
            return new Car(json);
        }
    }

    return Car;
});

然后在您的API服务上

angular.module('yourService.car.rest', [
    'yourService.car.model'
])
.factory('carApi', function(baseURL, Car) {
    var path = baseURL+'/car'
    var Routes = {
            CREATE : path,
            LIST   : path+'/%s',
            DETAILS: path+'/%d'
        };

    function getCar(id, params) {
        // this should blowup if id is not a number
        var url = sprintf(Routes.DETAILS, id);
        return $http.get(url, params).then(function(response.data) {
            // if now JSON transformations are done
            // return new Car(response.data);

            return Car.create.fromJSON(response.data);
        });
    }

    function listCars(ids, params) {
        ids = ids || [];
        var _ids = ids.join(',');
        var url = sprintf(Routes.LIST, _ids);
        return $http.get(url, params).then(function(response) {
            return _.map(response.data, Car.create.fromJSON);
        });
    }

    function createCar(oCar) {
        /* Hungarian notation indicates I expect an instance of 'Car'
         * And not just any object
         */

        $http.post(Routes.CREATE, {data: oCar});
    }

    return  {list:listCars, get:getCar, create:createCar};
});

最后在你的控制器中，你会有

angular.module('yourProject.ui.car.list', [
    'yourServiceName.car.model',
    'yourServiceName.car.rest'
])
.controller('ListCarsController', function ListCarsCtrlr(carsApi, Car) {
    $scope.ids = [1, 2, 3];

    $scope.load = function() {
        var params = {}; // anything else you need to pass
        carsApi.list(ids, params).then(function(cars) {
            $scope.cars = cars; // all of these are now instanceof Car
        })
    }
});

您的控制器最终非常简单，如下所示：

如果需要Viewmodel，您甚至可以使用它

angular.module('yourProject.ui.car.list.viewmodel', [
    'yourService.car.model'
])
.factory('CarItemViewmodel', function CarItemVM() {
    function CarItemViewmodel(oCar) {
        // do some flattening or something you can unit test
        this.price = oCar.additionalAttributes.somethingDeep.price;
        this.ammount = oCar.someOtherStuff[0].quantity;
    };

    return CarItemViewmodel;
});