完成了各种公共页面的汉化

This commit is contained in:
Zhicheng Wang 2016-04-10 00:38:38 +08:00
parent eb7439e17f
commit 2587cf0105
26 changed files with 213 additions and 118 deletions

View File

@ -1,4 +1,4 @@
.l-main-section
h2 404
p Whoops. Looks like what you're looking for can't be found.
p 啊~~~ 你好像在找某些不存在的东西!

View File

@ -1,33 +1,33 @@
{
"index": {
"hero": "home",
"title": "One framework.",
"subtitle": "Mobile and desktop."
"title": "一个框架",
"subtitle": "适用于手机与桌面"
},
"features": {
"title": "Features & Benefits",
"subtitle": "Powerful Features for Developing Apps"
"title": "特性与优点",
"subtitle": "开发应用程序的强力特性"
},
"contribute": {
"title": "Contribute to Angular",
"subtitle": "Help us build the framework of the future!",
"title": "为Angular做贡献",
"subtitle": "帮我们构建未来时代的框架",
"autoformat": "true"
},
"news": {
"title": "News",
"subtitle": "Check out what we are up to"
"title": "新闻",
"subtitle": "看看我们正在做什么"
},
"events": {
"title": "Events",
"subtitle": "Where we'll be presenting"
"title": "事件",
"subtitle": "我们将在哪里开会"
},
"support": {
"title": "Support",
"subtitle": "Get help from the Angular Community"
"title": "支持",
"subtitle": "从Angular社区获得支持"
}
}

View File

@ -1,2 +1,3 @@
.cta-bar
a(href="/docs/ts/latest/quickstart.html" class="button button-large button-shield md-raised " + "md-primary" md-button) Get Started
a(href="/docs/ts/latest/quickstart.html" class="button button-large button-shield md-raised " + "md-primary"
md-button) 现在开始!

View File

@ -14,7 +14,7 @@ else
.logo-inverse-large
.c2
h3.text-headline LIBRARIES
h3.text-headline
ul.text-body
li <a href="/"> Angular 2.0</a>
@ -23,34 +23,34 @@ else
li <a href="https://www.firebase.com/docs/web/libraries/angular/"> AngularFire</a>
.c2
h3.text-headline LEARN
h3.text-headline 学习资源
ul.text-body
li <a href="/docs/ts/latest/quickstart.html"> 5 Min Quickstart</a>
li <a href="/docs/ts/latest/guide/"> Step by Step Guide</a>
li <a href="/docs/ts/latest/api/"> Full API</a>
li <a href="/docs/ts/latest/resources.html"> Resources</a>
li <a href="http://goo.gl/sj0Nk1">Design Docs &amp; Notes</a>
li <a href="/docs/ts/latest/quickstart.html"> 5分钟快速开始 </a>
li <a href="/docs/ts/latest/guide/"> 单步指南 </a>
li <a href="/docs/ts/latest/api/"> 全部API</a>
li <a href="/docs/ts/latest/resources.html"> 资源 </a>
li <a href="http://goo.gl/sj0Nk1">设计文档 &amp; 记录</a>
.c2
h3.text-headline HELP
h3.text-headline 帮助
ul.text-body
li <a href="https://groups.google.com/forum/#!forum/angular"> Google Group</a>
li <a href="https://gitter.im/angular/angular"> Chat Room</a>
li <a href="https://github.com/angular/angular/issues"> Report an Issue</a>
li <a href="https://gitter.im/angular/angular"> 聊天室 </a>
li <a href="https://github.com/angular/angular/issues"> 报告BUG </a>
.c3
h3.text-headline COMMUNITY
h3.text-headline 社区
ul.text-body
li <a href="https://blog.angularjs.org/"> Blog</a>
li <a href="https://blog.angularjs.org/">官方博客</a>
li <a href="https://plus.sandbox.google.com/+AngularJS/posts"> Google+</a>
li <a href="https://twitter.com/angularjs"> Twitter</a>
li <a href="https://github.com/angular/angular"> GitHub</a>
footer(class="background-steel")
small.text-caption Powered by Google ©2010-2016. Code licensed under an <a href="/license" class="text-snow">MIT-style License</a>. Documentation licensed under <a class="text-snow" href="http://creativecommons.org/licenses/by/4.0/">CC BY 4.0</a>.
a(aria-label="View Style Guide" href=styleguide title="Style Guide" class="styleguide-trigger text-snow" md-button)
small.text-caption 来自 Google ©2010-2016。 代码许可协议:<a href="/license" class="text-snow">MIT-style License</a>。 文档许可协议:<a class="text-snow" href="http://creativecommons.org/licenses/by/4.0/">CC BY 4.0</a>.
a(aria-label="查看风格指南" href=styleguide title="风格指南" class="styleguide-trigger text-snow" md-button)
span.icon-favorite

View File

