CODEWITHSUNDEEP
javascriptasp.netangularjsperformance
Herb Caudill
Herb Caudill

Reputation: 49952

Strategy for combining Angular templates to reduce requests?

Background: We're in the process of porting an ASP.NET application from traditional WebForms to Web API + Angular. The app is primarily used in countries with poor internet connections, and we've found in practice that latency is a bigger issue than bandwidth. So our priority is to reduce the overall number of requests to the server, even if that means pre-loading scripts or other resources that the user might not ending up needing.

The problem: As we replace WebForms user controls (*.ascx) with Angular directives and templates, the number of little HTML template files is proliferating; so you have to make a lot of server requests for any given view, which is a big problem in a high-latency environment.

One possible approach: I'm thinking of using T4 to combine all templates used by the app into a single file that would look something like this:

myApp.templates = {};

myApp.templates.myFirstDirective = "<div> ... lots of markup here ... </div>"
myApp.templates.mySecondDirective = "<table> ... more markup ... </table>"

This file would then be requested once and cached by the browser, so subsequent page loads wouldn't require any further round trips to the server. The templates would then be available to all directives so that instead of referencing a templateUrl they just pull up the required template like this

return {
    link: link,
    template: myApp.templates.myFirstDirective,
    ... etc
}

Question: Is this a good idea? Is there a better or more Angular-native way of combining Angular templates into a single file?

Upvotes: 1

Views: 1723

Answers (4)

Konstantin
Konstantin

Reputation: 3957

We are leaving those html files as they are during development, but combine them into single .js file (which we then add to our main bundle .js file), when we need an optimized build.

We use https://www.npmjs.com/package/gulp-angular-templatecache - it's literally just a few minutes setup if you already have gulp build.

Upvotes: 1

Priyanshu Jindal
Priyanshu Jindal

Reputation: 871

What I do is define all my templates after my main html body. Doing this also provides a way to automate the process of building a single file from different directive files for example:

<!DOCTYPE HTML>
<html>
<head>
  <script src="bower_components/angular/angular.js"></script>
</head>
<body ng-app="MyApp">
  <my-directive></my-directive>
  <script src="app.js"></script>
</body>
</html>
<content>
  <script type="text/ng-template" id="template1.html">
    <h1>Hello</h1>
  </script>
</content>

My app.js:

 angular.module('MyApp',[])
.directive('myDirective', function() {
    return {
        scope:{

        },
        restrict:'AE',
        templateUrl:'template1.html',
        replace:false
    }
})

This way we can easily keep all the javascript for directive in there own files and html for these directives in there own file And during build time we can easily merge these files so that we have only two files: index.html and app.js which means only two requests to server.

Upvotes: 0

David Losert
David Losert

Reputation: 4802

Maybe using the $templateCache-Service is a possibility. Read about it here.

If I understand it right, it's basically what you were already planning, with the difference that you don't need HTML strings in your JavaScript but you can write HTML in .html files (or one big HTML file containing all Templates embedded via an ng-include in your index.html).

Upvotes: 2

Dylan
Dylan

Reputation: 4773

You could put them in the page kinda like Ember

<script type="text/ng-template" id="/template.html">
  content
</script>

Upvotes: 2

Related Questions