英雄指南教程(Tour of Heroes)涵盖了 Angular 的基本知识。
在本教程中,你将构建一个应用,来帮助人事代理机构来管理一群英雄。
这个入门级 app 包含很多数据驱动的应用所需的特性。 它需要获取并显示英雄的列表、编辑所选英雄的详情,并且在包含有英雄数据的不同视图之间进行导航。
在本教程的最后,你的应用可以做下面的工作:
使用Angular 的内置指令(Angular directives)来显示 / 隐藏元素,并显示英雄数据的列表。
创建 Angular 组件(Angular components)以显示英雄的详情,并显示一个英雄数组。
为只读数据使用单向数据绑定。
添加可编辑字段,使用双向数据绑定来更新模型。
为用户事件绑定组件方法(component methods),比如相应用户键盘输入和点击。
让用户可以在主列表中选择一个英雄,然后在详情视图中编辑他。
使用管道来格式化数据。
创建共享的服务来管理这些英雄。
使用路由在不同的视图及其组件之间导航。
你将学到足够的 Angular 知识和足够的信心来让 Angular 提供你所需的支持。
完成本教程的所有步骤之后,最终的应用会是这样的:live example/download example。
你将要构建什么
下面是本教程有关界面的构想:本应用开始界面为"Dashboard(主面板)"视图,在这个视图中显示最勇敢的英雄。
你可以单击主面板上的两个链接("Dashboard" 和 "Heroes")来在主面板视图和英雄视图之间进行导航。
如果你在主面板中单击英雄名称 "Magneta" 时,路由将会打开 "Hero Details(英雄详细)"页面。在这个页面中,你可以对英雄的名字进行修改。
单击 "Back(返回按钮)",应用将会让你返回到 Dashboard(主面板)页面中。顶部的链接能够让你在任何时候都能够返回到主页面。如果你单击 "Heroes(英雄列表)",引用将会将英雄以列表显示。
当你单击不同英雄的名字的时候,一个只读的“微型详情视图”会在列表的下方显示,以体现你的选择。
你可以点击 “View Details(查看详情)” 按钮进入所选英雄的编辑视图。
下面这张图汇总了所有可能的导航选项。
下面是本应用的动态展示: