如何正确使用AngularJS中的自定义服务

How to properly use custom service in AngularJS

本文关键字：自定义 服务 AngularJS 何正确      更新时间：2023-09-26

我正在尝试将控制器逻辑移动到服务。我添加了DataService并注入了$http。然后loadData（）方法返回JSON。我已经将此服务注入到TestController中，并调用了上面提到的函数，但它不起作用。同样简单的逻辑在控制器中正确工作。我应该改进什么？：）

var app = angular.module('TestApp', []);
app.controller('TestController', TestController);
app.service('DataService', DataService);
function TestController(DataService) {
    var vm = this;
    vm.personalInfo = DataService.loadData();
}
function DataService($http) {
    var store = this;
    store.personInfo = [];
    store.loadData = function(){
        $http.get('data.json')
        .success(function(data){
        store.personInfo = data;
    })
    .error(function(){
        store.personInfo = "Error occured";
    });
    return store.personInfo;
    };
}

我的观点看起来很简单：

<body ng-app="TestApp" ng-controller="TestController as test">
    <h1>Hello Plunker!</h1>
    <p ng-repeat="item in test.personalInfo" ng-bind="item.firstname"></p>
    <script data-require="angular.js@1.2.25" data-semver="1.2.25" src="https://code.angularjs.org/1.2.25/angular.js"></script>
    <script src="script.js"></script>
</body>

在您的代码store.loadData中，在来自后端的响应之前返回undefined。所以使用这个代码：

var app = angular.module('TestApp', []);
app.controller('TestController', TestController);
app.service('DataService', DataService);
function TestController(DataService) {
    var vm = this;
    DataService.loadData().then(function(data) {
            vm.personalInfo = data.data
        })
        .catch(function(err) {
            console.log(err)
        })
}
function DataService($http) {
    var store = this;
    store.personInfo = [];
    store.loadData = function() {
        return $http.get('data.json')
    };
}
相关文章：