dart for the web :Tour of Heroes第一天

应用简介

有一个重要的项目是构建个一个帮助人事机构管理英雄的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的教程,搬运过来的,并且进行汉化。英语能力强可以无视该文档,直接点上面的出处去阅读原文。闲来无事,联系一下自己的英语翻译能力和语言组织能力。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。