title: Directive rendering delay when using angularjs and requirejs
body: <p>Basically, my problem is that "I am {{ 10 + 13 }}" is what is being rendered for a second/half a second, before the "store" module is being created in main.js.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en" ng-app="store"&gt;
      &lt;head&gt;
          &lt;title&gt;...&lt;/title&gt;
          &lt;script data-main="main.js" src="../bower_components/requirejs/require.js"&gt;&lt;/script&gt;
          &lt;link href="../bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"&gt;
  &lt;/head&gt;
  &lt;body&gt;
      I am {{ 10 + 13 }}
  &lt;/body&gt;
  </code></pre>
  
  <p></p>
  
  <p>main.js sets the requirejs configs, requires the angular library and sets the "store" module:</p>
  
  <pre><code>require.config({
      paths: {angular: '../bower_components/angular/angular.min'},
      shim: {angular: {exports: 'angular'}}
  });
  
  require(['angular'], function(angular) {
      var app = angular.module('store', []);
  });
  </code></pre>
  
  <p>I think the reason this occurs, is because main.js and the angular library are being loaded asynchronously by requirejs (with an "async" attribute on the script tag), so the DOM gets rendered before the store module has been created, thus creating a delay.</p>
  
  <p>What would I have to do to avoid this gap that occurs between rendering "I am {{ 10 + 13 }}" and "I am 13"? I could load both main.js and the angular js synchronous/without requirejs, but that does not seem like a best practice.</p>