title: How can I improve performance with angular ng-mouseover, loading templates at a fast pace?
body: <p>I am making a games website with angularJS. </p>
  
  <p>There are three game-types (a number game, and two different word games), and each "game-type" has 30 games with it, for a total of 90 games. </p>
  
  <p>This is shown on the view on my site with a header for each game-type, and underneath each header there are 30 boxes numbered 1-30, representing the 90 games. If you hover over one of the 90 boxes, I want it to show a preview of the game in a fixed box like this:</p>
  
  <p><code>&lt;div id="preview"&gt;&lt;/div&gt;</code></p>
  
  <p>When the user hovers over one of the 90 boxes, the template for the correct game-type will be inserted into <code>#preview</code> with the correct data sent to it.</p>
  
  <p>Before, I was doing this with dust.js and jquery, and it worked great. I was surprised, but even when the user hovers over all of the boxes quickly, the template loads and is put into the preview box lighting fast with jquery and dust.js.</p>
  
  <p>Then, I decided to switch to angularJS because the JQuery and dust was getting messy. I needed a framework to keep my code maintained, not just libraries.</p>
  
  <p>Each "box" is written in my ng-app like so:</p>
  
  <pre><code>&lt;li ng-repeat="puzzle in game.Puzzle.list" 
  ng-mouseover="hoverSelect(game.Puzzle,$index);"&gt;&lt;/li&gt;
  </code></pre>
  
  <p><code>game</code> is the game-type, which contains an object called <code>Puzzle</code>, which contains the <code>list</code> of the 30 puzzles associated with that game-type. <code>game.Puzzle</code> also has an <code>index</code> property, which is basically meant to say which Puzzle from the <code>list</code> is the currently chosen one. It is this particular puzzle from the list that will be shown in the preview. <code>hoverSelect</code> says "make <code>$index</code> the currently chosen puzzle from the list". </p>
  
  <p>After <code>hoverSelect</code> is called via ng-mouseover, the view is automatically updated. Now in <code>#preview</code>, it shows the correct template, and the correct data to fill it.</p>
  
  <p>The problem is, while dust.js and jQuery were doing this well, angular can't quite keep up. I can imagine why...mouseovers happen so fast...could be 10-20 per second. For every time the user mouses-over, angular has to go through it's entire cycle and update the view. It doesn't help that my templates utilize a lot of <code>ng-repeat</code>, which I hear is a very slow directive.</p>
  
  <p>One option is to go back to doing things the old way just for this one thing...include JQuery and dust.js in my app. But, I don't want to do that. Firstly, it's 2 more scripts I have to load, and also, it messes up the logic of the app. I want to use the same template for the "preview" and for when the actual game is being played (changing only the CSS), and I don't want to switch between angularJS and dust.js for essentially the same template. That is not really DRY.</p>
  
  <p>My question is, is there a way to tell angularJS to do this one part of the application in a faster way? All I need it to do is what JQuery and dust would have done. There is no dynamic input fields here or anything like that, so all that needs to be done is that the template gets pre-compiled, and the data gets pushed into it and sent to the preview box onmouseover. For this particular value, angularJS does not need to constantly watch for value changes or anything like that. I'm not really sure exactly what makes angular-JS so slow and jquery/dust so fast, but is there any way to make angularJS act like JQuery/dust just for this one particular mouseover directive?</p>
  
  <p>Thanks!</p>