title: Using ng-route with Google-Apps-Script or some means of rendering a partial html view
body: <p>I am trying to get <code>ng-route</code> working with a google-apps-script web app. I have managed to get basic angular.js functionality working with google-apps-script, but I can't seem to get <code>ng-route</code> to work. I have placed  ng-view tags inside a page and have included a separate JavaScript page that contains the routeProvider function.</p>
  <p>The ng-view never gets rendered and as far as I can make out the routeProvider does not get called.</p>
  <p>Can anyone offer any advice on using <code>ng-route</code> with google-apps-script or suggest another way of rendering a partial html page with google-apps-script</p>
  <p>Any answers greatly appreciated.</p>
  <p>Have simplified my code and added below:
  Code.gs</p>
  <pre class="lang-js prettyprint-override"><code>    function doGet(e) {
      var template = HtmlService.createTemplateFromFile('Index');
  
      // Build and return HTML in IFRAME sandbox mode.
      return template.evaluate()
          .setTitle('Web App Window Title')
          .setSandboxMode(HtmlService.SandboxMode.IFRAME);
      }
  
      function getScriptUrl() {
       var url = ScriptApp.getService().getUrl();
          return url;
      }
  </code></pre>
  <p>index.html</p>
  <pre class="lang-html prettyprint-override"><code>    &lt;!-- Use a templated HTML printing scriptlet to import common stylesheet. --&gt;
      &lt;?!= HtmlService.createHtmlOutputFromFile('Stylesheet').getContent(); ?&gt;
    &lt;html&gt;
        &lt;body ng-app=&quot;myApp&quot;&gt;
        &lt;h1&gt;NG View&lt;/h1&gt;
          &lt;ng-view&gt;&lt;/ng-view&gt;
   
        &lt;p&gt;angular check {{'is' + 'working!'}}&lt;/p&gt;
   
           &lt;? var url = getScriptUrl();?&gt;
           &lt;p id=&quot;urlid&quot;&gt;&lt;?=url?&gt;&lt;/p&gt;
           &lt;/body&gt;
      &lt;/html&gt;
      &lt;!-- Use a templated HTML printing scriptlet to import JavaScript. --&gt;
      &lt;?!= HtmlService.createHtmlOutputFromFile('JavaScript').getContent(); ?&gt;
  </code></pre>
  <p>Javascript.html</p>
  <pre><code>    &lt;script src=&quot;//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js&quot;&gt;&lt;/script&gt;
      &lt;script src=&quot;https://code.angularjs.org/1.3.15/angular.js&quot;&gt;&lt;/script&gt;
      &lt;script src=&quot;https://code.angularjs.org/1.3.15/angular-route.js&quot;&gt;  &lt;/script&gt;
     &lt;link href=&quot;https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css&quot; rel=&quot;stylesheet&quot;&gt;
  
    &lt;script&gt;
    angular.module('myApp', ['ngRoute'])
  
    .config(function($routeProvider){
       console.log('routeProvider config');
     var url = document.getElementById(&quot;urlid&quot;).innerHTML;
     console.log('routeProvider config-&gt;' +url);
     $routeProvider.when(&quot;/&quot;,
     {
       templateUrl:  url+&quot;?page=_app.html&quot;,
       controller: &quot;AppCtrl&quot;,
       controllerAs: &quot;app&quot;
     }
     );
      })
      .controller('AppCtrl', function() {
        var self = this;
        self.message = &quot;The app routing is working!&quot;;
      });
      &lt;/script&gt;
  </code></pre>
  <p>_app.html</p>
  <pre class="lang-html prettyprint-override"><code>    &lt;div&gt;
        &lt;h1&gt;{{ app.message }}&lt;/h1&gt;
      &lt;/div&gt;
  </code></pre>
  <p>When this runs angular check <code>{{'is' + 'working!'}}</code> works fine, but the ng-view does not get rendered the java console shows:</p>
  <blockquote>
  <p>Error: [$sce:insecurl] Blocked loading resource from url not allowed by $sceDelegate policy.</p>
  </blockquote>