title: Externally pass values to an Angular application
body: <p>I'm thinking of separating our MVC-based website's front-end into few components and I was thinking about using Angular for that purpose (e.g. creating cart application that I can include to my view afterwards).</p>
  
  <p>Problem is that I need to pass few variables into that application and I'm wondering how to do that safely and professionally. I was thinking about something like:</p>
  
  <ol>
  <li>I'm going to <code>ng build --prod --aot</code></li>
  <li>I inject all my scripts to my view</li>
  <li>I inject variables passed to view to my app</li>
  </ol>
  
  <p>... and "code" representation for my thoughts:</p>
  
  <p><strong>Controller:</strong></p>
  
  <pre><code>public function viewAction()
  {
      $this-&gt;view-&gt;addCss('angular/app/styles.css'); // adds styles for cart app 
      $this-&gt;view-&gt;addJS('angular/app/scripts.js');  // adds scripts for cart app
      $this-&gt;view-&gt;setJSVariable('idCustomer', 555); // sets global var idCustomer
  }
  </code></pre>
  
  <p><strong>View:</strong></p>
  
  <pre><code>&lt;!-- bunch of HTML for view ... --&gt;
  &lt;script&gt;
      // CartApp would be an angular app.
      CartApp.use([
          idCustomer
      ]);
  &lt;/script&gt;
  </code></pre>
  
  <p>So my question is... would it be possible (and would it be a good solution) to get the <code>CartApp</code> as an object and then make some function (like <code>use</code> in above example) that would set/pass the data? (let's say to some globally provided service/component or anything else). Or is there any other way to do this? Like taking the variables from inside the application from the window object? (as they're going to be bound to the window anyways). Thank you.</p>