angularjs2进阶教程-项目介绍

前端之家收集整理的这篇文章主要介绍了angularjs2进阶教程-项目介绍前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

下载源码

http://pan.baidu.com/s/1i50tryl

这个教程教你怎么用TypeScript一步一步的创建angular项目

我们本教程的计划是建立一个应用程序,以帮助管理英雄。

数据驱动的应用程序:获取显示英雄列表,编辑选定的英雄的细节,并在不同的英雄数据观导航。这个教程涵盖了angular2的核心基础。我们将使用内置指令来显示/隐藏元素和显示英雄数据列表。我们将创建一个组件来显示英雄的细节,另一个显示英雄的数组。我们将使用单向数据绑定只读数据。我们将添加可编辑字段与双向数据绑定更新模型。我们将组件方法绑定到用户事件,例如按键和点击。我们将学习从主列表中选择一个英雄并在细节视图中编辑英雄。我们将用管道格式化数据。我们将创建一个共享的服务来组装我们的英雄。我们将使用路由在不同的视图和它们的组件之间导航。


项目启动以Dashboard为首页,这个页面显示了许多有英雄气概的英雄。在这个页面上可以有两个视图Dashboard 和Heroes,点击可以切换。在输入框中输入字母,可以自动补全



点击这页面上的Magneta,路由跳转到英雄详情,我们可以在这个页面改变英雄的名字。


点击Back按钮我们可以退到Dashboard页面。点击Heroes,进入下面页面

点击其中一个,下面出现了"View Details" 按钮

可以修改后保存

原文链接:https://www.f2er.com/angularjs/147962.html

猜你在找的Angularjs相关文章