31

Is possible retrieve multiples html partials in one single html? I've the next situation:

Template: {header} {main} {footer}

/index: header:"Welcome" main:"welcome text" footer:""

/help: header:"Help title" main:"faq tips" footer"Back to home"

using ng-include I've to retreive 6 html from server. If I will retrive multiples partials in one html then I will retrieve 2 html from server only, one for /index and one for /help.

  • This situation is a small example the real situation.
  • The tag script with type ng-template don't work for me, because the script must be include before of ng-include.

Thanks!

Update 04/07/12:

I seek to update more than one div at a time, with an unique html retreive. I don't like this:

function IndexCtrl($scope) {
    $scope.mainPage = 'partials/index/index.html';
    $scope.headerTemplate = 'partials/index/header.html';
    $scope.footerTemplate = 'partials/index/footer.html';
}

After in the template use ng-includes for include these partials. I think that this is not the correct way. There is other way?

Thanks!

Jose Ignacio Larghi
  • 488
  • 1
  • 7
  • 11
  • Can you provide more information about what you are looking for or a fiddle with what you are trying to achieve? – ganaraj Jul 04 '12 at 09:37

2 Answers2

50

Templates can be embedded in the main html. For example, with the following index.html:

<!DOCTYPE html>
<html ng-app=app>
<meta charset=utf-8>
<title>App</title>
<ng-view>Loading...</ng-view>
<script type=text/ng-template id=partial1.html>
 <p>foo = {{foo}}</p>
</script>
<script type=text/ng-template id=partial2.html>
 <p>Contents of partial2.html</p>
</script>
<script src=app.js></script>

you can use the following app.js:

angular.module('app', [], ['$routeProvider', '$controllerProvider', function($routeProvider, $controllerProvider) {

  $routeProvider.when('/p1', { templateUrl: 'partial1.html', controller: 'Partial1' });

  $controllerProvider.register('Partial1', ['$scope', function($scope) {
    $scope.foo = 'bar';
  }]);
}]);

The documentation for the $templateCache service has more details.

Marcello Nuccio
  • 3,901
  • 2
  • 28
  • 28
  • 4
    One thing to keep in mind with this solution is that it probably does not scale well. If you only have a few templates, this will work very nicely. If you are building a larger scale application with dozens of templates, your index file is going to be very heavy and harder to maintain. – ryanzec Nov 15 '12 at 13:11
  • 9
    Mmm well, if you use a backend to generate the HTML you could manage your partials as real partials (different files), but joining all in one HTML for performance. Is how I do it right now. – Marçal Juan Dec 15 '12 at 18:12
  • 2
    @Marçal, I do this in a building step, apart from minifying all the css and js and distribute in logical blocks (common + current app) I generate a file with all the templates that can easily have a response of 304 as is manages by the server or the cache layer... In the dev env I just serve the files separately on demand. – Alfonso de la Osa Apr 26 '13 at 13:36
  • Is there a possible way to put html in a separate file? i.e. template1.html, teplate2.html etc – Manish Rawat May 18 '16 at 09:33
  • @ManishRawat if the template is not in the cache, then it is downloaded at templateUrl. – Marcello Nuccio May 19 '16 at 12:51
5

What I do is use template instead of templateUrl, and use the requirejs text plugin to load the templates. that way for development you can have thousands of files for your templates, but once you minify you only have one javascript file with all the templates inlined.

I created an open source project which is setup for backbone but can easily be modified for angular which does the minification and requirejs text plugin wiring for you: http://github.com/davidjnelson/agilejs

davidjnelson
  • 1,111
  • 12
  • 22