原文: https://howtodoinjava.com/angular/dev-workspace-setup/

学习在本地工作站中为 Angular,Node 和 TypeScript 设置开发环境,以开发下一代 UI 应用。

  1. Table of Contents
  2. Install Node
  3. Install Git
  4. Install Packages
  5. Create Angular HelloWorld
  6. Demo

安装 Node

  1. 转到 Node 下载页面,然后根据您的机器配置下载安装程序。

  2. 执行安装程序。 如果要在任何备用位置上安装 Node,请选择路径。 我建议使用默认选项。

  3. 验证是否已使用此命令安装了 Node。 ```java $ node —version

v8.11.3 //output

  1. <a name="d9787e5d"></a>
  2. ## 安装 Git
  3. 1.
  4. 转到 [Git 下载页面](https://git-scm.com/),然后根据您的机器配置下载安装程序。
  5. 2.
  6. 执行安装程序。 如果要在任何备用位置上安装 Git,请选择路径。 我建议使用默认选项。
  7. 3.
  8. 验证是否已使用此命令安装了 Git。
  9. ```java
  10. $ git --version
  11. git version 2.17.1.windows.2 //Output

另外,运行以下命令来设置您的 git 身份。

  1. $ git config --global user.email "you@example.com" //Use your git email id
  2. $ git config --global user.name "Your Name" //Use your git name

安装包

现在,在安装了 node 和 git 之后,该安装必要的npm包了。

  1. $ npm install -g rxjs
  2. $ npm install -g typescript
  3. $ npm install -g webpack
  4. $ npm install -g webpack-cli
  5. $ npm install -g @angular/core
  6. $ npm install -g @angular/cli
  7. $ npm install -g gulp

创建 Angular HelloWorld

在命令提示符下转到您的工作区,然后运行此命令。 此命令将在helloworld文件夹中创建一个新的 Angular 应用 – 其中包含所有必需的文件。

  1. $ ng new helloworld

Angular 开发工作区设置 - 图1

Angular CLI 生成文件

演示

要运行上面创建的应用,请从应用文件夹中运行命令ng serve

  1. $ cd helloworld
  2. $ ng serve
  3. ** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
  4. Date: 2018-06-18T17:10:50.638Z
  5. Hash: 832b348b3a35e13efaf8
  6. Time: 6365ms
  7. chunk {main} main.js, main.js.map (main) 10.7 kB [initial] [rendered]
  8. chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 227 kB [initial] [rendered]
  9. chunk {runtime} runtime.js, runtime.js.map (runtime) 5.22 kB [entry] [rendered]
  10. chunk {styles} styles.js, styles.js.map (styles) 15.6 kB [initial] [rendered]
  11. chunk {vendor} vendor.js, vendor.js.map (vendor) 3.06 MB [initial] [rendered]
  12. i wdm」: Compiled successfully.

打开浏览器,然后在http://localhost:4200/中验证正在运行的应用。

Angular 开发工作区设置 - 图2

浏览器中的 Angular HelloWorld

您的 Angular 开发环境已启动并正在运行。

将我的问题放在评论部分。

学习愉快!