Angularjs: Multiples partials in single html?

Question

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!

Can you provide more information about what you are looking for or a fiddle with what you are trying to achieve? — Ganaraj
– Ganaraj, Commented Jul 4, 2012 at 9:37

Marcello Nuccio · Accepted Answer · 2014-03-02 16:57:45Z

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.

edited Mar 2, 2014 at 16:57

answered Jul 4, 2012 at 16:53

Marcello Nuccio

3,9012 gold badges31 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

ryanzec Over a year ago

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.

Marçal Juan Over a year ago

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.

Alfonso de la Osa Over a year ago

@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.

Manish Rawat Over a year ago

Is there a possible way to put html in a separate file? i.e. template1.html, teplate2.html etc

Marcello Nuccio Over a year ago

@ManishRawat if the template is not in the cache, then it is downloaded at templateUrl.

davidjnelson · Accepted Answer · 2013-03-04 23:57:08Z

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

answered Mar 4, 2013 at 23:57

davidjnelson

1,1211 gold badge12 silver badges22 bronze badges

1 Comment

davidjnelson Over a year ago

another alternative, and what google does, is to use closure instead of requirejs for dependency management.

Collectives™ on Stack Overflow

Angularjs: Multiples partials in single html?

2 Answers 2

5 Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

1 Comment

Linked

Related