Angular入门到精通系列教程(4)- 开发环境搭建以及入手项目
了解了一些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,安装。
说明:
- LTS(Long Time Support)版本, 官方会支持更长时间,比如打补丁,改bug等。相对更稳定、靠谱。
- 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/)
npm安装最新版本@angular/cli
npm install -g @angular/cli
检查本地angular环境
ng v
说明:
- 该命令如果在非angular项目下执行,返回全局的Angular CLI环境版本
- 在angular项目下执行, 返回当前angular项目使用的angular,angular CLI,以及核心angular组件的版本。
- 全局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
说明
ng
是angular CLI的简称ng serve
: 启动angular项目。
Angular CLI常用命令
ng serve
: 启动angular项目。默认情况下,angular CLI检测代码改动,如果文件改动,自动编译更改部分代码,然后重新加载(reload)页面。ng build
: 编译代码,默认输出到根目录下的dist
目录。ng test
: 执行单元测试(Unit Test)
在线实战项目
Angular官方提供了2个新手入门项目,并且都是基于StackBlitz(针对 Web 开发者的在线 IDE),可以不使用本地环境,直接基于Web学习和练习Angular。
新手项目:Basic Angular app
入门项目:Tour of Heroes
标签:
Angular
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· PostgreSQL 和 SQL Server 在统计信息维护中的关键差异
· C++代码改造为UTF-8编码问题的总结
· DeepSeek 解答了困扰我五年的技术问题
· 为什么说在企业级应用开发中,后端往往是效率杀手?
· Deepseek官网太卡,教你白嫖阿里云的Deepseek-R1满血版
· 2分钟学会 DeepSeek API,竟然比官方更好用!
· .NET 使用 DeepSeek R1 开发智能 AI 客户端
· DeepSeek本地性能调优
· 一文掌握DeepSeek本地部署+Page Assist浏览器插件+C#接口调用+局域网访问!全攻略
2008-01-11 MS SQL SERVER中的临时表