【Angular2】搭建开发环境

一、前言

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

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

二、Angular2是什么？

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

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

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

• NPM 使用介绍

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

• TypeScript 入门教程

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

三、环境搭建

3.1 环境要求

• nodejs

• cnpm

• typescript

• typings

• @angular/cli

3.2 安装NodeJs

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

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

      安装完毕后我们需要检查一下是否安装成功：在命令窗口中，输入 node -v ，如果出现版本号，说明安装成功。小编这里安装的是v6.11.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键直接执行，如下图所示：

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

cnpm –v

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

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

3.4 安装typescript和typings

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

cnpm install –g typescript@2.2.2 typings

      安装效果：

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

tsc –v

• 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

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

ng version

3.6 介绍几款前端开发的IDE

• webstorm

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

• VS Code

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

四、小结

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

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