构筑AngularJS2+Eclipse的开发环境

最新推荐文章于 2023-05-06 10:54:21 发布

superpeepi_csdn

最新推荐文章于 2023-05-06 10:54:21 发布

阅读量5.5k

点赞数

文章标签： eclipse node.js angularjs

本文链接：https://blog.csdn.net/superpeepi_csdn/article/details/71405265

版权

0. 要安装的软件：JDK8、Eclipse4.6、Node.js、Python2.7、Visual Studio 2017

1. 安装JDK8

系统环境变量如下设置：

JAVA_HOME=”C:\Program Files\Java\jdk1.8.0_131”。
path中由安装程序设置的”C:\...oracle…”换成” %JAVA_HOME%\bin”。
classpath=”.;%JAVA_HOME%\lib\dt.jar;%JAVA_HOME%\lib\tools.jar;”。

2. 安装Eclipse4.6

解压缩eclipse-jee-neon-3-win32-x86_64.zip。
在解压后的eclipse下新建文件夹”workspace”。例如：”C:\work\eclipse\workspace”。
启动eclipse时设置eclipse的Workspace为上记新建文件夹”workspace”。
单击菜单[Window]-[Preferences]，确认[Java]-[Installed JREs]的设置。

3. 构筑Angular2的eclipse开发环境

3.1 导入Angular2 eclipse IDE插件

在eclipse的MarketPlace下查找”Angular2”，安装”Angular2 Eclipse 1.2.0”。
安装成功后，单击[Window]-[Preferences]，可以看到[JavaScript]下追加了[TypeScript]。

单击菜单[File]-[New]-[Other…]，可以看到[wizard]中追加了[Angular2]。

3.2 安装Node.js(node-v6.10.3-x64.msi)

安装成功确认：

安装成功后，可以用cmd命令窗确认node.js和npm的版本。如下：

系统环境变量path中追加了”C:\Program Files\nodejs\”。如下：

用户环境变量中追加PATH=”C:\Users\tgui\Appdata\Roaming\npm”。如下：

再设置npm

新建文件夹”C:\work\eclipse\nodeJS\global”和”C:\work\eclipse\nodeJS\cache”。
在cmd命令窗中输入以下命令，设置npm的prefix和cache为新建文件夹。

npm config set prefix ”C:\work\eclipse\nodeJS\global”

npm config set cache ”C:\work\eclipse\nodeJS\cache”

用户环境变量PATH修改为”C:\work\eclipse\nodeJS\global”。
新建系统环境变量NODE_PATH=” C:\work\eclipse\nodeJS\global\node_modules”。

3.3 安装Python(python-2.7.13.amd64.msi)

系统环境变量path中追加”C:\Python27”和”C:\Python27\Scripts”.
在cmd命令窗中执行命令python，确认python安装成功。

3.4 安装Visual Studio 2017

Visual Studio 2017装完就可以了。

3.5 安装Angular2-CLI

在cmd命令窗依次执行以下命令，安装Angular2-CLI。

npm install -g is-fullwidth-code-point

npm install -g number-is-nan

npm install -g @angular/cli

执行以上命令没有出现”ERR”的提示，就是成功安装。

确认[C:\work\eclipse\nodeJS\global]下新建[node_modules]文件夹，

[node_modules]文件夹下有以上安装生成的文件夹。

3.6 修改Eclipse的Node.js设置

单击[Window]-[Preferences]，将[JavaScript]-[TypeScript]-[Node.js]的设置改为[Installed node.js]。

4. Angular2的第一次

新建一个[Angular2 Project]，将[src]下的index.html做如下修改。

<body>

<app-root>Hello World</app-root>

</body>

单击菜单[Run As]-[5 ng serve]。在eclipse的[Terminal]窗中，显示[ng serve]的执行信息。同时启动一个eclipse的浏览器，浏览器的URL是”http://localhost:4200/”。 [ng serve]执行结束后，刷新浏览器就可以显示[Hello World]。

***2017/5/11:通过学习,浏览器上应该显示的是由[app.component.ts]设置的[app works!]。

但是eclipse的浏览器和IE11显示为[Hello World]，firefox显示的是[app works!]。

哪里有问题呢？