Javascript AngularJS主页-本地化示例_Javascript_Angularjs

Javascript AngularJS主页-本地化示例

javascript angularjs

Javascript AngularJS主页-本地化示例,javascript,angularjs,Javascript,Angularjs,我正在学习AngularJS主页底部的本地化示例我正在查看页面的源代码，并尝试完全按照演示向我展示的内容进行操作然而，我似乎无法启动演示代码。最让我困惑的是： <span class="pull-right" js-fiddle="tabs.html components.js beers.js" module="components"> ... <div app-run="tabs.html" module="components-us" class

我正在学习AngularJS主页底部的本地化示例

我正在查看页面的源代码，并尝试完全按照演示向我展示的内容进行操作

然而，我似乎无法启动演示代码。最让我困惑的是：

   <span class="pull-right" 
    js-fiddle="tabs.html components.js beers.js" module="components"> ...
   <div app-run="tabs.html" module="components-us" class="well"> ...

另外，

apprun

和

jsfiddle

来自哪里？我不知道它们是属于AngularJS的功能还是什么

和是定制的角度指令——即，它们编写的用于帮助运行AngularJS主页的指令（因此它们位于文件中的原因，该文件名为homepage.js）

这是演示的一部分。

您是想了解他们是如何将此示例嵌入主页的，还是只想看看本地化示例？如果是后者，只需单击蓝色的“编辑我”按钮，您将在JSFIDLE中获得一个工作示例。

<!doctype html>
<html ng-app>
    <head>
        <meta charset="utf-8">
        <!-- ************IMPORTANT !! change this to your directory************ -->
        <base href='http://localhost/angularjs/localization/' />
        <link rel="stylesheet" href="../bootstrap/css/bootstrap.css">
        <script src="../bootstrap/js/bootstrap.js"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js"></script>
    </head>
    <body>

    <div class=" row example">
        <div class="span1 app-source" app-source="tabs.html components.js beers.js" annotate="tabs.annotation" module="components"></div>
        <div class="span4">
            <span hint></span>
            <span class="pull-right" js-fiddle="tabs.html components.js beers.js" module="components"></span>
            <div class="tabs-spacer"></div>
            <h4>Locale: {{ 'US' }}</h4>
            <div app-run="tabs.html" module="components-us" class="well"></div>
            <div class="tabs-spacer"></div>
            <h4>Locale: {{ 'SK' }}</h4>
            <div app-run="tabs.html" module="components-sk" class="well"></div>
        </div>
    </div>

    <script>
        angular.module('components-us', ['components', 'ngLocal.us']);
        angular.module('components-sk', ['components', 'ngLocal.sk']);
    </script>

    <script type="text/ng-template" id="tabs.html">
        <tabs>
            <pane title="Localization">
                Date: {{ '2012-04-01' | date:'fullDate' }} <br>
                Currency: {{ 123456 | currency }} <br>
                Number: {{ 98765.4321 | number }} <br>
            </pane>
            <pane title="Pluralization">
                <div ng-controller="BeerCounter">
                    <div ng-repeat="beerCount in beers">
                        <ng-pluralize count="beerCount" when="beerForms"></ng-pluralize>
                    </div>
                </div>
            </pane>
        </tabs>
    </script>

    <script id="beers.js">
        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'
                };
            }
        }
    </script>

    <script id="components.js">
        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:
                                '<div class="tabbable">' +
                                        '<ul class="nav nav-tabs">' +
                                        '<li ng-repeat="pane in panes" ng-class="{active:pane.selected}">'+
                                        '<a href="" ng-click="select(pane)">{{pane.title}}</a>' +
                                        '</li>' +
                                        '</ul>' +
                                        '<div class="tab-content" ng-transclude></div>' +
                                        '</div>',
                        replace: true
                    };
                }).
                directive('pane', function() {
                    return {
                        require: '^tabs',
                        restrict: 'E',
                        transclude: true,
                        scope: { title: '@' },
                        link: function(scope, element, attrs, tabsCtrl) {
                            tabsCtrl.addPane(scope);
                        },
                        template:
                                '<div class="tab-pane" ng-class="{active: selected}" ng-transclude>' +
                                        '</div>',
                        replace: true
                    };
                })
    </script>

   </body>
</html>