Angular2是一款开源JavaScript库,由谷歌(Google)维护,用来创建页面应用程序。正式发布于二〇一四年十一月,基于ES6支付。

 

① 、准备工作

利用Angular2开发,须要事先做一些布局上的布局,如NPM、Node.Js、Git等,还要对TypeScript有个大概的摸底。

a)NPM是会同NodeJS一起安装的包管理器,那应该接近NuGet的功能了。NPM集成在了NodeJS安装包,能够一并安装,在CMD输入npm
–v和node –v能够表达是或不是已设置。

b)TypeScript则是由微软开发的开源编制程序语言,是JavaScript的最佳,扩大了JavaScript的语法,并且是强类型的。TypeScript的安装,能够下载安装包,也得以在CMD输入$
npm install -g typescript安装。

c)
使用TypeScript编写HelloWorld

创立index.html文件如下,引用hello.js。当前并不存在hello.js,须要从TypeScript编写的hello.ts编写翻译生成。

图片 1

hello.ts文件中只是简单的alert,那儿看不出typescript语法的特点。

图片 2

然后在CMD出席文件所在的任务并执行tsc
hello.ts,当前文件夹中就会油但是生hello.js,index.html就能够运作了。

d)
还要设置Git,此前附带安装了GitExtension和TortoiseGit。

 

二、开始Angular
2

a)
使用Git
Bash,创设项目存放路径。然后在目录中成立package.json、tsconfig.json、typings.json文件,内容能够从Angular2的GitHub或本书的演示代码复制。

接下来须求执行npm
install安装信赖组件,但国内基本不能够直接采纳npm,能够先安装天猫商城的镜像$
npm install -g cnpm –registry=https://registry.npm.taobao.org,然后执行
cnpm install,cnpm会遵照package.json下载须要依赖的零件。

图片 3

 

b)
新建index.html内容为:

图片 4

日前只添加了亟待引用的js和css,没有别的内容。有必不可少精通一下添加那多少个js引用的目标。

ES6Shim,Shim为垫片的意思,那几个文件的效率首要为了保障对旧版本浏览器的包容性。对于支撑最新的ES6标准的浏览器,能够不供给那一个文件。

Zone,差不离成效是让Angular能够检测数据的浮动,当前无法深切摸底。

ReflectMetadata,Angular2使用Typescript语言,TypeScript具有类型注明(Annotation),添加那个引用是为着能够使用那个注脚。

SystemJs,是三个模块加载器,用于创建立模型块并分析模块间的依赖。

c)
接下来创设TypeScript文件app.ts,.ts文件之后会被编写翻译成.js文件。

图片 5

选择import{things}
from “where”的格式,添加注重项。

Angular2的最大特色正是组件(component)。寻常境况下,浏览器只好识别属于html的记号,比如<form>、<ul>等,假如想要浏览器度和胆识别1个<hello-world>标签,遵照常理是不可能的,但那真是Angular2的组件要做的,即“教会浏览器度和胆识别新的竹签”。

地点图片中@Component中正是概念了二个组件,selector属性钦赐了DOM成分即标签的称谓,编写翻译时会找到呼应的组件做拍卖。

template属性可以钦点模板,模板用倒引号(
`…` )括起来,倒引号语法是ES6的新特征,可支撑多行字符。

末段一行的bootstrap(HelloWorld);设定了先后的“入口”为HelloWorld组件,程序运营后,HelloWorld会首先被渲染。

 

读书材质:The
Complete Book on AngularJS 2 by Ari Lerner, Felipe Coury, NateMurray,
Carlos Taborda

 

 

 

 

相关文章

网站地图xml地图