Angular 2基础(一) 环境搭建

Angular2是一款开源JavaScript库,由Google维护,用来成立页面应用程序。正式发表于2016年一月,基于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>等,如若想要浏览器识别一个<hello-world>标签,依照规律是无法的,但这正是Angular2的机件要做的,即“教会浏览器识别新的标签”。

地点图片中@Component中便是概念了一个零件,selector属性指定了DOM元素即标签的名号,编译时会找到相应的零部件做处理。

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

说到底一行的bootstrap(HelloWorld);设定了程序的“入口”为HelloWorld组件,程序启动后,HelloWorld会首先被渲染。

 

学学材料:The
Complete Book on AngularJS 2 by Ari Lerner, Felipe Coury, Nate默里(Murray),
Carlos(Carlos) Taborda

 

 

 

 

相关文章