英雄指南教程(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

Angular 英雄示例教程的更多相关文章

  1. ASP.NET MVC 基于角色的权限控制系统的示例教程

    上一次在 .NET MVC 用户权限管理示例教程中讲解了ASP.NET MVC 通过AuthorizeAttribute类的OnAuthorization方法讲解了粗粒度控制权限的方法,接下来讲解基于 ...

  2. Angular CLI 使用教程指南参考

    Angular CLI 使用教程指南参考 Angular CLI 现在虽然可以正常使用但仍然处于测试阶段. Angular CLI 依赖 Node 4 和 NPM 3 或更高版本. 安装 要安装Ang ...

  3. .NET Core R2安装及示例教程

    .NET Core R2安装及示例教程 Install for Windows - Visual Studio 2015 1 Download Visual Studio 2015 Make sure ...

  4. [Python]Excel编程示例教程(openpyxl)

    1 前言(Preface) 博文背景:论文实验中有一大堆数据集需要观测其数据特征,通过人体肉眼,难以直观感受,故而准备通过生成Excel,可视化其评测数据. We know: Excel便于可视化分析 ...

  5. React Autocomplete(自动完成输入)示例教程

    React Autocomplete示例教程是今天的主题.在现代Web开发中,使用React改善用户体验是很容易.自动完成的概念很简单.它是基于用户输入的建议列表.然后,用户可以按Enter键以完成短 ...

  6. .NET 5/.NET Core使用EF Core 5连接MySQL数据库写入/读取数据示例教程

    本文首发于<.NET 5/.NET Core使用EF Core 5(Entity Framework Core)连接MySQL数据库写入/读取数据示例教程> 前言 在.NET Core/. ...

  7. .Net使用Newtonsoft.Json.dll(JSON.NET)对象序列化成json、反序列化json示例教程

    JSON作为一种轻量级的数据交换格式,简单灵活,被很多系统用来数据交互,作为一名.NET开发人员,JSON.NET无疑是最好的序列化框架,支持XML和JSON序列化,高性能,免费开源,支持LINQ查询 ...

  8. [转] Struts2入门示例教程

    原文地址:http://blog.csdn.net/wwwgeyang777/article/details/19078545/ 回顾Struts2的使用过程,网上搜的教程多多少少都会有点问题,重新记 ...

  9. .Net Core 1.0.0 RC2安装及示例教程

    前几天微软发布了.Net Core1.0.0 RC2 Preview版本,一直都想尝试下跨平台的.Net Core,一直拖到今天,也参考了下园友们的经验,闲时整理了一下安装的步骤,供大家参考. 我们要 ...

随机推荐

  1. 【Linux-驱动】printk的打印级别

    级别: 日志级别用宏表示,日志级别宏展开为一个字符串,在编译是由预处理器将它和消息本文拼接成一个字符串,因此printk函数中日志级别宏和格式字符串间不能有逗号.printk的日志级别定义在 /inc ...

  2. 纯前端表格控件SpreadJS以专注业务、提升效率赢得用户与市场

    提起华为2012实验室,你可能有点陌生. 但你一定还对前段时间华为的那封<海思总裁致员工的一封信>记忆犹新,就在那篇饱含深情的信中,我们知道了华为为确保公司大部分产品的战略安全和连续供应, ...

  3. sql server2012中使用convert来取得datetime数据类型样式(全)

    一.日期数据格式的处理,两个示例: CONVERT(varchar(16), 时间一, 20) 结果:2007-02-01 08:02/*时间一般为getdate()函数或数据表里的字段*/ CONV ...

  4. 小记---------sparkRDD的Transformation 和 Action 及案例 原理解释

    RDD :弹性分布式数据集:是一个容错的.并行的数据结构,可以让用户显式地将数据存储到磁盘或内存中,并控制数据的分区   RDD是Spark的核心数据结构,通过RDD的依赖关系形成Spark的调度顺序 ...

  5. [BZOJ2594] [WC2006]水管局长(Kruskal+LCT)

    [BZOJ2594] [WC2006]水管局长(Kruskal+LCT) 题面 SC省MY市有着庞大的地下水管网络,嘟嘟是MY市的水管局长(就是管水管的啦),嘟嘟作为水管局长的工作就是:每天供水公司可 ...

  6. CSP 最大的矩形(201312-3)

    问题描述 在横轴上放了n个相邻的矩形,每个矩形的宽度是1,而第i(1 ≤ i ≤ n)个矩形的高度是hi.这n个矩形构成了一个直方图.例如,下图中六个矩形的高度就分别是3, 1, 6, 5, 2, 3 ...

  7. HTTPS原理(三次握手)

    第一步: 客户端向服务器发送HTTPS请求,服务器将公钥以证书的形式发送到客户端(服务器端存放私钥和公钥). 第二步: 浏览器生成一串随机数,然后用公钥对随机数和hash签名进行加密,加密后发送给服务 ...

  8. ORM中的锁和事务

    锁 sql语句加锁 select * from book where id=1 for update; begin; start transaction; select * from t1 where ...

  9. 数据绑定-集合List绑定

    users.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> &l ...

  10. loj 2336「JOI 2017 Final」绳

    loj 首先,所有位置最多被染色一次,因为要染多次的话,还不如一开始就染成最终的颜色.并且你可以一开始就染好色 因为最终长度为2,那么如果染完后这个序列可以被折完,那么首先最多只有两种颜色,还有就是要 ...