@ -31,7 +31,7 @@ meta(property="og:description" content="#{description}")
meta(itemprop="name" content="Angular 2")
meta(itemprop="description" content="#{description}")
meta(itemprop="image" content="https://angular.io/resources/images/logos/standard/shield-large.png")
meta(itemprop="image" content="/resources/images/logos/standard/shield-large.png")
link(rel="icon" type="image/x-icon" href="/resources/images/icons/favicon.ico")
link(rel="stylesheet" href="/resources/css/vendor/angular-material.min.css")

View File

@ -4,9 +4,9 @@ header(class="background-sky")
.hero-cta
a(href="/docs/ts/latest/quickstart.html" class="md-raised button button-large button-plain"
md-button) Get Started
md-button) 现在开始!
.banner.is-centered
.banner-ng-annoucement
h4 Announcing Angular Attack — a 48 hour online hackathon on May 14 - 15th, 2016.&nbsp;
a(href="https://www.angularattack.com/" target="_blank") Register Today
h4 Angular的挑战赛 — 一次48小时的线上黑客马拉松就在2016年5月14~15日。&nbsp;
a(href="https://www.angularattack.com/" target="_blank") 立即注册

View File

@ -9,4 +9,4 @@ a(class="hover-card is-button #{hasIcon}" href="#{url}" md-button)
if cta
p #{cta}
else
p View #{name} Docs
p 查看 #{name} 文档

View File

@ -2,14 +2,14 @@ md-toolbar(class="main-nav background-regal l-pinned-top l-layer-5",scroll-y-off
nav
h1 <a href="/" md-button>Angular <sup>by Google</sup></a>
button(class="main-nav-button main-nav-mobile-trigger l-right" aria-label="View Menu" ng-click="appCtrl.toggleMainMenu($event)" md-button) Site Menu <span class="icon icon-arrow-drop-down"></span>
button(class="main-nav-button main-nav-mobile-trigger l-right" aria-label="查看菜单" ng-click="appCtrl.toggleMainMenu($event)" md-button) 网站菜单 <span class="icon icon-arrow-drop-down"></span>
ul(ng-class="appCtrl.showMainNav ? 'is-visible' : ''")
li.l-left <a class="main-nav-button" href="/features.html" md-button>Features</a>
li.l-left <a class="main-nav-button" href="/docs/ts/latest/" md-button>Docs</a>
li.l-left <a class="main-nav-button" href="/about/" md-button>About</a>
li.l-left <a class="main-nav-button" href="/contribute.html" md-button>Contribute</a>
li.l-left <a class="main-nav-button" href="/support.html" md-button>Support</a>
li.l-left <a class="main-nav-button" href="/news.html" md-button>News</a>
li.l-left <a class="main-nav-button" href="/events.html" md-button>Events</a>
li.l-right.feedback-button <md-button ng-click="appCtrl.openFeedback()" class="md-icon-button top-nav-icon" aria-label="Submit feedback on this page"><span class="material-icons">feedback</span></md-button>
li.l-left <a class="main-nav-button" href="/features.html" md-button>特性</a>
li.l-left <a class="main-nav-button" href="/docs/ts/latest/" md-button>文档</a>
li.l-left <a class="main-nav-button" href="/about/" md-button>关于</a>
li.l-left <a class="main-nav-button" href="/contribute.html" md-button>贡献</a>
li.l-left <a class="main-nav-button" href="/support.html" md-button>支持</a>
li.l-left <a class="main-nav-button" href="/news.html" md-button>新闻</a>
li.l-left <a class="main-nav-button" href="/events.html" md-button>事件</a>
li.l-right.feedback-button <md-button ng-click="appCtrl.openFeedback()" class="md-icon-button top-nav-icon" aria-label="提交关于此页面的反馈"><span class="material-icons">feedback</span></md-button>

View File

@ -8,7 +8,7 @@ for page, slug in data
if currentPage
if !nextPage && page.nextable
.l-sub-section
h3 Next Step
h3 下一步
a(href="/docs/#{current.path[1]}/#{current.path[2]}/#{current.path[3]}/#{slug}.html") #{page.title}
//NEXT PAGE HAS NOW BEEN SET
@ -16,4 +16,4 @@ for page, slug in data
// SET CURRENT PAGE FLAG WHEN YOU PASS IT
if current.path[4] == slug
- var currentPage = true
- var currentPage = true

View File

@ -42,7 +42,7 @@ mixin makeJson( filePath, jsonConfig, title, stylePatterns)
.example-title #{title}
code-example(language="#{language}" format="#{format}")
if (jsonExtract == 'ERROR')
err ERROR: Unable to extract json using config: "#{jsonConfig.toString()}"
err 错误: 无法通过配置"#{jsonConfig.toString()}"解析JSON
else
!= styleString(jsonExtract, stylePatterns)
@ -149,7 +149,7 @@ script.
- var fullFileName = getFragFilePath(filePath, region);
- var frag = partial(fullFileName);
- if (frag == null) {
- return "BAD FILENAME: " + fullFileName + " Current path: " + current.path + " PathToDocs: " + getPathToDocs();
- return "出错的文件: " + fullFileName + " 所在路径: " + current.path + " 文档路径: " + getPathToDocs();
- } else {
- // ``` gets translated to <pre><code>.....</code></pre> and we need
- // to remove this from the fragment prefix is 11 long and suffix is 13 long
@ -303,4 +303,4 @@ script.
- }
- }
- }
- }
- }

View File

@ -65,7 +65,7 @@ if language == 'dart'
<!-- DROPDOWN BUTTON -->
nav.hero-subtitle.text-subhead.dropdown
button(aria-label="Select a version of Angular" md-button class="dropdown-button" ng-click="appCtrl.toggleVersionMenu($event)") #{title} <span class="icon icon-arrow-drop-down"></span>
button(aria-label="选择Angular版本" md-button class="dropdown-button" ng-click="appCtrl.toggleVersionMenu($event)") #{title} <span class="icon icon-arrow-drop-down"></span>
div(class="overlay ng-hide" ng-click="appCtrl.toggleVersionMenu($event)" ng-show="appCtrl.showMenu")
<!-- DROPDOWN MENU -->

View File

@ -1,11 +1,11 @@
{
"index": {
"title": "Moving the Web Forward",
"subtitle": "The Angular Core Team"
"title": "推动Web前进",
"subtitle": "Angular核心开发组"
},
"presskit": {
"title": "Features & Benefits",
"subtitle": "Production Grade Features"
"title": "特性 & 优点",
"subtitle": "产品级特性"
}
}
}

View File

@ -2,12 +2,14 @@
.c2 &nbsp;
.c8.text-center
h3.text-headline.text-uppercase Building For the Future
h3.text-headline.text-uppercase 为未来构建
p.text-body.
Angular is built by a team of engineers who share a passion for
making web development feel effortless. We believe that writing
beautiful apps should be joyful and fun. We're building a
platform for the future.
Angular由一个工程师组织打造我们拥有共同的热情 —— 让Web开发变得更简单。我们深信写漂亮的程序快乐而有趣。
我们正在构建一个面向未来的平台。
.c2 &nbsp;
.clear
@ -15,6 +17,7 @@
.grid-fluid.l-space-bottom-6
h3.text-headline.text-uppercase.text-center Current Contributors
h3.text-headline.text-uppercase.text-center 目前的贡献者
<!-- BIO CARDS -->
for type in [ 'Lead', 'Google', 'Community' ]
@ -27,7 +30,7 @@
image(src="#{person.picture}" alt="#person.name")
nav
button(aria-label="View Bio") View Bio
button(aria-label="View Bio") 个人经历
if person.twitter
a(title="twitter" href="https://twitter.com/#{person.twitter}" ng-click="$event.stopPropagation()") <span class="icon-twitter"></span>

View File

@ -1,7 +1,7 @@
{
"index": {
"title": "Angular Cardboard Hack-A-Thon",
"subtitle": "Winners Announced",
"title": "Angular Hack-A-Thon 卡片墙",
"subtitle": "胜利者宣言",
"autoformat": "true"
}
}
}

View File

@ -1,33 +1,48 @@
.l-main-section
h2 Angular Projects
h2 Angular项目列表
p We'd love for you to contribute to our source code and to make Angular projects even better.
p 我们希望你给我们捐献代码让Angular项目变得更好。
.l-sub-section
h3 Angular 2
p Angular 2, now in beta, is a next generation mobile and desktop application development platform.
p Angular 2, 正在beta阶段是下一代移动和桌面应用开发平台。
a(href="https://github.com/angular/angular/blob/master/CONTRIBUTING.md" class="button" md-button) Contribute to Angular 2
a(href="https://github.com/angular/angular/blob/master/CONTRIBUTING.md" class="button" md-button) 为Angular 2做贡献
.l-sub-section
h3 Angular for JavaScript or Dart
h3 Angular - JavaScript 或 Dart
p Angular is a development platform for building mobile and desktop applications.
p Angular是一个开发平台用于构建移动和桌面应用。
a(href="https://github.com/angular/angular.js/blob/master/CONTRIBUTING.md" class="button" md-button) Contribute to Angular for JS
a(href="https://github.com/angular/angular.js/blob/master/CONTRIBUTING.md" class="button" md-button).
帮助Angular JS
a(href="https://github.com/angular/angular.dart/blob/master/CONTRIBUTING.md" class="button" md-button) Contribute to Angular for DART
a(href="https://github.com/angular/angular.dart/blob/master/CONTRIBUTING.md" class="button" md-button).
帮助Angular DART
.l-sub-section
h3 Angular Material
p Our goal is to deliver a lean, lightweight set of Angular-based UI elements that implement the material design specification for use in Angular single-page applications (SPAs).
p 我们的目标是精益、轻量级、基于Angular的一组UI组件它们实现了material设计规范可以用在Angular单页面应用中。
a(href="https://github.com/angular/material/blob/master/CONTRIBUTING.md" class="button" md-button) Contribute to Angular Material
a(href="https://github.com/angular/material/blob/master/CONTRIBUTING.md" class="button" md-button).
帮助Angular Material
.l-sub-section
h3 AngularFire
p AngularFire is the officially supported Angular binding for Firebase. Firebase is a full backend so you don't need servers to build your Angular app.
p AngularFire是一个官方提供的Angular版Firebase绑定。Firebase是一个完整的后端所以你不需要自己搭建服务器就能构建一个Angular应用。
a(href="https://github.com/firebase/angularFire" class="button" md-button) Contribute to AngularFire
a(href="https://github.com/firebase/angularFire" class="button" md-button) 帮助AngularFire

