Angularjs: Умножает частичные части в одном html?

Можно ли получить множественные частичные части html в одном html? У меня следующая ситуация:

Template: {header} {main} {footer}

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

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

с помощью ng-include Я должен восстановить 6 html с сервера. Если я выберу частичные частичные части в одном html, тогда я получу 2 html только с сервера, один для /index и один для /help.

  • Эта ситуация - небольшой пример реальной ситуации.
  • Тег script с типом ng-template не работает для меня, потому что script должен быть включен до ng-include.

Спасибо!

Обновление 04/07/12:

Я пытаюсь обновить более одного div за раз, с уникальным html retreive. Мне это не нравится:

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

После использования в шаблоне ng-includes включите эти частичные. Я думаю, что это не правильный путь. Есть другой способ?

Спасибо!

Ответы

Ответ 1

Шаблоны могут быть встроены в основной html. Например, со следующим 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>

вы можете использовать следующие 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';
  }]);
}]);

Документация для службы $templateCache содержит более подробную информацию.

Ответ 2

Я использую шаблон вместо templateUrl и использую плагин requirejs для загрузки шаблонов. таким образом, для разработки у вас могут быть тысячи файлов для ваших шаблонов, но как только вы минимизируете, у вас есть только один файл javascript со встроенными шаблонами.

Я создал проект с открытым исходным кодом, который настроен для магистральной сети, но может быть легко изменен для angular, который выполняет для вас проводку minification и requirejs для текстового плагина: http://github.com/davidjnelson/agilejs