2012-07-04 33 views
31

Mümkünse birden fazla html kısmi tek bir html almak mümkün mü? Ertesi durum ettik:Angularjs: Tek html cinsinden katlar mı?

Template: {header} {main} {footer} 

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

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

kullanarak ben sunucudan 6 html Retreive ettik ng-sayılabilir. Bir html içinde kısmi kısmi miktarları geri alırsam, sadece sunucudan 2 html,/index için bir tane ve/for/help alırım.

  • Bu durum, gerçek durumun küçük bir örneğidir.
  • etiketi tip ng-şablonun ile komut ng-dahil arasında önce komut dahil edilmelidir, çünkü benim için çalışmaz.

Teşekkürler!

Güncelleme 04/07/12: Ben eşsiz bir html Retreive ile, bir defada birden fazla div tazelemeyi isteyecektir

. Bunu sevmiyorum: Bu partials dahil şablon kullanımda ng-kapsamaktadır

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

sonra. Bunun doğru yol olmadığını düşünüyorum. Başka yolu var mı?

Teşekkürler!

+0

ne arıyorsun ya yaptıklarıyla ilgili daha fazla bilgi verebilir:

Ben omurga için hazırlandığında ama kolayca minification yapar ve sizin için metin eklentisi kablolama requirejs hangi açısal için değiştirilebilir bir açık kaynak projesi oluşturdu elde etmeye çalıştığınız şeyle bir keman mı? – ganaraj

cevap

50

Şablonlar ana html'ye gömülebilir. Örneğin, index.html aşağıdaki:

<!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> 

Eğer app.js aşağıdaki kullanabilirsiniz:

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 fazla ayrıntı vardır.

+0

Teşekkürler! Çok yararlı. – jlarghi

+4

Bu çözümün akılda tutulması gereken bir şey, muhtemelen iyi ölçeklenmemesidir. Sadece birkaç şablonunuz varsa, bu çok güzel çalışacaktır. Düzinelerce şablonla daha büyük ölçekli bir uygulama oluşturuyorsanız, dizin dosyanızın bakımı çok ağır ve zor olacaktır. – ryanzec

+9

Mmm, HTML oluşturmak için bir arka uç kullanırsanız, kısmi öğelerinizi gerçek kısmi (farklı dosyalar) olarak yönetebilir, ancak performans için tek bir HTML'ye katılabilirsiniz. Şu an bunu nasıl yapıyorum. –

5

Yaptığım şey, templateUrl yerine şablon kullanmak ve şablonları yüklemek için requirejs metin eklentisini kullanmak. Geliştirme için bu şekilde şablonlarınız için binlerce dosyaya sahip olabilirsiniz, ancak küçülttüğünüzde, yalnızca tüm şablonları içeren bir javascript dosyanız vardır. http://github.com/davidjnelson/agilejs

+0

başka bir alternatif ve google ne yapar, bağımlılık yönetimi için requirejs yerine kapatma kullanmaktır. – davidjnelson