使用 Angular-cli 脚手架搭建 Angular2 项目工程

Angular2 是 Angular 1.x 的升级版本,性能上得到显著的提高,它是基于 ES6 来开发的,所以与 Angular1.x 在使用方法上有着显著的差异,可以说是两种语言了。
相比较于 Angular1.x 在项目中的引用,只需要添加代码即可在页面中使用,而 Angular2 需要使用 Angular-cli 脚手架工具来安装,倒是与 vue 和 react 的安装方式一样。

一、使用Angular-cli安装Angular2

使用命令npm install -g angular-cli安装
安装 angular脚手架工具
安装过程较慢,等待3分钟即可安装完成,显示如下的界面:
表示安装成功
使用命令ng --version来查看是否安装成功(或者是否已经安装过,如果已经安装过了就跳过前一步安装)。
使用 Angular-cli 脚手架搭建 Angular2 项目工程_第1张图片

二、搭建Angular2工程

安装完 Angular2 之后,我们需要搭建一个 Angular2 运行的环境,首先在桌面新建存放 Angular2 项目的文件夹,进到这个文件夹,输入命令ng new FirstAngular2Pro

使用 Angular-cli 搭建的 Angular2 项目目录结构如下:
使用 Angular-cli 脚手架搭建 Angular2 项目工程_第2张图片

三、运行项目

运行 Angular2 项目,使用命令 ng serve
使用 Angular-cli 脚手架搭建 Angular2 项目工程_第3张图片
运行成功后,在浏览器地址栏输入http://localhost:4200/,4200是默认的,但是也可以修改成其他的端口号,这个以后再细说。
使用 Angular-cli 脚手架搭建 Angular2 项目工程_第4张图片

四、总结

其实使用 angular-cli 搭建 Angular2 项目很简单,只需记住如下几个命令即可。

  1. npm install -g angular-cli 首先安装脚手架;
  2. ng --version 查看安装成功(是否已经安装过);
  3. ng new FirstAngular2Pro 搭建工程目录;
  4. ng serve 运行Angular2项目。

你可能感兴趣的:(angular2)