Angular 英雄示例教程

英雄指南教程(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(查看详情)” 按钮进入所选英雄的编辑视图。

下面这张图汇总了所有可能的导航选项。

下面是本应用的动态展示:

 

https://www.cwiki.us/display/AngularZH/Tutorial

您可以在保留原文链接的情况下转载:HoneyMoose » Angular 英雄示例教程

赞 (0) 打赏

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