angular-docs-cn/public/index.jade

89 lines
6.3 KiB
Plaintext
Raw Normal View History

include _includes/_util-fns
2015-02-28 00:34:19 -05:00
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.
2016-04-09 12:38:38 -04:00
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.
2016-04-09 12:38:38 -04:00
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.
2016-04-09 12:38:38 -04:00
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.
2016-04-09 12:38:38 -04:00
h3.text-headline 基础
2016-04-13 20:43:42 -04:00
p.text-body 在Angular中你通过定义组件来显示数据。组件类中提供的数据可以显示到模板上或者控制它们的渲染方式译注比如例子中的[hidden]用来控制样式) —— 就像下面的例子一样。
p.text-body While this example uses TypeScript, Angular works equally well with ES5, ES6 and Dart as well.
2016-04-09 12:38:38 -04:00
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
2016-04-09 12:38:38 -04:00
| 在Plunker中试用
+makeTabs(`
../docs/_fragments/homepage-hello-world/ts/app/hello_world.html,
../docs/_fragments/homepage-hello-world/ts/app/hello_world.ts,
../docs/_fragments/homepage-hello-world/ts/app/main.ts,
../docs/_fragments/homepage-hello-world/ts/index.1.html`,
null,
`app/hello_world.html,
app/hello_world.ts,
app/main.ts,
index.html`)
br
div
2015-12-15 15:34:29 -05:00
h3.text-headline Structuring Apps With Components
2016-04-09 12:38:38 -04:00
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.
2016-04-09 12:38:38 -04:00
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.
2016-04-09 12:38:38 -04:00
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
2016-04-09 12:38:38 -04:00
| 在Plunker中试用
+makeTabs(`
../docs/_fragments/homepage-todo/ts/app/todo_app.ts,
../docs/_fragments/homepage-todo/ts/app/todo_form.ts,
../docs/_fragments/homepage-todo/ts/app/todo_list.ts,
../docs/_fragments/homepage-todo/ts/app/todo.ts,
../docs/_fragments/homepage-todo/ts/app/main.ts,
../docs/_fragments/homepage-todo/ts/index.1.html`,
null,
`app/todo_app.ts,
app/todo_form.ts,
app/todo_list.ts,
app/todo.ts,
app/main.ts,
index.html`)
br
2015-12-15 15:34:29 -05:00
div
h3.text-headline Advanced Component Communication
2016-04-09 12:38:38 -04:00
h3.text-headline 高级组件通讯
2015-12-15 15:34:29 -05:00
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.
2016-04-09 12:38:38 -04:00
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.
2016-04-09 12:38:38 -04:00
p.text-body 这个范例也示范了依赖注入和从一个组件查询其它组件的能力。这些查询会自动更新 —— 即使加入了新的面板也能正常工作。这让tabs组件可以很好的和<code>ngFor</code>协作,而不需要了解特别的知识。
2015-12-15 15:34:29 -05:00
p(style='text-align:right')
md-button.md-primary(href='/resources/live-examples/homepage-tabs/ts/plnkr.html' target='_blank')
2015-12-15 15:34:29 -05:00
span.icon-open-in-new
2016-04-09 12:38:38 -04:00
| 在Plunker中试用
+makeTabs(`
../docs/_fragments/homepage-tabs/ts/app/di_demo.ts,
../docs/_fragments/homepage-tabs/ts/app/ui_tabs.ts,
../docs/_fragments/homepage-tabs/ts/app/main.ts,
../docs/_fragments/homepage-tabs/ts/index.1.html`,
null,
`app/di_demo.ts,
app/ui_tabs.ts,
app/main.ts,
index.html`)