Light Mode

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

famouspotatoes1/google-apps-script-angularjs

Folders and files

NameName
Last commit message
Last commit date

Latest commit

History

16 Commits

Repository files navigation

Use AngularJS and Google Apps Script together

You can use Google Apps Script to make a unique web application, deployed to a private URL and secured for people behind your private corporate domain, just you, or expose it to the entire web. It is up to you. You can also use almost any JavaScript framework or Library of your choice (AngularJS, Vue, Mithril, etc.), essentially anything you can add with a "><script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js">script>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous">script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous">script>

<script>
////// Module Definition//////
(function () {
'use strict';
angular
.module('App', [])
})();

(function () {
'use strict';
angular
.module('App')
.controller('MainController', MainController)

MainController.$inject = ['$scope']

function MainController($scope) {
$scope.helloWorld = 'Hello World'
}
})();
script>

If you search the web, you will find people who have written on Stack Overflow about not being able to use the minified versions, or the Caja Sanitizer did this or couldn't do that. I have not found any issues. Minified versions work just fine, css libraries work just fine, most all JavaScript libraries or frameworks work just fine. The base Google Apps Script functionality (using .gs files) requires ES5, but when you are doing a Single Page App this way, you can use some of the ES2015 features. I'm no expert in why some work and some don't so I won't try to explain it.

  • Arrow functions work (arr.map(v => v + 1)
  • Operators let and const work just fine
  • Template Strings DO NOT work

Finally, Publish the Web App

The next step is to Publish the web app and it is really simple. From the command bar select Publish > Deploy as web app.

You will be presented with a modal dialog that has a few options:

If you choose to run the app as Me, people would technically have access to your Google Drive. Sometimes that is what you want, like in a secured corporate environment, you may want to send emails using your Google credentials or maybe save some file to a location on your Drive. For a publically facing web app, I would probably choose the second option User accessing the web app.

The next dropdown has the options that determine the accessibility of the app.

It can be private, like if you wanted to use it for a home iot dashboard interface, this would be a great option. If you want anyone else to see it, the only other option is to allow Anyone. I'm not sure what even anonymous means, but it doesn't sound like a secure option so I haven't used it. If you are part of a G Suite domain, like at work, you will have one more option: Anyone at yourdomain.com. This is the feature I mentioned earlier that I think adds a nice layer of security. Now I don't need to worry about my URL being shared outside my organization, even if somebody did by mistake.

You will have to select New the first time you deploy it. From there on, it will have a version number and this is where you get some basic version control. The app will have two separate URL's you can access it from, a development one (ending in /dev) and a production one (ending in /exec). When you deploy and change version numbers, users accessing the app from the production url will get your latest code. If you are accessing the app through the development url, any changes you make in the editor are immediately executed and shown. I wouldn't share the development url.

Is there anything special when using Google Apps Scripts for Single Page Web Apps?

There are a few things you may want to know:

  • Any library you want to use must be linked up using