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
Angular 英雄示例教程的更多相关文章
- ASP.NET MVC 基于角色的权限控制系统的示例教程
上一次在 .NET MVC 用户权限管理示例教程中讲解了ASP.NET MVC 通过AuthorizeAttribute类的OnAuthorization方法讲解了粗粒度控制权限的方法,接下来讲解基于 ...
- Angular CLI 使用教程指南参考
Angular CLI 使用教程指南参考 Angular CLI 现在虽然可以正常使用但仍然处于测试阶段. Angular CLI 依赖 Node 4 和 NPM 3 或更高版本. 安装 要安装Ang ...
- .NET Core R2安装及示例教程
.NET Core R2安装及示例教程 Install for Windows - Visual Studio 2015 1 Download Visual Studio 2015 Make sure ...
- [Python]Excel编程示例教程(openpyxl)
1 前言(Preface) 博文背景:论文实验中有一大堆数据集需要观测其数据特征,通过人体肉眼,难以直观感受,故而准备通过生成Excel,可视化其评测数据. We know: Excel便于可视化分析 ...
- React Autocomplete(自动完成输入)示例教程
React Autocomplete示例教程是今天的主题.在现代Web开发中,使用React改善用户体验是很容易.自动完成的概念很简单.它是基于用户输入的建议列表.然后,用户可以按Enter键以完成短 ...
- .NET 5/.NET Core使用EF Core 5连接MySQL数据库写入/读取数据示例教程
本文首发于<.NET 5/.NET Core使用EF Core 5(Entity Framework Core)连接MySQL数据库写入/读取数据示例教程> 前言 在.NET Core/. ...
- .Net使用Newtonsoft.Json.dll(JSON.NET)对象序列化成json、反序列化json示例教程
JSON作为一种轻量级的数据交换格式,简单灵活,被很多系统用来数据交互,作为一名.NET开发人员,JSON.NET无疑是最好的序列化框架,支持XML和JSON序列化,高性能,免费开源,支持LINQ查询 ...
- [转] Struts2入门示例教程
原文地址:http://blog.csdn.net/wwwgeyang777/article/details/19078545/ 回顾Struts2的使用过程,网上搜的教程多多少少都会有点问题,重新记 ...
- .Net Core 1.0.0 RC2安装及示例教程
前几天微软发布了.Net Core1.0.0 RC2 Preview版本,一直都想尝试下跨平台的.Net Core,一直拖到今天,也参考了下园友们的经验,闲时整理了一下安装的步骤,供大家参考. 我们要 ...
随机推荐
- 【Linux-驱动】printk的打印级别
级别: 日志级别用宏表示,日志级别宏展开为一个字符串,在编译是由预处理器将它和消息本文拼接成一个字符串,因此printk函数中日志级别宏和格式字符串间不能有逗号.printk的日志级别定义在 /inc ...
- 纯前端表格控件SpreadJS以专注业务、提升效率赢得用户与市场
提起华为2012实验室,你可能有点陌生. 但你一定还对前段时间华为的那封<海思总裁致员工的一封信>记忆犹新,就在那篇饱含深情的信中,我们知道了华为为确保公司大部分产品的战略安全和连续供应, ...
- sql server2012中使用convert来取得datetime数据类型样式(全)
一.日期数据格式的处理,两个示例: CONVERT(varchar(16), 时间一, 20) 结果:2007-02-01 08:02/*时间一般为getdate()函数或数据表里的字段*/ CONV ...
- 小记---------sparkRDD的Transformation 和 Action 及案例 原理解释
RDD :弹性分布式数据集:是一个容错的.并行的数据结构,可以让用户显式地将数据存储到磁盘或内存中,并控制数据的分区 RDD是Spark的核心数据结构,通过RDD的依赖关系形成Spark的调度顺序 ...
- [BZOJ2594] [WC2006]水管局长(Kruskal+LCT)
[BZOJ2594] [WC2006]水管局长(Kruskal+LCT) 题面 SC省MY市有着庞大的地下水管网络,嘟嘟是MY市的水管局长(就是管水管的啦),嘟嘟作为水管局长的工作就是:每天供水公司可 ...
- CSP 最大的矩形(201312-3)
问题描述 在横轴上放了n个相邻的矩形,每个矩形的宽度是1,而第i(1 ≤ i ≤ n)个矩形的高度是hi.这n个矩形构成了一个直方图.例如,下图中六个矩形的高度就分别是3, 1, 6, 5, 2, 3 ...
- HTTPS原理(三次握手)
第一步: 客户端向服务器发送HTTPS请求,服务器将公钥以证书的形式发送到客户端(服务器端存放私钥和公钥). 第二步: 浏览器生成一串随机数,然后用公钥对随机数和hash签名进行加密,加密后发送给服务 ...
- ORM中的锁和事务
锁 sql语句加锁 select * from book where id=1 for update; begin; start transaction; select * from t1 where ...
- 数据绑定-集合List绑定
users.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> &l ...
- loj 2336「JOI 2017 Final」绳
loj 首先,所有位置最多被染色一次,因为要染多次的话,还不如一开始就染成最终的颜色.并且你可以一开始就染好色 因为最终长度为2,那么如果染完后这个序列可以被折完,那么首先最多只有两种颜色,还有就是要 ...