AngularJS templates are removed from page.

[zeelux]

When an AngularJS template is included in the page the entire script block for it is removed from the page and jsperf uses the id of that script block to attempt to load the template from the jsperf.com site.

For example:

<script type="text/ng-template" id="someTemplate">
 <div></div>
</script>

will result in the block being removed and an attempt to load http://jsperf.com/someTemplate.

[jdalton]

@mathiasbynens It seems to be a url rewrite rule that will take someTemplate and map it to some.

[mathiasbynens]

I’m confused. Is the example supposed to be just <div></div>?

http://jsperf.com/someTemplate redirects to http://jsperf.com/some as we don’t support uppercase in slugs. This is intended behavior.

[zeelux]

Sorry the example I gave didn't render the script tags before. I have encoded it so it will show up correctly. As you can now see, I'm not referencing a script using the source it's an inline template using the AngularJS syntax.

[mathiasbynens]

@zeelux Can you give an example jsPerf test case where this issue occurs?

[zeelux]

After some more testing I've found that it isn't that the template is removed from the page, it just gets moved to the bottom of the page with the javascript blocks. This is a problem for AngularJs as the templates must be enclosed in the same html tag that has the "ng-app" attribute. You can see in the sample link below that the script tag is inside a div with the ng-app attribute in my markup but the resulting page when the test is run this is not the case. When the script is moved outside the scope of the angular bindings, angular will not find the template and will attempt to do an http get to pull the file from the server, assuming that the template name is the file name to load.

http://jsperf.com/angularjs-template-test