View File

@ -1,7 +1,7 @@
{
"index": {
"title": "Angular Docs",
"subtitle": "Choose a language for Angular",
"title": "Angular文档",
"subtitle": "选择Angular的语种",
"layout": "../_layout"
}
}

View File

@ -1,9 +1,11 @@
.l-main-section
h2 Get Help Using Angular
h2 获得使用Angular的帮助
p.
We have an incredible community of developers who are passionate about solving problems.
We recommend some of the following methods to get help with Angular.
我们有一个难以置信的开发者社区他们充满激情的解决问题。我们建议您通过下列方式获取关于Angular的帮助
.l-sub-section
@ -13,29 +15,47 @@
li.
Search the archive first.
It's likely that your question has already been answered.
li.
先搜索文档。
你的问题很可能有别人问过了。
li.
To avoid the spam moderation queue,
don't include code directly in your email. (See #3)
li.
为了避免被当成垃圾邮件,请不要在你的邮件中包含代码。(参见下一条)
li.
Link to a live code example that demonstrates your problem or question,
so you'll get an answer faster.
<a href="http://plnkr.co/edit/jISF8yxbVGmarpBbqsYW?p=preview">Use this template</a>.
li.
给出一个“活代码范例”的链接,来演示你的难题或问题,那样你会更快的获得答案。
<a href="http://plnkr.co/edit/jISF8yxbVGmarpBbqsYW?p=preview">使用这个模板</a>。
li.
If you get help, help others. Good karma rulez!
li.
如果得到了帮助,别忘了帮助别人。人生金律!
a(href="https://groups.google.com/forum/#!forum/angular" class="button button-primary" md-button) View the Google Group
a(href="https://groups.google.com/forum/#!forum/angular" class="button button-primary" md-button) 访问Google Group
.l-sub-section
h3 Angular Chat Room
h3 Angular聊天室
p Talk in real time with other Angular developers.
p 和其他Angular开发者实时聊天。
a(href="http://webchat.freenode.net/?channels=angularjs&uio=d4" class="button button-primary" md-button) View the Chat Room
a(href="http://webchat.freenode.net/?channels=angularjs&uio=d4" class="button button-primary" md-button) 访问聊天室
.l-sub-section
h3 Report an Issue
h3 报告问题
p If you run into an issue or have a feature request, you can create a new issue on our GitHub repository.
p 如果你遇到了问题或者需要某些特性你可以在我们的Github仓库中创建一个新的issue。
a(href="https://github.com/angular/angular/issues" class="button button-primary" md-button) Report an Issue
a(href="https://github.com/angular/angular/issues" class="button button-primary" md-button) 报告问题

View File

@ -43,30 +43,30 @@ nav.side-nav.l-pinned-left.l-layer-4.l-offset-nav
// SEARCH BAR
header.side-nav-search.st-input-wrapper
form.st-input-inner
label(for="search-io" class="is-hidden") Search Docs
input(type="search" id="search-io" placeholder="SEARCH DOCS...")
button(class="mobile-trigger button" aria-label="View Docs Menu" ng-click="appCtrl.toggleDocsMenu($event)" md-button) Docs <span class="icon icon-arrow-drop-down"></span>
label(for="search-io" class="is-hidden") 搜索文档
input(type="search" id="search-io" placeholder="搜索文档...")
button(class="mobile-trigger button" aria-label="查看文档菜单" ng-click="appCtrl.toggleDocsMenu($event)" md-button) 文档 <span class="icon icon-arrow-drop-down"></span>
div(class="side-nav-secondary" ng-class="appCtrl.showDocsNav ? 'is-visible' : ''")
.nav-blocks
.nav-title Tutorial
.nav-title 指南
.nav-primary-link(class="#{qs.class}")
a(href="#{qs.href}" title="#{qs.tooltip}") #{qs.navTitle}
.nav-sub-title Case Study: Tour of Heroes
.nav-sub-title 案例: 英雄之旅
.nav-ordered-lists
ol
each item in tutorial
li(class="#{item.class}"): a(href="#{item.href}" title="#{item.tooltip}") #{item.navTitle}
.nav-blocks
.nav-title Basics
.nav-title 基础知识
.nav-ordered-lists
ol
each item in basics
li(class="#{item.class}"): a(href="#{item.href}" title="#{item.tooltip}") #{item.navTitle}
.nav-blocks
.nav-title Developer Guide
.nav-title 开发人员指南
.nav-unordered-lists
ul
each item in guide
@ -80,7 +80,7 @@ nav.side-nav.l-pinned-left.l-layer-4.l-offset-nav
li(class="#{item.class}"): a(href="#{item.href}" title="#{item.tooltip}") #{item.navTitle}
.nav-blocks
.nav-title Reference
.nav-title 参考
.nav-unordered-lists
ul
each item in reference

