应用简介
有一个重要的项目是构建个一个帮助人事机构管理英雄的app,这个应用涵盖了Angular的核心基础,并且有如你期望它是一个完整的,数据驱动的app。包含获取显示英雄列表,编辑选择的英雄详情,在不同的英雄数据试图之间导航。你将学会下面的一些内容:
● 使用内置指令显示和隐藏元素,并且显示英雄数据列表。
●创建组建去显示英雄的详情和列表。
● 对只读数据进行单向数据绑定。
● 用双向数据绑定去编辑一个字段来更新数据模型。
● 把组件方法绑定到用户事件,比如单击和键盘事件
● 允许用户从主列表选择英雄,并且在信息详情视图编辑该英雄。
● 格式化数据用管道(|)
● 创建一个公共的组建去组装所有的英雄
● 在不同的页面和组建之间用路由去导航。
你将学会足够的Angular 核心知识,并且有信心开始使用Angular做任何你想做的事情。当你完成这个指南,你的app是这个样子。(源码)
操作指南
从仪表盘视图和最厉害的英雄开始:

你可以点击“Dashboard” 和“Heroes”在两个不同视图之间进行导航。
假如你点击Dashboard面板上的“Magneta”,将出现英雄详情视图,方便你去编辑英雄的信息。

点击返回按钮可以返回“Dashboard”视图,顶部的链接可以带你去任意一个主页面,假如你点击“Heroes”,这个app将展示“Heroes”列表视图。

当你点击不同的英雄名字,下方的只读英雄区域将反射你点击的英雄名字。你也能点击“View Details”按钮,深入了解编辑你选择的英雄。如下是导航图:

下面是app的操作

下一步
你将一步一步构建这个app,每一步的需求你都可能在其他app中遇到过。
ps:该教程是从dart 官网中dart for the web的教程,搬运过来的,并且进行汉化。英语能力强可以无视该文档,直接点上面的出处去阅读原文。闲来无事,联系一下自己的英语翻译能力和语言组织能力。
网友评论