【Angular2】搭建开发环境

待我称王封你为后i 2022-06-08 13:13 275阅读 0赞

# 一、前言 #

随着前端工程化的浪潮到来，最近公司的新项目需要使用Angular2作为前端的开发语言。当然小编之前是没有接触的，而且Angular2也是在AngularJs的基础上发展出来的。但是官网说他们相同的地方不多，事实证明确实不多。但是经过小编几个月的研究也是很快就是上手了Angular2。

下面小编就带领大家搭建一下Angular2的开发环境吧。

# 二、Angular2是什么？ #

可能有一些老程序员只知道使用js、jquery等，很多朋友不太了解什么是Angular2。小编从“菜鸟教程”上面找了Angular2的定义：

![这里写图片描述][SouthEast]

> AngularJS2 是一款开源JavaScript库，由Google维护，用来协助单一页面应用程序运行。  
> AngularJS2 是 Angular 1.x 的升级版本，性能上得到显著的提高，能很好的支持 Web 开发组件。  
> AngularJS2 发布于2016年9月份，它是基于ES6来开发的。

学习Angular2之前，小编建议还是需要具备基本的前端基础：HTML、CSS、JavaScript。此外你还需要了解 NPM 及 TypeScript。

*  [NPM 使用介绍][NPM]

> NPM是随同NodeJS一起安装的包管理工具，能解决NodeJS代码部署上的很多问题  
> 注意：由于国内网络的限制，跟多的时候我们用到的是cnpm。

*  [TypeScript 入门教程][TypeScript]

> TypeScript 是一种由微软开发的自由和开源的编程语言，它是JavaScript的一个超集，扩展了JavaScript的语法。

# 三、环境搭建 #

## 3.1 环境要求 ##

*  nodejs
 *  cnpm
 *  typescript
 *  typings
 *  @angular/cli

## 3.2 安装NodeJs ##

这个的安装过程很简单，打开[Nodejs的官网][Nodejs]，选择自己的系统，下载指定的安装包。

![这里写图片描述][SouthEast 1]

这里，小编下载的是windows 64位的。下载后傻瓜步骤安装即可。

安装完毕后我们需要检查一下是否安装成功：在命令窗口中，输入 node -v ，如果出现版本号，说明安装成功。小编这里安装的是v6.11.2版本。

![这里写图片描述][SouthEast 2]

为什么要安装node.js呢？ 因为Angular2是基于node.js的，所以要先安装nodejs环境

## 3.3 安装cnpm ##

在前文中小编说要学习Angular2，要了解一下npm。而npm是一个包管理工具。但是使用npm安装插件是从国外的服务器下载的，由于咱们大中国有强大的防火墙，国内网络不翻墙很难访问外国的服务器。这样咱么下载插件就会有异常。但是各位不要怕，咱们这么强大的中国人民，怎么会因为这个而耽误挣钱呢？ 淘宝团队就做了一个完整的npmjs.org镜像，用cnpm代替npm，cnpm与nodejs的npm用法一致,只是在执行命令时，将npm改为cnpm。所以这里咱们安装cnpm。

打开命令窗口，输入:

npm install cnpm -g --registry=https://registry.npm.taobao.org

注意：有的时候输入上面的命令不一定好使，可以把 -g放到最后。

按下enter键直接执行，如下图所示：

![这里写图片描述][SouthEast 3]

查看安装情况，在命令窗口输入：

cnpm –v

注意：查看版本号或者关闭命令提示符重新打开，否则安装完毕后直接使用会出现错误。

如果出现如下效果，就说明安装成功了：

![这里写图片描述][SouthEast 4]

# 3.4 安装typescript和typings #

在命令窗口中，使用cnpm命令来完成插件安装：同样注意的是，-g有的时候不太完美，放到指令的最后有可能完成。

cnpm install –g typescript@2.2.2 typings

安装效果：

![这里写图片描述][SouthEast 5]

运行完毕之后，查看版本确定是否安装成功，在命令提示符中直接输入下面的命令，出现版本号，即为安装成功：

tsc –v

![这里写图片描述][SouthEast 6]

*  JavaScript 与 TypeScript 的区别

TypeScript 是 JavaScript 的超集，扩展了 JavaScript 的语法，因此现有的 JavaScript 代码可与 TypeScript 一起工作无需任何修改，TypeScript 通过类型注解提供编译时的静态类型检查。  
      TypeScript 可处理已有的 JavaScript 代码，并只对其中的 TypeScript 代码进行编译。

## 3.5 安装@angular/cli ##

用cnpm安装@angular/cli,直接在命令提示符中输入：

cnpm install –g @angular/cli@1.0.0

![这里写图片描述][SouthEast 7]

我们可以通过下面的命令来检查是否安装成功了：

ng version

![这里写图片描述][SouthEast 8]

## 3.6 介绍几款前端开发的IDE ##

*  [webstorm][]

这是一款和Idea界面非常相似的IDE，相信使用idea比较多的朋友，肯定喜欢这个。

![这里写图片描述][SouthEast 9]

*  [VS Code][]

这款工具也非常的好用，界面非常的简介，使用很方便。小编就在使用这个。

![这里写图片描述][SouthEast 10]

# 四、小结 #

其实这篇博客是很简单的，操作没有什么技术性，更多的是配置好了，不用记住命令是什么。灵活操作，做好最帅的自己！

好了，到这步为止我们的开发环境就搭建完了。具体如何建立项目，小编将在下一篇博客中，向大家介绍。

[SouthEast]: /images/20220608/e9fad1fcaecf4254830c18b455684035.png
[NPM]: http://www.runoob.com/nodejs/nodejs-npm.html
[TypeScript]: http://www.runoob.com/w3cnote/getting-started-with-typescript.html
[Nodejs]: http://nodejs.cn/download/
[SouthEast 1]: /images/20220608/e550b0b9b7b445c19f21fafdf9801b38.png
[SouthEast 2]: /images/20220608/df39339162df4312b3d728a9f1e35bc4.png
[SouthEast 3]: /images/20220608/e9a3f7748e8c4d49bc44206cb5a97800.png
[SouthEast 4]: /images/20220608/536e568fb3744c8cb7165ebe2207fb60.png
[SouthEast 5]: /images/20220608/4d80e79bde9740929a9c6fe019a67091.png
[SouthEast 6]: /images/20220608/c16352ba36c848c7b107311a93cc5a7c.png
[SouthEast 7]: /images/20220608/bbff8a1537394e389153a3590c80a3ca.png
[SouthEast 8]: /images/20220608/02996f007a2842cfb60a951146e31376.png
[webstorm]: http://www.jetbrains.com/webstorm/
[SouthEast 9]: /images/20220608/7ff47cdf51da49c88ebfed9c76a5f2b5.png
[VS Code]: https://code.visualstudio.com/
[SouthEast 10]: /images/20220608/9f5579fc18a54082a8ab78c8dd1cd0e5.png