How to setup service to pass google sheet IDs? AngularJS

后端未结

关注

 3  902

I am building a small widget using angular that takes Google sheet Ids given by user and publishes the output in nice json format. The problem is that my code does nothing.

相关标签:

3条回答

独厮守ぢ

2021-01-18 04:24

Working example here

Example path:

https://docs.google.com/spreadsheet/pub?hl=en_US&hl=en_US&key=0AmYzu_s7QHsmdDNZUzRlYldnWTZCLXdrMXlYQzVxSFE&output=html

Best way is with Promise

Use q framework ($q service)

Remove the logic from the controller to the service

App

angular.module('myApp', []);

Service

angular.module("myApp")
  .service("chartService", function($q) {

    return {
      getSpreadsheet: function init(path) {
        var deferred = $q.defer();
        //if no path use the config key
        Tabletop.init({
          key: path,
          callback: deferred.resolve,
          simpleSheet: true
        });
        return deferred.promise;

      }
    }
  });

Controller

        angular.module('myApp')
  .controller('piechartCtrl', ['$scope', 'chartService', function($scope, chartService) {
    $scope.getSheet = function() {
      chartService.getSpreadsheet($scope.googleSheetPath).then(function(data) {
        $scope.data = data;
      })
    }
  }]);

index.html

<!DOCTYPE html>
<html ng-app="myApp">

<head>
  <link rel="stylesheet" href="style.css">
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
  <script src="tabletop.js"></script>
  <script src="script.js"></script>
</head>

<body ng-controller="piechartCtrl">

<form role="form" ng-submit="getSheet()">
  <div class="form-group">
    <label for="sample">Sample</label>
    <input type="text" class="form-control" id="sample" ng-model="googleSheetPath" placeholder="Enter path">
 <input type="submit" id="submit" value="Submit" />
  </div>
</form>
<div>

  {{data}}
</div>
</body>

</html>

0 讨论(0)

长情又很酷

2021-01-18 04:28

Your code is very unclear. If you want to build a proper service that you can set in the config phase you need a Provider instead, like so:

App.js

angular.module("adf.widget.charts", ["services"])
.config(["chartProvider", function (chartProvider) {
    chartProvider.setKey(1232456);
}]);

Service.js

angular.module("services", [])
.provider("chart", [function () {
    var googleSheetkey = null;

    this.setKey = function (newKey) {
        googleSheetkey = newKey;
    };

    function GoogleSheetkey(key) {
        this.googleSheetkey = key;
    }

    this.$get = [function () {
        return new GoogleSheetkey(googleSheetkey);
    }];
}]);

Controller.js

angular.module("adf.widget.charts")
   .controller("piechartCtrl", ["$scope", "chart",
        function ($scope, chart) {
            $scope.key = chart.googleSheetkey;
      }
    ]);

Index.html

<body ng-app="adf.widget.charts">
  <div ng-controller="piechartCtrl">{{key}}</div>
</body>

Plunker

Also, I really suggest you look at this thread regarding Providers, Factories and services:

AngularJS: Service vs provider vs factory

Hope that will help you a little bit.

0 讨论(0)

轮回少年

2021-01-18 04:45

Could be that there were 2 return statements in the service? Statement moved:

angular
    .module('adf.widget.charts')
    .service('chartService', chartService);

    function chartService(){
        return {
            getUrl: function(key) {
                var googleSheetkey = key;
                return googleSheetkey;
            }
        };  
    }

0 讨论(0)