在搭建Angular开发环境以前,我们需要把node.js环境安装好,node.js安装教程请参考node.js安装教程。 由于npm的默认源https://registry.npmjs.org/是海外服务器,在国内访问存在一定问题,所以我们需要切换为淘宝源(https://registry.npm.taobao.org/): 首先安装nrm工具,nrm是npm的源管理工具,可以快捷的查看并修改本机所使用的npm源地址。

npm i -g nrm

Mac用户别忘了加sudo前缀。安装完成后使用以下命令即可查看所有可用源及当前源路径。

nrm ls

image.png 如图所示,我的当前源是npm源,接下来使用如下将当前源切换为淘宝源

nrm use taobao

安装Angular-cli工具

为了解决开发环境配置复杂及提升开发速度,Angular团队提供了 @angular/cli这个工具,使用它,我们可以极快的创建并开发一个Angular项目。

npm i -g @angular/cli

Mac用户记得添加sudo前缀。安装完成后就可以全局使用ng这个命令。关于ng的常用命令请参考Angular 常用命令行

创建第一个Angular项目

命令行(终端)执行如下命令

ng new firstAngular

其中,firstAngular为项目名,可任意指定。 image.png 执行命令会弹出如上图中两个问题:

  • Would you like to add Angular routing?(是否添加Angular路由?) 选择是则angular会自动创建路由文件(app-routing.module.ts),否则不会创建。
  • Which stylesheet format would you like to use?(要使用哪种样式表格式?) 通过键盘↓键选择SCSS。关于SCSS的只是可参考SCSS教程@angular/cli 在自动生成好项目代码文件之后,会立即自动使用 npm 来安装所依赖的 Node 模块,而这个过程中可能会遇到如下问题
  • node-sass或gyp安装失败 在windows电脑执行npm i的命令时可能会遇到此问题,由于windows上需要安装位的构建工具:
npm i -g --production windows-build-tools

注意,此命令必须在以管理员身份执行,执行完成后即可正常安装node-sass和gyp等。

启动第一个项目

在项目创建完成后我们即可启动项目

ng serve

执行完成后打开浏览器访问http://localhost:4200/即可查看项目界面。 image.png

使用WebStorm打开项目

WebStorm 是jetbrains公司旗下一款JavaScript 开发工具。目前已经被广大中国JS开发者誉为“Web前端开发神器”、“最强大的HTML5编辑器”、“最智能的JavaScript IDE”等。与IntelliJ IDEA同源,继承了IntelliJ IDEA强大的JS部分的功能。

WebStorm安装及使用教程可参考https://www.cnblogs.com/my-program-life/p/11285270.html