Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse code

Add angular templates

  • Loading branch information...
commit 779779128874e7474527276c969f246615944d7b 1 parent b92d976
Ladislav Prskavec authored

Showing 1 changed file with 81 additions and 0 deletions. Show diff stats Hide diff stats

  1. +81 0 source/_posts/2012-08-14-angualarjs-templates.markdown
81 source/_posts/2012-08-14-angualarjs-templates.markdown
Source Rendered
... ... @@ -0,0 +1,81 @@
  1 +---
  2 +layout: post
  3 +title: "angualarjs-templates"
  4 +date: 2012-08-14 21:40
  5 +comments: true
  6 +categories: javascript, angularjs
  7 +---
  8 +
  9 +# Šablony v AngularJS
  10 +
  11 +Pokud začínáte s [AngularJS](http://www.angularjs.org) je dobré pro aplikace použít [angular-seed](https://github.com/angular/angular-seed).
  12 +
  13 +## Jednotlivé šablony v samostatných souborech
  14 +
  15 +Šablony v angular-seed jsou rozděleny do samostatných souborů.
  16 +
  17 + app/
  18 + js/
  19 + app.js
  20 + partials/
  21 + partial1.html
  22 + partial2.html
  23 +
  24 +v app.js se potom načítají samostatně
  25 +
  26 + $routeProvider.when('/view1', {templateUrl: 'partials/partial1.html', controller: MyCtrl1});
  27 + $routeProvider.when('/view2', {templateUrl: 'partials/partial2.html', controller: MyCtrl2});
  28 +
  29 +Důležité je angularjs sice používa template cache, ale pro každý soubor si sáhne samostatně a udělá 2 requesty, což nemusí být optimální obzvláště pokud by jste měli 20 šablon.
  30 +
  31 +Tento způsob se hodí při vývoji, aby jste měli šablony samostatně pro přehlednost.
  32 +
  33 +## Inline šablony
  34 +
  35 +V manuálu najdete jak vkládat [šablony](http://docs.angularjs.org/api/ng.directive:script), přímo do stránek pomocí script tagu.
  36 +
  37 + <script type="text/ng-template" id="partial1.html">
  38 + <p>This is the partial for view 1.</p>
  39 + </script>
  40 +
  41 +Ty se dají použít velmi dobře. Pokud je to menší kód, ale jinak je lepší mít v samostatných souborech.
  42 +
  43 +## Kombinace obou způsobů
  44 +
  45 +Jak jsem to konzultoval s Vojto Jínou. Bereme, že pro development je dobré použít jednotlivé šablony samostatně, ale pro nasazení je dobré spojit šablony do jednoho souboru, aby jste ušetřili requesty.
  46 +
  47 +Dá se použít například Grunt script pro vložení samostaných šablon z developmentu do inline šablon. Ukázkový script udělal Vojta Jína.
  48 +
  49 +{% gist 3347478 %}
  50 +
  51 +## Další možnosti
  52 +
  53 +K tomu článku mě přivedl tento tweet.
  54 +
  55 +{% blockquote @PatrikVotocek https://twitter.com/PatrikVotocek/statuses/235100756905189376 %}
  56 +Nevíte někdo jak v #angularjs docílit toho abych měl jeden (externí) soubor se všema šablonama?
  57 +{% endblockquote %}
  58 +
  59 +To by předpokládalo řešení, že budeme mít soubor s šablonami a zkusíme ho načíst a zpracovat.
  60 +
  61 + <script src="all-templates.html" all-templates></script>
  62 +
  63 + module.directive('allTemplates', function() {
  64 + return {
  65 + terminal: true,
  66 + compile: function(elm) {
  67 + $compile(elm);
  68 + };
  69 + };
  70 + });
  71 +
  72 +a potom by jste to chtěli načíst, ale má to potíže protože se to nepřidá do DOMu.
  73 +
  74 + $http.get('all-templates.html').success(function(content) {
  75 + $compile(content);
  76 + });
  77 +
  78 +Bohužel toto řešení se mi nepodařilo nějak uspokojivě rozchodit, aby se do DOMu šablona dostala, ale možná najdete řešení. Ale není to doporučované řešení. Zkuste se držet toho, že pro vývoj šablony dáte do samostatných souborů a pro vývoj si to nalinkujete dovnitř.
  79 +
  80 +Pokud někdo rozchodíte poslední řešení dejte vědět v komentářích.
  81 +

0 comments on commit 7797791

Please sign in to comment.
Something went wrong with that request. Please try again.