Angular入门到精通系列教程(4)- 开发环境搭建以及入手项目

Spring Security OAuth2.0认证授权二:搭建资源服务

了解了一些Angular的基本概念后,如果想进一步学习Angular,接下来让我们来搭建本地开发环境,并从一个入门项目了解Angular的基本用法。

环境:

  • Angular CLI: 11.0.6
  • Angular: 11.0.7
  • Node: 12.18.3
  • npm : 6.14.6
  • IDE: VSCode

1. 本地开发环境搭建

本地开发环境搭建只需要node.js, 和Angular CLI。

1.1. node.js

官网(https://nodejs.org/)下载最新的LTS(Long Time Support)版本的node.js,安装。

说明:

  1. LTS(Long Time Support)版本, 官方会支持更长时间,比如打补丁,改bug等。相对更稳定、靠谱。
  2. node.js 安装后,同时会安装npm

检查本地node.js, npm环境

# node.js 版本
node -v
# npm 版本
npm -v

1.2. Angular CLI

angular-cli又称 Angular脚手架,是angular开发团队自行维护的一个开发工具,用于快速生成项目或者组件的框架以提高效率。可以方便的生成angular app、component、service 等等, 并且可以通过参数,按照自己的需求去创建。可以说是angular开发必不可少的利器。(参考:https://cli.angular.io/)

ABP vNext 审计日志获取真实客户端IP

npm安装最新版本@angular/cli

npm install -g @angular/cli

检查本地angular环境

ng v

说明:

  1. 该命令如果在非angular项目下执行,返回全局的Angular CLI环境版本
  2. 在angular项目下执行, 返回当前angular项目使用的angular,angular CLI,以及核心angular组件的版本。
  3. 全局Angular CLI版本有何能与项目的Angular CLI版本不一致,不冲突。项目中,使用项目制定的CLI版本。

2. 开发工具 – Visual Studio Code

推荐使用,Visual Studio Code (VSCode),微软开发的,可以说是现今为止最好的免费的Angular开发工具。并且有很多非常好用的插件。

推荐插件:

  • Angular Language Service: Angular语法自动提示, Angular开发必备。 This extension provides a rich editing experience for Angular templates, both inline and external templates.
    This extension is brought to you by members of the Angular team. It is fantastic at helping write solid code in the html templates.
  • Prettier – 代码自动格式化插件。VS Code plugin for prettier/prettier, which formats code consistently. Prettier is an opinionated code formatter. It enforces a consistent style by parsing your code and re-printing it with its own rules that take the maximum line length into account, wrapping code when necessary.
  • Code Spell Checker – 语法检查插件. 注释可以写中文,变量名不行吧,如果拼写不对不好看吧。所以推荐把这个语法检查插件装上。
  • GitLens – GIT 辅助插件。If you use git, this is quite helpful. GitLens supercharges the Git capabilities built into Visual Studio Code. It helps you to visualize code authorship at a glance via Git blame annotations and code lens, seamlessly navigate and explore Git repositories, gain valuable insights via powerful comparison commands, and so much more.
  • Markdown All in One: 如果用Markdown写东西,这个东西一定要有,增加了对MD文件的很多支持,比如生成目录(TOC), 目录编号等。

第一个Anuglar项目

创建第一个anuglar项目

使用Anuglar CLI可以很轻松的创建angular项目。使用的Angular版本与当前环境的Anuglar CLI一致。

# 创建angular项目,项目名 ·my-ngular-app·
ng new my-ngular-app
# 进入项目目录
cd my-ngular-app
# 启动angualar项目
ng serve

说明

  1. ng 是angular CLI的简称
  2. ng serve: 启动angular项目。

Angular CLI常用命令

  1. ng serve: 启动angular项目。默认情况下,angular CLI检测代码改动,如果文件改动,自动编译更改部分代码,然后重新加载(reload)页面。
  2. ng build: 编译代码,默认输出到根目录下的dist目录。
  3. ng test: 执行单元测试(Unit Test)

在线实战项目

Angular官方提供了2个新手入门项目,并且都是基于StackBlitz(针对 Web 开发者的在线 IDE),可以不使用本地环境,直接基于Web学习和练习Angular。

新手项目:Basic Angular app

入门项目:Tour of Heroes

文件上传的单元测试怎么写?

除非注明,否则均为醉墨淋漓 | 精品互联网资源原创文章,转载必须以链接形式标明本文链接

本文链接:https://momeis.net/post-2690.html

给TA买糖
共{{data.count}}人
人已赞赏
经验教程

springboot源码解析-管中窥豹系列之Runner(三)

2021-1-11 9:54:00

经验教程

Spring Security OAuth2.0认证授权二:搭建资源服务

2021-1-11 10:30:00

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
今日签到
有新私信 私信列表
搜索