文档资料

任务详情

Angular学习

教程:英雄指南:https://www.angular.cn/tutorial#tutorial-tour-of-heroes

按照上面教程跑一边,做图文记录

简介

效果

下面是本教程关于界面的构想:开始是“Dashboard(仪表盘)”视图,来展示最勇敢的英雄。

仪表盘顶部中有两个链接:“Dashboard(仪表盘)”和“Heroes(英雄列表)”。 你将点击它们在“仪表盘”和“英雄列表”视图之间导航。

当你点击仪表盘上名叫“Magneta”的英雄时,路由会打开英雄详情页,在这里,你可以修改英雄的名字。

点击“Back(后退)”按钮将返回到“Dashboard(仪表盘)”。 顶部的链接可以把你带到任何一个主视图。 如果你点击“Heroes(英雄列表)”链接,应用将把你带到“英雄”列表主视图。

当你点击另一位英雄时,一个只读的“微型详情视图”会显示在列表下方,以体现你的选择。

你可以点击“View Details(查看详情)”按钮进入所选英雄的编辑视图。

下面这张图汇总了所有可能的导航路径。

Angular记录(2)的更多相关文章

  1. Angular记录(11)

    开始使用Angular写页面 使用WebStorm:版本2018.3.5 官网资料 资料大部分有中文翻译,很不错 速查表:https://www.angular.cn/guide/cheatsheet ...

  2. Angular记录(10)

    文档资料 速查表:https://www.angular.cn/guide/cheatsheet 风格指南:https://www.angular.cn/guide/styleguide Angula ...

  3. Angular记录(9)

    文档资料 箭头函数--MDN:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Functions/Arrow_fun ...

  4. Angular记录(8)

    文档资料 箭头函数--MDN:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Functions/Arrow_fun ...

  5. Angular记录(7)

    文档资料 箭头函数--MDN:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Functions/Arrow_fun ...

  6. Angular记录(6)

    文档资料 箭头函数--MDN:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Functions/Arrow_fun ...

  7. Angular记录(5)

    文档资料 箭头函数--MDN:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Functions/Arrow_fun ...

  8. Angular记录(4)

    文档资料 箭头函数--MDN:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Functions/Arrow_fun ...

  9. Angular记录(3)

    文档资料 箭头函数--MDN:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Functions/Arrow_fun ...

随机推荐

  1. 小程序的js处理步骤

    <!-- 包含请求路由 --> var hostUrl = require('../../config.js').hostUrl; Page({ <!-- 页面的初始数据 --> ...

  2. SQLServer无法删除登录名'***',因为该用户当前正处于登录状态解决方法

    问题描述: sqlserver在删除登录名的时候提示删除失败 标题: Microsoft SQL Server Management Studio -------------------------- ...

  3. Saltstack_使用指南02_远程执行-验证

    1. 主机规划 2. Master与哪些minion通信 2.1. Master与哪些minion正常通信 [root@salt100 ~]# salt '*' test.ping salt100: ...

  4. phoenix API服务发布

    概述 Elixir 的 Phoenix 框架对于开发 Web 应用非常方便,不仅有 RoR 的便利,还有 Erlang 的性能和高并发优势. 但是应用的发布涉及到 Erlang 和 Elixir 环境 ...

  5. 面向对象_item项目

    详细见老师博客:http://www.cnblogs.com/Eva-J/articles/7351812.html#_label9 __getitem__\__setitem__\__delitem ...

  6. Pyqt5-Python应用开发——第一个小程序的实现

    环境:python 3.6.6 编辑器:pycharm 其他:QtDesigner:Qt Designer,是一个直观可见的全方位 GUI 构造器,它所设计出来的用户界面能够在多种平台上使用.它是 Q ...

  7. linux下 启动node 和关闭node

    1.用forever  进行管理 npm install -g forever forever start app.js //启动 forever stop app.js //关闭 2.用自带的服务n ...

  8. [LeetCode]2. 两数相加

    题目链接:https://leetcode-cn.com/problems/add-two-numbers/ 题目描述: 给出两个 非空 的链表用来表示两个非负的整数.其中,它们各自的位数是按照 逆序 ...

  9. esp8266 免费wifi强推广告神器(4) 发现当前WIFI下的用户数目,IP,MAC请求http信息 在用户请求跳转后跳转

    需求: 1 获取当前连接客户端的HTTP请求各种信息 方法 get  http 请求路径  例如  /index.html   /    /pic.jpg 请求版本   HTTP/1.0     HT ...

  10. leetcode 224. Basic Calculator 、227. Basic Calculator II

    这种题都要设置一个符号位的变量 224. Basic Calculator 设置数值和符号两个变量,遇到左括号将数值和符号加进栈中 class Solution { public: int calcu ...