angular2的环境搭建

一、安装node.js

1.安装(最好是最新版本)：

nodejs 的官网

2.查看版本号：

cmd  :  node -v

3.了解：node的管理模板n

• 全局安装：npm i -g n 或 npm i -g n --force;
• 使用其升级node.js的版本：
  升级到指定开发的版本：n 10.0.0（版本号）；
  安装最新版本：n lastest;
  安装最近稳定的版本：n stable 或 n --stable;
• 注意：n模板不支持window系统。

二、安装TypeScript（后面简称TS）

1.了解：

TS是JavaScript ES6的一个超集。angular项目安装TS并不是必须的，由于angular本身就是用TS写成的，所以一般开发项目会选择用TS。

2.安装TS：（注意安装TS 1.7或者更高的版本）

npm i -g typescript

三、安装命令工具行angulat-cli

1.建议先安装淘宝镜像：

npm i -g cnpm--

2.安装angular-cli：

cnpm i -g @angular-cli

3.查看版本号：

ng -v

四、创建项目

1.创建项目：

ng new hello-world

（看到Project ‘hello-word’ successfully created.说明安装成功）

2. 使用cnpm下载包：

进入到hello-worldt一级目录中，使用cnpm install 命令进行安装项目所依赖的node.js包：安装的过程比较漫长~

cd hello-world
cnpm install 

3. 开启服务器：

ng serve 或 npm start

等待 webpack 进行模块的打包;
成功后会出现webpack:Compiled successfully;
浏览器访问：http://localhost:4200（默认的端口号）。

五、查看项目的目录

editorconfig                         // ide 的一个配置文件
README.md                             // 该应用的一些简介
src/app/app.component.css             // 项目的主样式
src/app/app.component.html            // 项目的主模板
src/app/app.component.spec.ts
src/app/app.component.ts              // 项目的主组件，定义AppModule，这个根模块会告诉Angular如何组装该应用
src/app/app.module.ts                 // 项目的主模块
src/assets/.gitkeep                   // 这个文件夹下你可以放图片等任何东西，在构建应用时，它们全都会拷贝到发布包中。
src/environments/environment.prod.ts  // 环境配置，生产环境
src/environments/environment.ts       // 环境配置，默认环境，开发环境
src/favicon.ico                       // 每个网站都希望自己在书签栏中能好看一点。 请把它换成你自己的图标。
src/index.html                        // 宿主页面
src/main.ts                           // 整个web应用的入口点，angular通过该项目来启动整个项目
src/polyfills.ts                      // 导入一些必要的库,使得angular可以在一些老版本的浏览器中运行
src/styles.css                        // 公共样式
src/test.ts                           // 这是单元测试的主要入口点
src/tsconfig.app.json
src/tsconfig.spec.json
src/typings.d.ts
.angular-cli.json                     // Anguar 编译依赖（可以在其中引入一些 css 和 js 的库，如 jquery, bootstrap）
e2e/app.e2e-spec.ts                   // e2e 端对端测试目录
e2e/app.po.ts
e2e/tsconfig.e2e.json
.gitignore                            // 项目上传到 git 时，需要忽略一些文件上传的配置文件
karma.conf.js                         // 执行自动化测试的
package.json                          // npm 工具的配置文件，指明了当前这个应用所要用到的模块，Angular 的依赖包
protractor.conf.js                    // 做自动化测试的一个配置文件
tsconfig.json                         // TypeScript 编译器的参数
tslint.json                           // 定义 ts 文件质量检查的一些规则