Introduction

英雄之旅:幻视

我们的伟大计划是创建一个app来帮助一个人员中介机构管理他们的英雄社区,甚至这些英雄需要工作。

当然我们在教程中只会完成app的一小部分。我们要做一个包含了许多功能、全面、数据驱动的应用:获取并展示一个英雄列表,编辑选中英雄的信息和在不同英雄数据视图之间进行切换。

英雄之旅覆盖了Angular的核心基础功能。 我们将会用内置指令来显示/隐藏页面元素以及展示英雄数据列表。 我们将会创建一个展示英雄详细信息的组件以及另一个展示英雄列表的组件。 我们将会为只读数据使用单向数据绑定。 我们将会添加双向绑定的可编辑字段用于更新实体。 我们将会把组件方法与用户事件进行绑定,比如按键作用和鼠标点击。 我们将会学习从主列表选择一个英雄并且在详情视图中编辑它。 我们将会利用管道格式化数据。 我们将会创建一个共享的服务来组合我们的英雄。 我们将会使用路由来导航不同的视图和他们对应的组件。

我们将会学习足够的Angular核心作为入门并且获得Angular可以做到任何我们需要去做的事的信心。我们将会学习到大量的入门级知识,但是我们会找到大量的具有更大深度的章节的链接。

运行这个在线示例

The End Game

该教程中英雄的视觉设计开始于“仪表盘”视图及我们的史诗英雄列表:

dashboard-1

仪表盘之上是两个超链接("Dashboard"和"Heroes")。我们可以点击它们以在这两个视图之间切换。

如果我们点击仪表板上名叫“Magneta”的英雄,路由将跳转到对应英雄的详情视图,在那里我们可以变更英雄名称。

hero-details-1

点击“Back”按钮将会回到“Dashboard”视图。顶部的超链接将带我们跳转到任意一个主视图。如果我们点击“Heroes”链接,app将跳转到“Heroes”主列表视图。

heroes-list-2

我们点击一个不同的英雄,一个只读的精简详情视图将会出现在列表下面作为新选择的反馈。

我们点击“View Details”按钮将跳转到所选英雄的可编辑详情视图。

以下示意图展示了我们所有的导航选项。 nav-diagram

这里是App演示

toh-anim

results matching ""

    No results matching ""