Question

下面我有一个角度应用程序和控制器，控制器内部有数据访问（不知道，我知道）

var app = angular.module('app',[]);
app.controller('HomeController',function($scope,$http){
    $scope.people = null;
    $scope.get = function() {
        $http({
            url: 'largeTestData.json',
            method: 'GET'
        }).then(function(data){
            console.log('request successful, here is your data: ');
            console.log(data['data']);
            $scope.people = data['data'];
        },function(reason){
            console.log('this failed, this is the reason: ');
            console.log(reason);
        })

    }

});
app.controller('ControllerWithService',function($scope, MyService){
    $scope.get = MyService.get;
    $scope.get(function(data){
        console.log('you succeeded');
    },function(reason){
        console.log('you failed');
        console.log(reason);
    })

})

这将用于检索数据并将其放到页面上。知道在控制器中使用数据访问并不是bueno我试图将其抽象为服务：

app.service('MyService',function($http,$q){
     var get = function(){
         var deferred = $q.defer();
         var url = 'test.json';
         $http.get(url).success(deferred.resolve).error(deferred.reject);
     }
    return {
        get: get
    }
})

这里我的'数据层'是一种只有一种方法的服务：从上面列出的URL中获取。

app.service('MyService',function($http,$q){
    var get = function(){
        var deferred = $q.defer();
        var url = 'test.json';
        $http.get(url).success(deferred.resolve).error(deferred.reject);
    }
    return {
        get: get
    }
})

和我的HTML

<body>
    <script src="libs/angular-1.2.15.js"></script>
    <script src="app/app.js"></script>
    <script src="app/DocumentService.js"></script>
    <script src="libs/jQuery-2.1.1.js"></script>
    <div ng-controller="HomeController">
        <button ng-click="get()" href="#">Get data</button>
        <div>{{message}}</div>
        <!--<div ng-repeat="p in people" >-->
            <!--<b>Business Doc ID: </b><h1>{{p['busDocId']}}</h1>-->
            <!--<b>DOC ID: </b><a href="#">{{p['docId']}}</a>-->
            <!--<b>FILE NAME: </b><div style="color: green">{{p['fileName']}}</div>-->
        <!--</div>-->

    </div>
    <div  ng-controller="ControllerWithService">
        {{message}}
        <button ng-click="get()">get data</button>
        <div>{{data}}</div>

    </div>

</body>

我没有收到任何错误消息，我的HomeController中注释掉的东西按预期工作。在尝试使我的AJAX调用服务时，我做错了什么？

工作解决方案的变化：

    app.service('MyService',function($http,$q){
        this.get = function(){
            return $http.get('test.json')
        }
    })


app.controller('ControllerWithService',function($scope, MyService){
    $scope.data = null;

    $scope.get = function() {
        MyService.get().then(function (data) {
            console.log('this is the success data: ');
            console.log(data)
            $scope.data = data;
        }, function (reason) {
            console.log('this is the fail reason');
            console.log(reason);
            $scope.data = reason;
        })
    }
})

Answer 1

看起来它可能是几个不同的东西。我现在发布一个我在我的一个项目中工作的例子。它应该与你的目标非常相似和简单。

<强>服务

'use strict';
angular.module('srcApp')
  .service('Getlanguage', function Getlanguage($location, $http, $log, $state, $rootScope) {

        this.getContent = function() {
            var language = $location.path().split('/'),
                languageCulture = language[1];

            if (!languageCulture) {
                languageCulture = 'en';
            }

            $rootScope.cultureCode = languageCulture;

            return $http({method: 'GET', url: '/languages/' +  languageCulture + '.json'})
            .error(function() {
                // If service cannot find language json file, redirect to index
                $state.go('lang', {lang: 'en'});
            });
        };


  });

控制器致电服务 将服务作为依赖项传入控制器之后。

 Getlanguage.getContent().then(function(res) {
    $scope.content = res.data;
 });

希望这有帮助。

用于AJAX Angular Service的揭示模块

我没有收到任何错误消息，我的HomeController中注释掉的东西按预期工作。在尝试使我的AJAX调用服务时，我做错了什么？

1 个答案: