Angular2入门教程（1）

【如需转载，请注明出处：https://blog.youkuaiyun.com/xx920312/article/details/81781836】

安装软件

• node-v8.11.1-x64.msi 链接: https://pan.baidu.com/s/1yL7WU2qUmcsrlOyVfLOSCA 密码: czdt

• VSCodeSetup-x64-1.21.1.exe 链接: https://pan.baidu.com/s/18Ujtem9B-DKC1CRmp6CQMg 密码: x79v

安装步骤

• 安装nodejs到D:\Program Files\nodejs路径中。node-v8.11.1-x64.msi，双击按照提示步骤进行安装，一直下一步。系统环境变量会自动添加到Path中，如果没有则手工添加。

D:\Program Files\nodejs

• 在nodejs的路径中创建两个文件夹。node_global 和 node_cache。然后采用CMD命令行的方式设置npm的参数配置。

npm config set prefix "D:\Program Files\nodejs\node_global"
npm config set cache "D:\Program Files\nodejs\node_cache"

• 在系统环境变量添加系统变量NODE_PATH，此后所安装的模块都会安装到改路径下。

D:\Program Files\nodejs\node_global\node_modules

• 安装cnpm（npm需要访问外国的网站，会比较慢，cnpm会访问淘宝做的一个镜像）。由于node里面自带了npm，因此npm不需要安装。

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

• 将cnpm添加到环境变量Path中。然后采用cnpm -v 查看是否有效。

D:\Program Files\nodejs\node_global

• 安装Typescript。（推荐安装） ，然后采用tsc检查是否有效。

cnpm install -g typescript

• 安装angular-cli。Angular提供的一个命令行工具，它能让用户通过命令行创建和管理项目。然后通过ng -v检查是否有效。

cnpm install -g @angular/cli

• cnpm设置为默认包管理工具

ng set --global packageManager=cnpm

• 安装VS Code，按照提示步骤进行安装。

测试案例Demo

• VS Code工具的命令行创建项目工程。系统会自动创建一个新的工程，下载依赖包，会运行一段时间，直到看到 Project ‘demo-app’ successfully created.

ng new demo-app

• VS Code中打开相应的文件夹。

cd demo-app

• 使用ng serve 启动应用。停止则直接Ctrl + C（看到Build Successful即为成功。）打开页面如下图所示。如果需要启动不同的应用，需要设置不同的端口号。默认端口为4200。在不修改默认设置的前提下，命令如下：

ng serve --port 4200

VS Code的插件

• Debugger for Chrome
  在 Visual Studio Code 中打开扩展面板（快捷键 Ctrl+Shift+X），搜索安装 Debugger for chrome 插件）。
  

• Angular Language Service，
  定义跳转，补全，信息提示