AngularJS提供商和模型

AngularJS Providers and Models

本文关键字:模型 提供商 AngularJS      更新时间:2023-09-26

我有一个angularjs前端,它与Web API后端进行通信。我是这个框架的新手,不确定如何将复杂的数据从web api拉入我的应用程序$scope。然后,我将使用这个前端库在日历小部件中显示数据。

我有一个Session表和一个SessionInstance表,它们通过一对多关系链接在一起。我可以使用$http来获取数据,然后$scope.sessions = angular.fromJson(data);将其作为对象存储在$scope中。问题是,我想在这个对象上定义方法,并从控制器中提取代码,这样我就可以利用angular的DI,但我不知道我应该使用什么,也不知道如何在angular中使用。

有可能在应用程序中使用提供者来保持最新的复杂数据模型吗?

如果我正确理解您的问题,正确的方法是将数据包装为服务。

举个例子,这里有一些从这个博客复制的代码:

(function () {
    var person = angular.module("person");
    person.factory("PersonService", [
        '$http',
        'httpRestValue',
        function ($http, httpRestValue) {
            var PersonService = {
                data: {
                    currentPerson: {},
                    persons : []
                },
                getPerson: function (id) {
                    return $http.get(httpRestValue + "person/"+id)
                        .success(function success(data) {
                            PersonService.data.currentPerson = data;
                        })
                        .error(function error() {
                        });
                },
                getPersons : function(){
                    return $http.get(httpRestValue + "person/list")
                        .success(function success(data) {
                            PersonService.data.persons = data;
                        })
                        .error(function error() {
                        });
                },
                savePerson : function(person){
                    return $http.post(httpRestValue + "person/",person)
                        .success(function success() {
                            PersonService.getPersons();
                        })
                        .error(function error() {
                        });
                },
                deletePerson : function(id){
                    return $http.delete(httpRestValue + "person/"+id)
                        .success(function success() {
                            PersonService.getPersons();
                        })
                        .error(function error() {
                        });
                }
        };
        return PersonService;
    }
]);
})();