素材巴巴 > 程序开发 >

【Angular2】Tour of Hero 部分理解

程序开发 2023-09-03 23:36:18

背景

由于负责项目中Angular2的端对端测试和单元测试,所以需要掌握一定Angular的知识

同时还需要学习Typescript,Karma,Jasmine,Protractor一些相关知识

现在需要一些简单的项目来熟悉Angular2的运转,官方的Tour of Hero就是一个不错的上手项目

 

功能说明

这里写图片描述

该系统的功能简单来说就是:列表显示英雄,点击查看并可以修改英雄的信息

 

知识点

1.module和component

最开始会在module和component里面编写代码,在看完架构的文档之后,从字面上知道了他们在干什么,但是还是有点云里雾里

目前理解,component是组件,可以把它理解为函数方法,因为有输入有输出,不过它的输出是在页面。所以也就有了官网上的组件控制屏幕上的一小块区域。

module是模块,用来打包那些组件

可以类比一个控制台程序,我们有根模块main,也有其他的类模块,相关模块封装自己了自己函数组件


2.npm start

在建立了项目之后,我们需要运行自己的程序。

这里,在cmd窗口中cd到该项目下,然后使用这个命令,项目就启动了

它的好处是代码变化后会自动编译,浏览器会自动刷新


3.模板和插值表达式

组件要在页面呈现出一部分内容,说到底是一些HTML代码,所以模板就是充当HTML的

但是每次呈现不是一样的东西,不一样的数据,一样的是结构样式,这里的结构样式用的就是模板

那些每次不一样,变化的数据用的 插值表达式 ,像一个变量插入到HTML代码中


4.双向绑定

使用插值表达式,使得组件里面的数据改变,页面和跟着改变

那么如果用双向绑定之后,在页面改变数据,组件里的也会跟着改变

记得要在模块里引用FormsModule,双向绑定需要这个


5.ngFor

这是个迭代输出函数,迭代出每一个英雄对象,通过插值表达式把id和name放在每一条span中

源码:

  • {{hero.id}} {{hero.name}}
  • 输出后:

  • 11 Mr. Nice
  • 12 Narco
  • 13 Bombasto
  • ... 英雄信息在li标签的遍历 ...

     

    小结

    在Angular2学习中,无论是从基本语法还是设计架构,都有很多新鲜的知识需要学习

    但是随着一点一滴的积累,相信之后会有很好的应用


    标签:

    上一篇: Vue脚手架通过npm安装失败原因 下一篇:
    素材巴巴 Copyright © 2013-2021 http://www.sucaibaba.com/. Some Rights Reserved. 备案号:备案中。