How to setup service to pass google sheet IDs? AngularJS

Question

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. There are no errors in the console and when I add ID nothing happens

I guess the problem is in service.js

angular.module('adf.widget.charts')
.service('chartService', function(){
  return {
     getUrl: function(key){
     var googleSheetkey = key
     }
   }
   return googleSheetkey
  });

edit.html (to add Sheet ID)

<form role="form">
  <div class="form-group">
    <label for="sample">Sample</label>
    <input type="text" class="form-control" id="sample" ng-model="config.googleSheetkey" placeholder="Enter path">
  </div>
</form>

App.js

angular.module('adf.widget.charts', ['adf.provider', 'nvd3'])
  .config(function(dashboardProvider){
    var widget = {
      templateUrl: '{widgetsPath}/charts/src/view.html',
      reload: true,
      resolve: {
        /* @ngInject */
        urls: function(chartService, config){
          if (config.key){
            return chartService.getUrl(config.googleSheetkey);
          }
        }
      },
      edit: {
        templateUrl: '{widgetsPath}/charts/src/edit.html'
      }
  };

  dashboardProvider
      .widget('piechart', angular.extend({
        title: 'Custom Piechart',
        description: 'Creates custom Piechart with Google Sheets',
        controller: 'piechartCtrl'
        }, widget));
  });

Controller

angular.module('adf.widget.charts')
  .controller('piechartCtrl', function (chartService, $scope) {
    window.onload = function() { init() };
     function init() {
       Tabletop.init( { key: chartService.googleSheetkey,
                        callback: function(data, tabletop) { console.log(data) },
                         simpleSheet: true } )
     }


});

It's very difficult working n your code. You should provide a Testing Plunker or the missing dependencies. I couldn't even start track backing your bug because of that. — Gal Silberman, Jan 13 '16 at 08:02

puemos · Answer 1 · 2016-01-14T16:06:01.527

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>

Thank you so much for your example, your answer is very close to what I was looking for I am actully trying to make a widget for this dashboard framework, you can see an example here https://github.com/angular-dashboard-framework/adf-widget-github/tree/master/src your example works perfectly as is but I cannot adapt it to the widget. Have any idea what should I change in the code. I tried to make a plunker out of it but it seems difficult because of many dependencies — Imo, Jan 15 '16 at 10:52
please write another question or edit the current so everybody can understand the problem — puemos, Jan 15 '16 at 11:24
wrote another question http://stackoverflow.com/questions/34810521/how-to-pass-data-values-from-serivces-to-controller — Imo, Jan 15 '16 at 11:55

score 2 · Answer 2 · answered Jan 15 '16 at 03: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;
            }
        };  
    }

score 1 · Answer 3 · edited May 23 '17 at 12:23

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.

How to setup service to pass google sheet IDs? AngularJS

3 Answers3

Linked