Angularjs: Multiples partials in single html?

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!

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.

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