jla*_*ghi 31 html partials angularjs
可以在一个单独的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.
谢谢!
更新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包括这些部分.我认为这不是正确的方法.还有其他方法吗？
谢谢!
Mar*_*cio 50
模板可以嵌入主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服务的文档包含更多详细信息.
我所做的是使用模板而不是templateUrl,并使用requirejs文本插件来加载模板.这种开发方式可以为您的模板提供数千个文件,但是一旦缩小,只有一个javascript文件包含内联的所有模板.
我创建了一个开源项目,它是为骨干设置的,但可以很容易地修改为angular,它可以为你缩小和需要文本插件连接:http: //github.com/davidjnelson/agilejs