View File

@ -1,10 +1,10 @@
- var language = current.path[1]
- var lang = 'your choosen language'
- var lang = '你选中的语言'
if language == 'dart'
- lang = 'Dart'
if language == 'js'
- lang = 'JavaScript'
- lang = 'JavaScript'
if language == 'ts'
- lang = 'TypeScript'
@ -20,14 +20,14 @@ if secondaryPath
- var data = secondaryPath._data
- var listType = data._listtype
- var items = listType == 'api' ? secondaryPath : data
for item, slug in items
if slug == current.path[4]
- name = 'the <b><i>' + item.title + '</i></b> chapter'
p.
This chapter is not yet available in #{lang}.
We recommend reading the TypeScript version.
这个章节在 #{lang} 语种下还不可用。
建议您阅读TypeScript版本。
a(href=path, class='md-primary md-button md-ink-ripple').
Read !{name} in TypeScript
// != partial(path)
阅读!{name}TypeScript版本
// != partial(path)

View File

@ -1,22 +1,29 @@
#sg-alerts.showcase.shadow-1
header.showcase-header
h2 Alerts
h2 警告
p.
Please use alerts sparingly throughout the docs.
They are meant to draw attention on important occasions.
Alerts should not be used for multi-line content (user callouts insteads) or stacked
on top of each other.
p.
请在文档中严谨的使用警告。这意味着只在重要的场合用它吸引注意力。
不要用警告表现多行内容(使用插图代替),也不要把它们堆叠在一起。
.showcase-content
.l-sub-section
h3 Adding an alert
h3 添加一个警告
.alert.is-critical A very <strong>critical</strong> alert
.alert.is-critical 非常<strong>关键</strong>的警告
.alert.is-important A very <strong>important</strong> alert
.alert.is-important 非常<strong>重要</strong>的警告
.alert.is-helpful A very <strong>helpful</strong> alert
.alert.is-helpful 非常<strong>有用</strong>的警告
pre.prettyprint.linenums
code.
.alert.is-critical A very <strong>critical</strong> alert
.alert.is-important A very <strong>important</strong> alert
.alert.is-helpful A very <strong>helpful</strong> alert
.alert.is-critical 非常<strong>关键</strong>的警告
.alert.is-important 非常<strong>重要</strong>的警告
.alert.is-helpful 非常<strong>有用</strong>的警告

View File

@ -1,68 +1,68 @@
{
"index": {
"icon": "home",
"title": "Angular Docs",
"menuTitle": "Docs Home",
"banner": "Welcome to <b>Angular in TypeScript</b>! The current Angular 2 release is <b>beta.14</b>. Please consult the <a href='https://github.com/angular/angular/blob/master/CHANGELOG.md' target='_blank'> Change Log</a> about recent enhancements, fixes, and breaking changes."
"title": "Angular文档",
"menuTitle": "文档首页",
"banner": "欢迎来到 <b>Angular in TypeScript</b>! 当前的Angular版本是 <b>beta.14</b>。请参考<a href='https://github.com/angular/angular/blob/master/CHANGELOG.md' target='_blank'>Change Log</a>来了解最近的增强、修正和破坏性变更。"
},
"quickstart": {
"icon": "query-builder",
"title": "5 Min Quickstart",
"description": "Get up and running with Angular 2"
"title": "五分钟快速开始",
"description": "Angular 2起跑"
},
"tutorial": {
"icon": "list",
"title": "Tutorial",
"banner": "Angular 2 is currently in Beta."
"title": "教程",
"banner": "Angular 2正处于Beta阶段。"
},
"guide": {
"icon": "list",
"title": "Developer Guides",
"banner": "Angular 2 is currently in Beta."
"title": "开发人员指南",
"banner": "Angular 2正处于Beta阶段。"
},
"cookbook": {
"icon": "list",
"title": "Cookbook",
"banner": "How to solve common implementation challenges."
"banner": "教你解决常见的“该怎么做”问题。"
},
"api/": {
"icon": "book",
"title": "API Preview",
"title": "API预览",
"reference": true
},
"cheatsheet": {
"title": "Angular Cheat Sheet",
"intro": "A quick guide to Angular syntax.",
"title": "Angular小抄",
"intro": "关于Angular语法的快速指南",
"reference": true
},
"glossary": {
"title": "Glossary",
"intro": "Brief definitions of the most important words in the Angular 2 vocabulary",
"title": "词汇表",
"intro": "Angular 2中那些最重要的词汇的简短定义",
"reference": true
},
"resources": {
"icon": "play-circle-fill",
"title": "Angular Resources",
"banner": "Angular 2 is currently in Beta.",
"title": "Angular资源",
"banner": "Angular 2正处于Beta阶段",
"resources": true
},
"help": {
"icon": "chat",
"title": "Help & Support",
"title": "帮助与支持",
"resources": true
},
"styleguide": {
"title": "Docs Style Guide",
"intro": "Design & Layout Patterns For Documentation"
"title": "文档风格指南",
"intro": "文档的设计与布局模式"
}
}

