配置Angular运行环境并创建一个简单的Angular

要编写和运行Angular程序，需要配置环境，需要安装node.js、angular-cli包、git、一个IDE工具（这里根据自己的喜好，这里用的webstrom）

1. 配置Angular运行环境

安装nodeJS，官网下载自己系统对应版本

下载地址：
https://nodejs.org/en/download/

下载完成后安装到自己需要保存的目录然后CMD 验证安装是否成功

node -v 验证是否安装成功

Nodejs 会集成安装npm 测试npm是否安装成功

npm -v 验证是否安装成功

安装ts

CMD 命令窗口输入命令行：npm install -g typescript

tsc -v 验证是否安装成功

安装cli

CMD 命令窗口输入命令行：npm install -g @angular/cli

ng -v 验证是否安装成功

2. 命令创建项目

这里是windows环境，打开cmd,cd 到需要创建工程的目录，ng new 项目名称这里下载资源的时候可能比较慢，因为网站在国外，有两种方法，一种是科学上网，一种是cnpm install 这里就不详述了

这里是根据Angular5高级编程这本书进行学习的，这本说CSS 是基于BootStrap CSS 做的，所以需要在package.json文件中添加BootStrap CSS 的包 : "bootstrap": "4.0.0-alpha.4"

"dependencies": {
    "@angular/animations": "~7.2.0",
    "@angular/common": "~7.2.0",
    "@angular/compiler": "~7.2.0",
    "@angular/core": "~7.2.0",
    "@angular/forms": "~7.2.0",
    "@angular/platform-browser": "~7.2.0",
    "@angular/platform-browser-dynamic": "~7.2.0",
    "@angular/router": "~7.2.0",
    "core-js": "^2.5.4",
    "rxjs": "~6.3.3",
    "tslib": "^1.9.0",
    "zone.js": "~0.8.26",
    "bootstrap": "4.0.0-alpha.4"
  }

3. 安装NPM

cmd cd 到建立的项目的目录下面，执行nmp install下载bootstrap的包，会有一些警告，不过不会有报错什么的

4. 导入webstrom ，运行

webStrom open 刚刚建立的项目，等待扫描完成，目录结构如下

启动项目测试看一下，启动命令可以在package.json 文件中看到

"scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  }

可以控制台运行，也可以配置，这里做下配置。

配置方式：

选择package.json, 右键选择“Show npm Scripts”

用“Edit Configurations”，添加“npm”

配置好后，start 跑一下，控制台输出Compiled successfully. 启动成功，根据启动控制台输出的http://localhost:4200/ ** 访问测试下