CODEWITHSUNDEEP
javascriptangularjsgoogle-sheetstabletop.js
Imo
Imo

Reputation: 1475

How to setup service to pass google sheet IDs? AngularJS

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


});

Upvotes: 7

Views: 433

Answers (3)

BMcV
BMcV

Reputation: 613

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

Upvotes: 2

puemos
puemos

Reputation: 1209

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>

Upvotes: 3

Gal Silberman
Gal Silberman

Reputation: 3884

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.

Upvotes: 1

Related Questions