View File

@ -1,4 +1,3 @@
<!-- Speed & Performance -->
.grid-fluid.l-space-bottom-8
.c3.text-center
@ -9,7 +8,9 @@
Angular 2 is dramatically faster than Angular 1 with support for fast initial loads through
server-side pre-rendering, offline compile for fast startup, and ultrafast change detection
and view caching for smooth virtual scrolling and snappy view transitions.
h3.text-headline.text-uppercase 速度与性能
p.text-body.
Angular 2的性能相对Angular 1已经有了戏剧性的提升包括通过服务端渲染完成初次加载、离线编译来获得更快的启动速度、超快的变更检测以及通过视图缓存来实现平滑的虚拟滚动和干净利落的场景切换。
<!-- Simplicity -->
.grid-fluid.l-space-bottom-8
.c3.text-center
@ -20,6 +21,9 @@
Make your intention clear using natural, easy-to-write syntax.
Reduce complexity for your team: new, structure-rich templates are
readable and easy to understand at a glance.
h3.text-headline.text-uppercase 简单而丰富
p.text-body.
通过自然、易写的语法,清晰表达你的意图。降低开发组的复杂度:新的、富结构化的模板富有可读性,容易被快速理解。
<!-- Cross-Platform -->
@ -33,7 +37,9 @@
Android, and iOS. Angular Universal provides for server-side rendering for fast initial
views on mobile web. Ionic and NativeScript let you build hybrid and native UI mobile apps.
Web worker support keeps your app UI fully responsive no matter how heavy the load.
h3.text-headline.text-uppercase 跨平台
p.text-body.
学习Angular 2让你有了一个工具可以构建桌面应用、移动网页、安卓版应用、iOS版应用。Angular Universal提供了一个服务端渲染工具可以快速的在移动设备上提供起始页面。Ionic和NativeScript让你构建混合式hybrid和原生界面的移动应用。Web worker让你的应用界面保持迅速及时的响应而不用担心负载过重。
<!-- Seamless Upgrade -->
.grid-fluid.l-space-bottom-8
@ -44,7 +50,9 @@
p.text-body.
Upgrade your Angular 1 application at your own pace by mixing in Angular 2 components,
directives, pipes, services and more by using the ngUpgrade APIs.
h3.text-headline.text-uppercase 从Angular 1无缝升级
p.text-body.
使用ngUpgrade API可以一小步一小步的把Angular 2的组件、指令、管道、服务等混入Angular1应用完成无缝平滑升级。
<!-- Flexible Development -->
.grid-fluid.l-space-bottom-8
@ -56,7 +64,9 @@
The choice of language is up to you. In addition to full support for
ES5, TypeScript, and Dart, Angular 2 works equally well with ES2015 and other languages
that compile to JavaScript.
h3.text-headline.text-uppercase 灵活的开发
p.text-body.
选择什么语言取决于你。它不仅完全支持ES5、TypeScript和DartAngular 2在ES2015和其他能编译成JavaScript的语言下也能工作得一样好。
<!-- Routing -->
.grid-fluid.l-space-bottom-8
@ -72,7 +82,13 @@
lazy loading for mobile users.
If you already use routing from a prior version of Angular,
you can easily migrate to Angular 2 routing.
h3.text-headline.text-uppercase 全面的路由
p.text-body.
经过精密设计的视图:
映射URL路径到应用组件
使用嵌套路由、兄弟路由等高级特性。
为移动用户Angular 2提供了卡片式导航、转场动画和延迟加载特性。
如果你还在使用来自Angular老版本的路由你可以轻易迁移到Angular 2路由。
<!-- Dependency Injection -->
.grid-fluid.l-space-bottom-8
@ -85,6 +101,10 @@
allowing you to maintain modular applications without writing tedious glue code.
Dependency injection helps you write tests
by making it easy to inject test doubles.
h3.text-headline.text-uppercase 依赖注入
p.text-body.
Angular 2具有强力、易于使用的依赖注入机制允许你管理模块化的应用而不用写枯燥的胶水代码。
通过让注入测试副本,依赖注入可以帮助你更容易的写测试。
<!-- Legacy Browsers -->
.grid-fluid.l-space-bottom-8
@ -95,7 +115,10 @@
p.text-body.
In addition to fully supporting latest versions of Chrome, Edge, Firefox, IE, and Safari,
Angular 2 is also tested for older browsers including IE9+ and Android 4.1+.
.c7
h3.text-headline.text-uppercase 老旧浏览器支持
p.text-body.
除了完全支持Chrome、Edge、Firefox、IE和Safari的最新版本外Angular2还支持老旧浏览器如IE9+、Android 4.1+。
<!-- Animations -->
.grid-fluid.l-space-bottom-8
@ -110,7 +133,11 @@
intelligently handle changes to animations in response to user events.
Plan complex animation flows by sequencing the behavior of
an entire website on a timeline.
h3.text-headline.text-uppercase 动画
p.text-body.
[开发中]通过简单易用的Angular事件在移动和桌面环境下深入底层提供动画支持。
你可以使用CSS、JavaScript和Web Animations API来智能处理动画的变化来响应用户事件。
还计划通过控制整个网站在时间线上的一连串行为来支持复杂的动画流程。
<!-- Internationalization & Accessibility -->
.grid-fluid.l-space-bottom-8
@ -126,6 +153,13 @@
Generate static applications for each locale.
Easily promote accessibility via screen readers and assistive devices by automatically
generating appropriate ARIA attributes.
h3.text-headline.text-uppercase 国际化(I18N)与可访问性
p.text-body(ng-non-bindable).
[开发中] 抵达所有用户。可以在Angular插值表达式中使用熟悉的ICU消息格式包括复数化和性别化规则。
自动提取消息、伪本地化和翻译更新。
为每一个区域locale生成一个静态应用。
通过自动生成相应的ARIA属性可以更容易的通过屏幕阅读器和辅助设备提升可访问性。

