Menu
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 } )
}
});
745
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>
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;
}
};
}
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.
1
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
