Angular基础(三) TypeScript

一、模仿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

时间: 2024-10-05 23:31:27

Angular基础(三) TypeScript的相关文章

第214天:Angular 基础概念

一.Angular 简介 1. 什么是 AngularJS - 一款非常优秀的前端高级 JS 框架 - 最早由 Misko Hevery 等人创建 - 2009 年被 Google 公式收购,用于其多款产品 - 目前有一个全职的开发团队继续开发和维护这个库 - 有了这一类框架就可以轻松构建 SPA 应用程序 - 轻松构建 SPA(单一页面应用程序) - 单一页面应用程序: + 只有一个页面(整个应用的一个载体) + 内容全部是由AJAX方式呈现出啦的 - 其核心就是通过指令扩展了 HTML,通过

angular基础

常用的设计原则和设计模式 1.设计原则(明确)① YANGI(You aren't gonna need it) 不写不需要的代码②KISS(Keep it simple and stupid) 代码越简单越好③DRY(Don't Repeat Yourself)封装代码④高内聚低耦合内聚:一个模块内部的不同部分之间的关系耦合:不同模块/组件的关系⑤SRP(single responsibility principle) 单一责任原则⑥OCP(open closed principle) 开闭原

Python全栈开发【基础三】

Python全栈开发[基础三]  本节内容: 函数(全局与局部变量) 递归 函数 一.定义和使用 函数最重要的是减少代码的重用性和增强代码可读性 1 def 函数名(参数): 2 3 ... 4 函数体 5 ... 6 返回值 函数的定义主要有如下要点: def:表示函数的关键字 函数名:函数的名称,日后根据函数名调用函数 函数体:函数中进行一系列的逻辑计算 参数:为函数体提供数据 返回值:当函数执行完毕后,可以给调用者返回数据. 总结使用函数的好处: 1.减少代码重用 2.保持一致性,易维护

JS基础三

1.delete删除对对象的属性和方法的定义.强制解除对它的引用,将其设置为 undefined delete 运算符不能删除开发者未定义的属性和方法. 2.void 运算符对任何值返回 undefined.该运算符通常用于避免输出不应该输出的值,没有返回值的函数真正返回的都是 undefined. 3.前增量运算符,就是数值上加 1,形式是在变量前放两个加号(++): var iNum = 10; ++iNum; 第二行代码把 iNum 增加到了 11,它实质上等价于: var iNum =

【Angular】Angular基础(3)

Angular基础(3) -------Angular Bootstrap 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <link rel="stylesheet" href="//apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.min.css"> 6 &

SQL基础三(例子)

-------------------对分组统计的结果进一步筛选(having子句使用)------------------------------ select * from student2010 --1.查询qypt08class表中各院系的人数,只显示人数多于400的记录 select yx,sum(rs) from qypt08class group by yx having sum(rs)>400 --2.统计stucou表中各门课程的选修人数,只显示人数少于30的记录(显示coun

Object Pascal 语法之语言基础(三)

1.6 Object Pascal 的运算符 运算符是程序代码中对各种类型的数据进行计算的符号,通常分为算数运算符.逻辑运算符.比较运算符和按位运算符. 1.算术运算符Object Pascal 语言的算术运算符,如表1-9 所示.表1-9 Object Pascal 语言算术运算符 操作符 操作 操作数据类型 结果类型 + 加 整型.实型 整型.实型 - 减 整型.实型 整型.实型 * 乘 整型.实型 整型.实型 / 除 整型.实型 整型.实型 mod 取余 整型 整型 div 整除 整型 整

色彩及图像基础(三)

色彩及图像基础(三) 学习时间:2014.04.30 学到了-- 1. 图像压缩的基础在于: ①原始图像信息存在着很大的冗余度: ②人眼对图像的亮度信息敏感.对颜色分辨率弱. 2. 数据压缩的两类基本方法: ①无损压缩:将相同的或相似的数据或数据特征归类,使用较少的数据量描述原始数据,达到减少数据量的目的. ②有损压缩:利用人眼的视觉特性有针对性地简化不重要的数据,以减少总的数据量. 3. 图像的编码方法:行程编码.增量调制编码和霍夫曼编码. 行程编码: 1. RLE(Run-Length En

【蓝鸥Unity开发基础三】课时3 Terrain地形系统【未完】

[蓝鸥Unity开发基础三]课时3  Terrain地形系统[未完] 推荐视频讲师博客:http://11165165.blog.51cto.com/ 一.Terrain地形系统 Terrain地形系统 资源包的导入 场景漫游 立方体是:长宽高1m 二.Terrain地形系统 1.Terrain组件:提升地形/沉降地形工具 点击左键-- 提升地形 点击左键+Shift--沉降地形 选择笔刷的形状.笔刷的大小,笔刷的硬度--绘制地形 2.Terrain:平坦地形工具:设置地形目标高度 平滑地形工具