Angularjs：单个 html 中的多个部分？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11322144/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angularjs: Multiples partials in single html?
提问by jlarghi
Is possible retrieve multiples html partials in one single html? I've the next situation:
是否可以在一个 html 中检索多个 html 部分？我有下一个情况：
Template: {header} {main} {footer}
/index: header:"Welcome" main:"welcome text" footer:""
/help: header:"Help title" main:"faq tips" footer"Back to home"
using ng-includeI'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.
使用ng-include我必须从服务器检索 6 个 html。如果我将在一个 html 中检索多个部分，那么我将仅从服务器检索 2 个 html，一个用于 /index，另一个用于 /help。
- This situation is a small example the real situation.
- The tag scriptwith type ng-templatedon't work for me, because the script must be include before of ng-include.
- 这种情况是真实情况的一个小例子。
- 类型为ng-template的标记脚本对我不起作用，因为该脚本必须包含在ng-include之前。
Thanks!
谢谢！
Update 04/07/12:
12 年 7 月 4 日更新：
I seek to update more than one div at a time, with an unique html retreive. I don't like this:
我寻求一次更新多个 div，并使用独特的 html 检索。我不喜欢这样：
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?
在模板中使用 ng-includes 包含这些部分之后。我认为这不是正确的方法。还有其他方法吗？
Thanks!
谢谢！
回答by Marcello Nuccio
Templates can be embedded in the main html. For example, with the following index.html:
模板可以嵌入到主 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>
you can use the following app.js:
您可以使用以下内容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 servicehas more details.
$templateCache 服务的文档有更多详细信息。
回答by davidjnelson
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.
我所做的是使用模板而不是 templateUrl，并使用 requirejs 文本插件来加载模板。通过这种方式进行开发，您的模板可以有数千个文件，但是一旦缩小，您就只有一个内联所有模板的 javascript 文件。
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
我创建了一个开源项目，它是为主干设置的，但可以很容易地修改为 angular，它为你做缩小和 requirejs 文本插件接线：http: //github.com/davidjnelson/agilejs
