【angular】angular2环境配置及安装详解

什么是框架？众所周知，就是一种实现的结构，从程序员的角度看，前端框架是一种特殊的、已经实现了的web应用，我们只需要对他进行具体的业务逻辑的填充即可，由框架根据具体的业务逻辑来调用代码的执行。angular就是一个这样的JavaScript框架。下面我们就来说一下，angular2安装过程中所需要的环境配置。

---

一、解析环境

1、Node. js下载

解析：
Node.js是一个让JavaScript运行在服务端的开发平台，它让JavaScript成为与PHP、Python、Perl、Ruby等服务端语言平起平坐的脚本语言。由于angular框架是基于JavaScript语言的，所以Node.js的环境必不可少。

下载安装：
打开Node.js官网，点击硕大的绿色Download按钮，它会根据系统信息选择对应版本（.msi文件）。node.js插件在windows系统下是个.msi工具，只要一直下一步即可，软件会自动在写入环境变量中，这样就能在cmd命令窗口中直接使用node或npm命令。

2、安装cnpm

解析：
在知道cnpm前，我们先来看一下npm.

npm（node package manager）是Node.js的包管理器，用于node插件管理（包括安装/卸载/管理依赖等）。因为我们在Node.js上开发时，会用到很多前人们开发好的JavaScript代码，如果我们要用到前人写的包，每次都根据名称搜索一下官方网站，下载代码，然后解压使用，步骤非常繁琐。于是一个集中管理的工具（npm）应运而生，大家可以将自己开发的东西放到npm官网上，如果需要使用直接通过npm安装即可使用，而且最方便的是，如果我们要使用模块1，而模块1又依赖于模块2，模块2又依赖于模块3和4 ，npm就可以根据依赖关系，把所有依赖的包都下载下来并管理起来。这样以来是不是省了大事了！！！

npm是随着Node.js一起安装的包管理器，能解决Node.js代码部署上的很多问题，他是Node获得成功的重要原因之一。所以刚在我们在安装完Node.js之后，在命令窗口可直接使用node和npm命令：

那么既然npm这么强大，为什么还会出现cnpm呢？？？

因为npm安装插件是从国外服务器上下载的,受网络影响很大,可能出现异常,为了避免异常出现,我们乐于分享的淘宝团队干了这样一件事, 开发了一个完整的npmjs.org镜像, 官网上是这样说的:" 这是一个完整的npmjs.org镜像, 你可以用此代替官方版本(只读), 同步频率目前为10分钟一次,以保证尽量与官方服务同步"。 cnpm与nodejs的npm用法一致,只是在执行命令时，将npm改为cnpm。

下载安装:

在cmd命令窗口中直接输入：

按下enter键直接执行，安装完毕后需要查看版本号,否则直接使用会出现错误:

3、安装typescript和typings

解析：

typeScript是一种由微软开发的自由和开源的编程语言。它是JavaScript的一个超集，而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程。TypeScript扩展了JavaScript的语法，所以任何现有的JavaScript程序可以不加改变的在TypeScript下工作。TypeScript是为大型应用之开发而设计，而编译时它产生 JavaScript 以确保兼容性。——总体来说就是JavaScript语言的更高级扩展，在angular中使用的是typescript语言来进行行为交互，而不是简单的JavaScript语言。

那typings又是做什么的那？？？

我们说typescript是JavaScript语言的更高级扩展，JavaScript程序可以不加改变的在TypeScript下工作，但是有些js库也扩展了JavaScript的特性和语法，而typescript并不能按照原有的规则去识别这些扩展，这时候就需要有一个中转配置——typings，来辅助IDE，给出智能的提示信息，以及重构的依据。因此，需要在typings.json文件中配置typescript类型定义文件（文件名后缀为 .d.ts)

下载安装：

用npm安装typescript和typings,在命令提示符中直接输入：

运行完毕之后，查看版本确定是否安装成功：

4、安装angular/cli

解析：

angular-cli它是angular框架官方的一个构建工具，用来创建，打包，发布项目。angular-cli的核心是webpack，以及npm做为依赖包。当我们在cmd中使用 ng new xxx(项目名) 创建一个项目时，会自动生成项目结构，并执行 npm install 下载依赖包。

下载安装：

在cmd窗口中用cnpm安装@angular/cli,直接在命令提示符中输入——下载最新版本：

5、环境搭建到此完成

环境搭建到此完成，下面就可以运行ng项目啦，即为angular项目，在命令窗口输入“ng version”,出现如下图所示效果，证明@angluar/cli安装成功。

二、项目创建

要想通过angular框架来开发项目，就需要有专门的项目开发工具来支持。大型项目中通用的是 webstorm——持续集成服务器，但是由于运行webstorm工具占用内存较高，也可以使用vscode,这个轻量级工具进行开发。

1、创建项目

直接在命令提示符中输入：

PS:angular-cli-project这是项目名称，视情况而命名

PS:angular2的基本文件已经创建，接下来就是下载项目所依赖的nodejs包，用ng new angular-cli-project,直接创建如果不终止的话，默认用npm从国外网站下载资源，下载速度极慢。所以基本文件下载完毕之后，终止进程，然后用cnpm下载项目所依赖的nodejs包

2、定位到项目目录

在命令提示符中直接输入：

3、安装项目以来的所有node.js包

在命令提示符中直接输入：

4、启动web服务

直接在命令提示符中输入:


效果图：

PS:除了用ng serve启动项目之外，也可以在命令提示符中直接输入：cnpm start开启。