Dart和Angular2的英雄之旅(1):简介

千呼万唤始出来,Angular2终于发布了Dart正式版!不记得是从什么时候开始,Angular2官方宣布原生支持Dart,然后就先后发布了22个测试版,现在终于正式登上舞台!Angular2中文主页只有TypeScript的汉化,这里借鉴了部分翻译,尽量直译Dart文档。当原文难以直译的时候,会采用意译的方式重新表述。该系列文章发于2016年10月,如有不妥的地方,请留言!

英雄之旅:目标概览

我们的终极计划是构建一个程序,来帮助职介机构管理一批英雄。毕竟,英雄们也得养家糊口嘛!

当然,在本教程中,我们只完成一小步。我们这次构建的应用会涉及很多特性,我们希望见到一个成熟的、数据驱动的应用:获得并显示英雄列表,编辑所选英雄的详情,并在英雄数据的多个视图之间建立导航。

《英雄之旅》涵盖了 Angular 的核心原理。 我们将使用内置指令来显示 / 隐藏元素,并且显示英雄数据的列表。 我们将创建一个组件来显示英雄的详细信息,另一个组件则用来显示英雄列表。我们将只使用单向数据绑定来只读数据。我们将添加一些可编辑字段,并通过双向数据绑定更新模型。 我们将把组件上的方法绑定到用户事件上,比如按键和点击。 我们将学习从主列表视图中选择一个英雄,然后在详情视图中编辑它。 我们将通过管道对数据进行格式化。 我们将创建一个共享服务来获取我们的英雄们。 我们将使用路由在不同的视图及其组件之间进行导航。

我们将学习足够的Angular核心技术,来作为起步,并建立信心——证明 Angular 确实能做到我们想让它做的。虽然我们将覆盖大部分“简介级”知识,但还是会放上大量链接,指向更深入的章节。

运行在线示例 live example

游戏的最后

下面是一个可视化的想法:这次旅行我们要做什么?从“仪表盘 (Dashboard) ”视图和我们最勇敢的英雄开始。

仪表盘上方有两个链接:“Dashboard”和“Heroes”。 我们可以通过点击它们在“仪表盘”和“英雄”视图之间导航。

当我们点击仪表盘上名叫“Magneta”的英雄时,路由将把我们带到这个英雄的详情页,我们可以在那里修改英雄的名字。

点击“后退 (Back) ”按钮将把我们带回“仪表盘”。顶部的链接可以把我们带到任何一个主视图。如果我们点击“Heroes”链接,本应用将把我们带到英雄列表主视图。

当我们点击另一位英雄时,一个只读的“微型视图”会显示在列表下方,以体现我们的选择。

我们可以点击其中的“查看详情(View Details)”按钮来进入所选英雄的“编辑视图”。

下面这张图汇总了我们所有可能的导航路径。

下图演示了我们应用中的所有操作。

接下来

让我们一起,用我们曾在无数应用中遇见的类似需求,作为每一章的动机,一步步构建出《英雄之旅》。任何事,都会有理由。

这一路上,我们将遇到很多Angular核心原理。

我们现在就开始吧!

本文出自“Dart语言中文社区”,允许转载,转载时请务必以超链接形式标明文章原始出处
本文地址:
http://www.cndartlang.com/800.html

发表评论

登录后才能评论