H5W3
当前位置:H5W3 > JavaScript > 正文

【JS】Angular5 开发之路

第一章 配置 Angular5 的开发环境

1 安装 node.js

1.1 首先到node.js的官方网址下载node.js的安装包,网址为:https://nodejs.org/zh-cn/。下载最新的LTS版(长期支持版本)。

【JS】Angular5 开发之路

下载完成后如图所示:

1.2  安装:

1.2.1 双击msi安装包进行傻瓜式的安装,如下图:

【JS】Angular5 开发之路

1.2.2 然后Next,如下图,勾选同意:

【JS】Angular5 开发之路

1.2.3 点击next,修改自己的安装目录

【JS】Angular5 开发之路

1.2.4 然后一路点击Next,直到安装完成: 

【JS】Angular5 开发之路

查看nodejs是否安装成功: 按住win+R调出运行窗口,输入cmd,点击确定进入dos窗口。

【JS】Angular5 开发之路

输入node -v 和 npm -v 出现版本号,就说明已经安装成功了。

【JS】Angular5 开发之路

以上,nodejs安装完成,第一步,打完收工。(注意 仅仅是安装完成)


1.3 配置nodejs

1.3.1 安装nodejs安装目录下新建两个文件夹 分别为 node_global 和 node_cache。如下图所示

【JS】Angular5 开发之路

1.3.2 然后依次输入如下命令,npm 模块包全局安装位置和缓存位置以及资源库镜像(淘宝的镜像下载包比较快)

npm config set prefix D:\Development\nodejs\node_global

npm config set cache D:\Development\nodejs\node_cache

npm config set registry https://registry.npm.taobao.org

结果如下图所示:

【JS】Angular5 开发之路


1.4 安装Angular CLI

1.4.1 执行命令: npm install -g @angular/cli

【JS】Angular5 开发之路

* 如果在安装过程中出现 关于 node-sass下载失败而导致Angular CLI的安装失败,执行以下命令

npm config set SASS_BINARY_SITE=https://npm.taobao.org/mirrors/node-sass/

然后在执行 npm install -g @angular/cli即可安装完成。

安装完成后的样子:【JS】Angular5 开发之路

1.4.2 把 1.3.1步创建的文件夹 node_global 设置到全局环境变量中(全局环境变量path位置:高级系统设置->高级->环境变量->找到系统变量中的path),添加如下环境变量信息:

【JS】Angular5 开发之路

然后打开命令窗口 输入 ng -v ,检验angular cli 是否安装成功。

【JS】Angular5 开发之路

到现在为止 Angular 环境安装成功。可以进行开发了。

1.5 由于由于npm 下载资源包较慢,可以使用 yarn 来管理资源包。

    使用npm全局安装yarn : npm install -g yarn 

【JS】Angular5 开发之路

并且配置 yarn的下载镜像地址:

yarn config set registry http://registry.npm.taobao.org

yarn config set sass-binary-site http://npm.taobao.org/mirrors/node-sass

可以用yarn -v 来验证安装是否成功和查看yarn的版本。


1.6 创建第一个Angular 项目

1.6.1 通过ng 命令创建新项目: 执行命令为: ng new myAngular。其中“myAngular”为项目名。【JS】Angular5 开发之路

创建完成文件后,按 ctrl+C 结束执行,因为当前方式较慢,下面介绍更快的方式。


1.6.2 进入项目目录,执行 yarn install 命令安装angular项目做需要的资源包

【JS】Angular5 开发之路

如果安装失败,继续执行yarn install 直到安装成功,一般翻墙后,都能顺利安装成功。


1.7 启动angular

 在项目所在路径下 执行 yarn start ,即可启动项目。【JS】Angular5 开发之路

出现上图的信息就是启动成功了。输出的log中,可以看到默认的访问路径是http://localhost:4200/ 

在浏览器输入后就出现angular的首页了。

【JS】Angular5 开发之路

Angular环境全部完成,可以进行以后的Angular开发了

本文地址:H5W3 » 【JS】Angular5 开发之路

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址