Angularjs：单个html中的多个部分？
Posted
技术标签:
【中文标题】Angularjs：单个html中的多个部分？【英文标题】：Angularjs: Multiples partials in single html? 【发布时间】：2012-07-04 13:09:02 【问题描述】：是否可以在一个 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。
这种情况是真实情况的一个小例子。 ng-template 类型的标签 script 对我不起作用，因为该脚本必须在 ng-include 之前包含.谢谢！
2012 年 4 月 7 日更新：
我试图一次更新多个 div，并使用独特的 html 检索。我不喜欢这样：
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';
]);
]);
documentation for the $templateCache service 有更多详细信息。
【讨论】：
使用此解决方案要记住的一点是，它可能无法很好地扩展。如果您只有几个模板，这将非常有效。如果您正在构建一个包含数十个模板的大型应用程序，那么您的索引文件将会非常繁重且难以维护。 嗯，如果您使用后端来生成 HTML，您可以将您的部分作为真正的部分（不同的文件）进行管理，但为了提高性能，将所有部分合并到一个 HTML 中。我现在就是这样做的。 @Marçal，我在构建步骤中执行此操作，除了缩小所有 css 和 js 并分布在逻辑块（通用 + 当前应用程序）中，我生成一个包含所有模板的文件，这些模板可以轻松拥有由服务器或缓存层管理的 304 响应...在开发环境中，我只是根据需要单独提供文件。 有没有办法将 html 放在一个单独的文件中？即template1.html、teplate2.html等 @ManishRawat 如果模板不在缓存中，则在 templateUrl 下载。【参考方案2】：我所做的是使用模板而不是 templateUrl，并使用 requirejs 文本插件来加载模板。以这种方式进行开发，您的模板可以拥有数千个文件，但一旦缩小，您就只有一个内联所有模板的 javascript 文件。
我创建了一个开源项目，它是为骨干网设置的，但可以很容易地修改为 angular，它为您进行缩小和 requirejs 文本插件接线：http://github.com/davidjnelson/agilejs
【讨论】：
另一种选择，也就是谷歌所做的，是使用闭包而不是 requirejs 进行依赖管理。以上是关于Angularjs：单个html中的多个部分？的主要内容，如果未能解决你的问题，请参考以下文章
如何在单个服务器上提供多个前端（AngularJS）应用程序和 1 个后端（Laravel）应用程序？
单个 angularjs 承诺上的多个 .then() ——全部使用 _original_ 数据