title: Pre-compiling Angular.js template before loading with Node
body: <p>Im learning Angular and trying to build it into my existing Node.js framework. </p>
  
  <p>Before Angular, I used Handlebars.js as my templating engine &amp; would build the context using Node then compile it with the HTML template before writing the headers and loading the HTML essentially like this:</p>
  
  <pre><code>res.writeHead(200, { 'Content-Type': 'text/html' });
  for(var i = 0; i &lt; files.length; ++i) {
  
      var source = files[i].toString('utf8');
  
      // Handlebars
      var template = Handlebars.compile(source);
      var html = template(context);   
  
      res.write(html);
  
  }
  res.end();
  </code></pre>
  
  <p>Now, because Angular is on the client-side, I have to first load the DOM template then have Angular get and compile the data which not only produces a noticeable delay, but seems cumbersome from a coding standpoint since I have to use one server-side controller to load the DOM, then another server-side controller that angular uses to grab the needed data.</p>
  
  <p>1) Load HTML template:</p>
  
  <pre><code>res.writeHead(200, { 'Content-Type': 'text/html' });
  for(var i = 0; i&lt;files.length; ++i) {
  
      var html = files[i].toString('utf8');
      res.write(html);
  
  }
  res.end();
  </code></pre>
  
  <p>2) Load Angular Controller</p>
  
  <pre><code>app.controller('testCtrl', function($scope, $http) {
  
      $http.get('/test').then(function(response){ 
  
          $scope.context = response.data;
  
      });     
  }
  </code></pre>
  
  <p>3) Angular controller calls Server-side controller to grab &amp; return the scope</p>
  
  <pre><code>if(req.method==='GET'){
  
      var context = {test : 'this is the test context'};
  
      res.json(context);  
  }   
  </code></pre>
  
  <p>Is there any way to pre-compile the template with the context using Angular BEFORE the template is loaded? How is this kind of thing normally done?</p>