AngularJS2之Angular正式初探

时间:2023-03-09 21:59:08
AngularJS2之Angular正式初探

前言:angular的官方教程真的不错。强烈推荐!!!】

按照环境搭建教程新建一个项目:

项目的结构如下:

AngularJS2之Angular正式初探

其中package.json指示node需要安装的插件(npm install指令会安装的插件全部根据这个文件)

app.component.ts是我们主要编辑的文件。

我们看看他所用的语言:TypeScript——JavaScript的超集。并且顾名思义:有Type的script,不像JavaScript那么弱,都是var

TypeScript有class:

AngularJS2之Angular正式初探

class中的属性可以有不同类型:

AngularJS2之Angular正式初探

通过模板和数据绑定将数据显示到前台:

AngularJS2之Angular正式初探

修改模板:

AngularJS2之Angular正式初探

当我们修改hero.name时,h2中的并未修改,我们需要双向数据绑定!

编辑app.module.ts,引入FormsModule组件

AngularJS2之Angular正式初探

修改input标签:

AngularJS2之Angular正式初探

完成了这一切的你是否在想:这太麻烦了,我通过dom操作就能实现这所谓的双向绑定,这个Angular要学点node还要学typescript真烦~~

可你不觉得typescript很cool吗?他可是c#之父制作的