AngularJS 主页 - 本地化示例
AngularJS Home Page - Localization Example
我正在研究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"> ...
因为我不承认app-run
或js-fiddle
是 AngularJS 语法(或者是吗?无论如何,演示应用程序不会启动。你能帮我看看吗?
这是我从AngularJS主页复制和粘贴并放入index.html的代码:(相应地将标头库和库更改为您的目录)
索引.html
<!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>
另外,app-run
和js-fiddle
来自哪里?我无法弄清楚它们是属于 AngularJS 的功能还是什么。
app-run 和 js-fiddle 是自定义的 Angular 指令——即它们为帮助运行 AngularJS 主页而编写的指令(因此它们在文件中恰当地命名为 homepage.js)。
这是演示的工作 plnkr。
相关文章:
- 当浏览器上的后退按钮到达主页时,我需要删除Class
- 如何在只能有一个asp.net表单的主页上从asp.net页面中的javascript中获取值
- Angularjs 1.5.x本地化最佳实践
- 什么'是在asp.net MVC中将本地化的resources.resx文件转换为javascript文件的有效
- 在主页上时,我的整个导航都会突出显示
- Magento网站上线直播服务器只显示主页
- 在Datatables中设置本地化后,需要更改标签文本
- HTML5主页基于菜单点击
- jQuery无法在主页上工作
- 谷歌上的JavaScript'的主页
- 事件发生后重定向到主页.preventDefault.
- 如何在主页的弹出窗口中从向导中的用户控制中获取ControlToValidate ID-javascript asp.n
- Jquery显示的导航不'单击'主页'
- 如何获取整个laravel语言(本地化)数据
- 在Phonegap/iOS中按下主页按钮时访问本地存储
- 检测视口并重定向到不同的主页
- 在Jquery easyui中,多个选项卡提交按钮点击事件正在重定向到主页(第一个)选项卡
- Cordova收听iOS主页按钮按下
- 如何本地化配色系统
- AngularJS 主页 - 本地化示例