dart for the web :Tour of Heroes

2019-01-06  本文已影响0人  承影555

应用简介

有一个重要的项目是构建个一个帮助人事机构管理英雄的app,这个应用涵盖了Angular的核心基础,并且有如你期望它是一个完整的,数据驱动的app。包含获取显示英雄列表,编辑选择的英雄详情,在不同的英雄数据试图之间导航。你将学会下面的一些内容:

● 使用内置指令显示和隐藏元素,并且显示英雄数据列表。

●创建组建去显示英雄的详情和列表。

● 对只读数据进行单向数据绑定。

● 用双向数据绑定去编辑一个字段来更新数据模型。

● 把组件方法绑定到用户事件,比如单击和键盘事件

● 允许用户从主列表选择英雄,并且在信息详情视图编辑该英雄。

● 格式化数据用管道(|)

● 创建一个公共的组建去组装所有的英雄

● 在不同的页面和组建之间用路由去导航。

你将学会足够的Angular 核心知识,并且有信心开始使用Angular做任何你想做的事情。当你完成这个指南,你的app是这个样子。源码

操作指南

从仪表盘视图和最厉害的英雄开始:

start

你可以点击“Dashboard” 和“Heroes”在两个不同视图之间进行导航。

假如你点击Dashboard面板上的“Magneta”,将出现英雄详情视图,方便你去编辑英雄的信息。

2

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

3

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

4

下面是app的操作

5

下一步

你将一步一步构建这个app,每一步的需求你都可能在其他app中遇到过。

出处:

ps:该教程是从dart 官网中dart for the web的教程,搬运过来的,并且进行汉化。英语能力强可以无视该文档,直接点上面的出处去阅读原文。闲来无事,联系一下自己的英语翻译能力和语言组织能力。

上一篇下一篇

猜你喜欢

热点阅读