揭示AJAX Angular Service的模块

Revealing module for AJAX Angular Service

本文关键字：模块 Service Angular AJAX 揭示      更新时间：2023-09-26

下面我有一个angular应用程序和控制器，控制器内部有数据访问(我知道这是个坏主意)

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

这将用于检索数据并将其放到页面上。知道在控制器中拥有数据访问并不好，我试图将其抽象为一个服务:

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

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

服务: 

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

相关文章：