title: AngularJS Home Page - Localization Example
body: <p>I am studying the Localization example at the bottom of AngularJS home page.</p>
  
  <p>I am looking at the source of the page and try to do exactly what the demo shows me.</p>
  
  <p>However, I can't seem to fire up the demo code. The lines that confused me the most are:</p>
  
  <pre><code>   &lt;span class="pull-right" 
      js-fiddle="tabs.html components.js beers.js" module="components"&gt; ...
     &lt;div app-run="tabs.html" module="components-us" class="well"&gt; ...
  </code></pre>
  
  <p>Because I don't recognise <code>app-run</code> or <code>js-fiddle</code> to be AngularJS syntax (or is it?). Anyway, the demo  app doesn't fire up. Could you please help me take a look?</p>
  
  <p>Here is the code I COPY &amp; PASTE from AngularJS home page and put in index.html: (change the header base and libraries to your directory accordingly)</p>
  
  <p><strong>index.html</strong></p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html ng-app&gt;
      &lt;head&gt;
          &lt;meta charset="utf-8"&gt;
          &lt;!-- ************IMPORTANT !! change this to your directory************ --&gt;
          &lt;base href='http://localhost/angularjs/localization/' /&gt;
          &lt;link rel="stylesheet" href="../bootstrap/css/bootstrap.css"&gt;
          &lt;script src="../bootstrap/js/bootstrap.js"&gt;&lt;/script&gt;
          &lt;script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js"&gt;&lt;/script&gt;
      &lt;/head&gt;
      &lt;body&gt;
  
      &lt;div class=" row example"&gt;
          &lt;div class="span1 app-source" app-source="tabs.html components.js beers.js" annotate="tabs.annotation" module="components"&gt;&lt;/div&gt;
          &lt;div class="span4"&gt;
              &lt;span hint&gt;&lt;/span&gt;
              &lt;span class="pull-right" js-fiddle="tabs.html components.js beers.js" module="components"&gt;&lt;/span&gt;
              &lt;div class="tabs-spacer"&gt;&lt;/div&gt;
              &lt;h4&gt;Locale: {{ 'US' }}&lt;/h4&gt;
              &lt;div app-run="tabs.html" module="components-us" class="well"&gt;&lt;/div&gt;
              &lt;div class="tabs-spacer"&gt;&lt;/div&gt;
              &lt;h4&gt;Locale: {{ 'SK' }}&lt;/h4&gt;
              &lt;div app-run="tabs.html" module="components-sk" class="well"&gt;&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;script&gt;
          angular.module('components-us', ['components', 'ngLocal.us']);
          angular.module('components-sk', ['components', 'ngLocal.sk']);
      &lt;/script&gt;
  
      &lt;script type="text/ng-template" id="tabs.html"&gt;
          &lt;tabs&gt;
              &lt;pane title="Localization"&gt;
                  Date: {{ '2012-04-01' | date:'fullDate' }} &lt;br&gt;
                  Currency: {{ 123456 | currency }} &lt;br&gt;
                  Number: {{ 98765.4321 | number }} &lt;br&gt;
              &lt;/pane&gt;
              &lt;pane title="Pluralization"&gt;
                  &lt;div ng-controller="BeerCounter"&gt;
                      &lt;div ng-repeat="beerCount in beers"&gt;
                          &lt;ng-pluralize count="beerCount" when="beerForms"&gt;&lt;/ng-pluralize&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/pane&gt;
          &lt;/tabs&gt;
      &lt;/script&gt;
  
      &lt;script id="beers.js"&gt;
          function BeerCounter($scope, $locale) {
              $scope.beers = [0, 1, 2, 3, 4, 5, 6];
              if ($locale.id == 'en-us') {
                  $scope.beerForms = {
                      0: 'no beers',
                      one: '{} beer',
                      other: '{} beers'
                  };
              } else {
                  $scope.beerForms = {
                      0: 'žiadne pivo',
                      one: '{} pivo',
                      few: '{} pivá',
                      other: '{} pív'
                  };
              }
          }
      &lt;/script&gt;
  
      &lt;script id="components.js"&gt;
          angular.module('components', []).
                  directive('tabs', function() {
                      return {
                          restrict: 'E',
                          transclude: true,
                          scope: {},
                          controller: function($scope, $element) {
                              var panes = $scope.panes = [];
  
                              $scope.select = function(pane) {
                                  angular.forEach(panes, function(pane) {
                                      pane.selected = false;
                                  });
                                  pane.selected = true;
                              }
  
                              this.addPane = function(pane) {
                                  if (panes.length == 0) $scope.select(pane);
                                  panes.push(pane);
                              }
                          },
                          template:
                                  '&lt;div class="tabbable"&gt;' +
                                          '&lt;ul class="nav nav-tabs"&gt;' +
                                          '&lt;li ng-repeat="pane in panes" ng-class="{active:pane.selected}"&gt;'+
                                          '&lt;a href="" ng-click="select(pane)"&gt;{{pane.title}}&lt;/a&gt;' +
                                          '&lt;/li&gt;' +
                                          '&lt;/ul&gt;' +
                                          '&lt;div class="tab-content" ng-transclude&gt;&lt;/div&gt;' +
                                          '&lt;/div&gt;',
                          replace: true
                      };
                  }).
                  directive('pane', function() {
                      return {
                          require: '^tabs',
                          restrict: 'E',
                          transclude: true,
                          scope: { title: '@' },
                          link: function(scope, element, attrs, tabsCtrl) {
                              tabsCtrl.addPane(scope);
                          },
                          template:
                                  '&lt;div class="tab-pane" ng-class="{active: selected}" ng-transclude&gt;' +
                                          '&lt;/div&gt;',
                          replace: true
                      };
                  })
      &lt;/script&gt;
  
     &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Also, where are <code>app-run</code> and <code>js-fiddle</code> from? I can't figure out if they are features belong to AngularJS or what.  </p>