Angular 2基础(一) 环境搭建

Angular2是一款开源JavaScript库，由Google维护，用来创建页面应用程序。正式发布于2016年9月，基于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编译生成。

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

然后在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下载需要依赖的组件。

 

b) 新建index.html内容为：

当前只添加了需要引用的js和css，没有其它内容。有必要了解一下添加这几个js引用的目的。

ES6Shim，Shim为垫片的意思，这个文件的作用主要为了保证对旧版本浏览器的兼容性。对于支持最新的ES6标准的浏览器，可以不需要这个文件。

Zone，大概作用是让Angular能够检测数据的变化，当前无法深入了解。

ReflectMetadata，Angular2使用Typescript语言，TypeScript具有类型注解(Annotation)，添加这个引用是为了能够使用这些注解。

SystemJs，是一个模块加载器，用于创建模块并解析模块间的依赖。

c) 接下来创建TypeScript文件app.ts，.ts文件之后会被编译成.js文件。

使用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, NateMurray, Carlos Taborda

​