View File

@ -4,21 +4,29 @@ div(layout-gt-sm='row' style='margin: 0 -24px')
div(flex=33 style='padding:0 24px')
h3.text-headline Fast
p.text-body Angular computes updates based on changes to data, not DOM, for fast updates that scale to the largest data sets with minimal memory overhead.
h3.text-headline 快速
p.text-body Angular基于数据的变更来计算更新而不是DOM当处理极大规模的数据集时能以很小的内存开销提供快速更新。
div(flex=33 style='padding:0 24px')
h3.text-headline Mobile
p.text-body With Angular Universal for server-side rendering and Web Workers for smooth scrolling and transitions, Angular 2 solves the core challenges in mobile web performance.
h3.text-headline 移动优先
p.text-body 通过Angular Universal提供服务端渲染通过Web Workers提供平滑的滚动和转场效果。据此Angular 2解决了移动网站性能问题的核心挑战。
div(flex=33 style='padding:0 24px')
h3.text-headline Flexible
p.text-body Supports several languages including plain JavaScript, TypeScript, and Dart. Also supports both object-style data structure with POJO data-binding and functional reactive style with unidirectional data flow and support for observables and immutable data structures.
h3.text-headline 弹性
p.text-body 支持一系列语言包括普通JavaScript、TypeScript和Dart。同样支持基于POJO数据绑定的对象式数据结构和基于单向数据流的函数式响应式reactive风格还支持基于监听observable和不可变immutable对象的数据结构。
br
div
h3.text-headline The Basics
p.text-body In Angular you display data by defining components. Data in your component classes is automatically available to display in your templates or control how they render as in the example below.
h3.text-headline 基础
p.text-body While this example uses TypeScript, Angular works equally well with ES5, ES6 and Dart as well.
p.text-body 虽然这个范例使用了TypeScript但是Angular在ES5、ES6和Dart中也能很好的工作。
p(style='text-align:right')
md-button.md-primary(href='/resources/live-examples/homepage-hello-world/ts/plnkr.html' target='_blank')
span.icon-open-in-new
| Try in Plunker
| 在Plunker中试用
+makeTabs(`
../docs/_fragments/homepage-hello-world/ts/app/hello_world.html,
../docs/_fragments/homepage-hello-world/ts/app/hello_world.ts,
@ -32,12 +40,15 @@ div
br
div
h3.text-headline Structuring Apps With Components
h3.text-headline 应用程序的组件式结构
p.text-body Groups of coordinated components divide the responsibilities of our application. This ToDo list app has a separate component for the form, the list, and the core app logic. Where the previous example component referenced templates in separate files, this one shows using inline templates.
p.text-body 我们把应用的职责拆分成一组相互合作的组件。这个TODO List应用包括一组独立的组件它们组成了表单、列表和核心应用逻辑。虽然前面的范例组件使用了独立文件来存放模板但这个范例将使用内联模板。
p.text-body Defining types as we do here in Todo.ts communicates our intention to other developers, helps us find bugs in our code, and lets IDEs do more work for us in refactoring, code navigation, and code completion.
p.text-body 就像我们在Todo.ts中的做法定义类型types可以像其他开发者展示我们的意图帮助我们发现代码中的BUG以及让我们的IDE更好的帮助我们重构、代码导航、以及代码自动完成Code completion
p(style='text-align:right')
md-button.md-primary(href='/resources/live-examples/homepage-todo/ts/plnkr.html' target='_blank')
span.icon-open-in-new
| Try in Plunker
| 在Plunker中试用
+makeTabs(`
../docs/_fragments/homepage-todo/ts/app/todo_app.ts,
../docs/_fragments/homepage-todo/ts/app/todo_form.ts,
@ -55,12 +66,15 @@ div
br
div
h3.text-headline Advanced Component Communication
h3.text-headline 高级组件通讯
p.text-body This demo shows an efficient implementation of tabs/panes. Each pane is only instantiated while it is visible. Panes which are not visible are released and do not have associated memory, DOM and change detection cost.
p.text-body 这个范例展示了一个高效的页标签tabs/面板panes实现。只有可见的面板才会被实例化不可见的则被释放并且没有相关的内存、DOM和变更检测的开销。
p.text-body The demo also showcases dependency injection and the ability of one component to query for other components. Such queries automatically update even as detail panes are added. This allows the tabs component to work with <code>ngFor</code> without any special knowledge of it.
p.text-body 这个范例也示范了依赖注入和从一个组件查询其它组件的能力。这些查询会自动更新 —— 即使加入了新的面板也能正常工作。这让tabs组件可以很好的和<code>ngFor</code>协作,而不需要了解特别的知识。
p(style='text-align:right')
md-button.md-primary(href='/resources/live-examples/homepage-tabs/ts/plnkr.html' target='_blank')
span.icon-open-in-new
| Try in Plunker
| 在Plunker中试用
+makeTabs(`
../docs/_fragments/homepage-tabs/ts/app/di_demo.ts,
../docs/_fragments/homepage-tabs/ts/app/ui_tabs.ts,

View File

@ -1,6 +1,7 @@
.grid-fluid.l-space-bottom-2
.c12.text-center
h3.text-headline.text-uppercase Core Team
h3.text-headline.text-uppercase 核心开发组
.clear
.grid-fluid

View File

@ -7,7 +7,7 @@
p <a href="http://stackoverflow.com/questions/tagged/angular2" target="_blank">angular2</a>
p <a href="http://stackoverflow.com/questions/tagged/angular2-forms" target="_blank">angular2-forms</a>
p <a href="http://stackoverflow.com/questions/tagged/angular2-template" target="_blank">angular2-template</a>
hr
.grid-fluid
@ -15,7 +15,7 @@
figure
img(src="/resources/images/support/gitter-logo.png" alt="Us" style="width:240px;")
.c8
p Community driven <a href="https://gitter.im/angular/angular" target="_blank">real time chat</a>
p 由社区驱动的<a href="https://gitter.im/angular/angular" target="_blank">实时聊天</a>
//
hr
@ -33,13 +33,13 @@
figure
img(src="/resources/images/support/github-logo.png" alt="Us" style="width:240px;" )
.c8
p File Angular 2 issues at our <a href="https://github.com/angular/angular/issues" target="_blank">GitHub Repository</a>
p Angular 2的问题归档在我们的<a href="https://github.com/angular/angular/issues" target="_blank">GitHub仓库</a>
hr
hr
.grid-fluid
.c4
figure
img(src="/resources/images/support/reddit-logo.png" alt="Us" style="width:240px;" )
.c8
p Resources, articles, discussions &amp; more: <a href="https://www.reddit.com/r/angular2/" target="_blank">/r/Angular2</a>
p 资源, 文档, 讨论以及更多内容在: <a href="https://www.reddit.com/r/angular2/" target="_blank">/r/Angular2</a>

View File

@ -4,7 +4,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<!--Add the title of your typeform below-->
<title>2016 Angular Usage Trends Survey</title>
<title>2016 Angular使用统计调查</title>
<!--CSS styles that ensure your typeform takes up all the available screen space (DO NOT EDIT!)-->
<style type="text/css">
@ -27,4 +27,4 @@
<iframe id="typeform-full" width="100%" height="100%" frameborder="0" src="https://angular.typeform.com/to/TmzUeq"></iframe>
<script type="text/javascript" src="https://s3-eu-west-1.amazonaws.com/share.typeform.com/embed.js"></script>
</body>
</html>
</html>