文档章节

Angular基础(三) TypeScript

zhixin9001
 zhixin9001
发布于 2017/08/18 23:00
字数 811
阅读 12
收藏 1

 

 

 

一、模仿Reddit

a) 运行ng new –ng4angular-reddit创建应用,从随书代码中复制样式文件,新建组件app-root,代码为:

界面可以看到了:

b) 对于界面输入的数据,获取的方式有点特别,使用了#newlink这样的语法,newlink是一个对象,现在代表就是所在的input这个DOM元素。

将对象作为参数传递给addArticle方法,在对应的ts代码中,可以获取newlink.value。newlink是HTMLInputElement类型。

c)关于参数的绑定,在html文件使用{{***}}这样的语法,ts代码中对应的参数如果发生变化会及时反映到界面。

接下来是像这样的文章列表,要添加Article组件,组件的selector为app-article,之后可以在主页面使用<app-article>了。Article组件负责显示每一篇文章,数据要从外部传递,以满足复用的要求,@Input()article:Article定义了输入参数article。

 

在主界面显示文章列表时,用*ngFor遍历,使用[article]=”**”可以向组件传递参数。

最后的效果为:

点击up\down响应非常快,而且无刷新,但还不清楚背后的机制。

 

二、TypeScript

a)TypeScript是ES6(ECMAScript6)的超集,ES6相对于ES5增加了类、模块等特性,TypeScript则又在ES6的基础上增加了强类型的机制。现在支持ES6新标准的浏览器还比较少,ts代码会首先被编译成ES5代码。TypeScript由微软发起并开源,现在Google也在维护。TypeScript具有很多新特性,例如类型、类、装饰器、导入等。

b)Types,强类型有助于在编译的时候及早发现代码错误,并且强类型代码具有更好的可读性。TypeScript代码的写法,与C#在很多地方是相反的:

类型有string、number、boolean、Array<>、enum、any,对于方法的返回值还有void。

c)Classes、Properties、Methods,在ES5中有面向对象的概念,但没有类,ES6为JS内置了类,声明语法为classTable {},类内可以声明具有类型的属性,属性使用时要用this,否则会提示找不到,方法也可以不指定返回类型(包括void),这样的方法可以返回任意类型的结果。

d)Constructors,构造函数见多了,但TypeScript的构造函数名称必须为constructor,构造函数可以有参数,但不能返回值,而且构造函数也不能有重载(ES6可以有)。

e)Inheritance

Car继承了Mechaine,使用extends关键字,通过super初始化父类或调用父类方法。父类的run方法就算不写修饰符也可以被派生类使用,猜想TypeScript中方法的默认修饰符是protected。

f)箭头函数Fat ArrowFunctions,不知道写个Fat是什么意思。与C#的lambda、匿名函数一个意思吧,在箭头函数中,this的作用域在函数内部。

g)字符串模板

TypeScript的字符串模板使用方法,感觉没有string.Format方便的样子,还需要首先定义参数,这里使用倒引号。

 

学习资料:The Complete Book on Angular by Nate Murray, Felipe Coury, AriLerner , Carlos Taborda

 

 

 

 

欢迎关注公众号【菜鸟程序员成长记】

© 著作权归作者所有

zhixin9001
粉丝 6
博文 103
码字总数 87823
作品 0
西安
私信 提问
Google 宣布新的 Angular 2.0 即将发布以及 AtScript 退休

Angular团队宣布在TypeScript方面同微软达成合作关系,而TypeScript的引入也意味着AtScript的终结。同时,Angular团队试图平复社区对迁移至Angular 2.0的担忧。 在ng-conf大会上,Google提及...

oschina
2015/03/07
7.2K
1
Angular 4.1.0 发布

Angular 4.1.0 发布 这是Angular 4.0的第一次小版本发布, Angular版本号语义与发布计划 更新内容: Version 4.1 增加对 TypeScript 2.2 and 2.3 支持. 这个版本的 Angular是使用 TypeScript...

lieefu
2017/04/27
133
0
Angular 4.1.0 正式发布,Web 前端框架

Angular 4.1.0 发布了,这是 Angular 4.0 的第一次小版本发布, Angular 版本号语义与发布计划。 Angular 4.1.0 版本增加了对 TypeScript 2.2 和 2.3 的支持。这个版本的 Angular 是使用 Ty...

局长
2017/04/27
6.3K
19
[Angular Material完全攻略] Day 01 - 开始 & 简介

转载 从Angular第2版正式release后,根据全球最大工程师讨论区StackOverflow的统计,从2016开始的Angular讨论度就不断窜升,甚至超越了React,直到了2017年,甚至摆脱了前一代Angularjs的阴影...

readilen
2018/05/21
0
0
AngularDart 现已全面采用 Dart 开发

一直以来,Angular 2依然采用TypeScript作为主流开发语言,然后自动编译成JavaScript 和 Dart。Dart开发者一直在进行Angular 2拆分,将其分为TypeScript/JavaScript版本和Dart版本,并成立了...

oschina
2016/07/21
6K
25

没有更多内容

加载失败,请刷新页面

加载更多

HeyUI组件库按需加载功能上线,盘点HeyUI组件库有哪些独特功能?

HeyUI组件库 如果你还不了解heyui组件库,欢迎来我们的官网或者github参观。 官网 github 当然,如果能给我们一颗✨✨✨,那是最赞的了! 按需加载 当heyui组件库的组件越来越多的时候,按需...

vvpvvp
24分钟前
4
0
Dockerfile文件详解

Dockerfile文件详解 什么是dockerfile? Dockerfile是一个包含用于组合映像的命令的文本文档。可以使用在命令行中调用任何命令。 Docker通过读取Dockerfile中的指令自动生成映像。 docker bui...

Jeam_
37分钟前
0
0
阿里云PolarDB发布重大更新 支持Oracle等数据库一键迁移上云

5月21日,阿里云PolarDB发布重大更新,提供传统数据库一键迁移上云能力,可以帮助企业将线下的MySQL、PostgreSQL和Oracle等数据库轻松上云,最快数小时内迁移完成。据估算,云上成本不到传统...

zhaowei121
45分钟前
0
0
在数据数据探索过程中的一些常用操作

###pandas在做数据探索时,分组统计均值和中位数参考资料:http://www.cnblogs.com/nxld/p/6058591.htmlhttp://python.jobbole.com/85742/按字典重新赋值,可以直接使用pandas中的repla...

KYO4321
47分钟前
0
0
好程序员分享干货 弹性分布式数据集RDD

一、RDD定义 RDD(Resilient Distributed Dataset)叫做分布式数据集,是Spark中最基本的数据抽象,它代表一个不可变(数据和元数据)、可分区、里面的元素可并行计算的集合。其特点在于自动容...

好程序员IT
49分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部