Angular具有大部分开源项目不具备的完善的文档与指导体系,在开始上手Angular之前, 强烈建议阅读Angular快速上手文档,按照官方文档指导完成快速开始项目以及英雄指南项目。

1 Angular安装

和其他JavaScript项目一样,Angular开发环境需要安装Nodejs版本10以上,Angular采用TypeScript作为标准开发语言,因此还需要安装TypeScript等包。快速开始一个Angular项目可以通过安装Angular命令行通过脚手架指令快速搭建:

npm install -g @angular/cli #全局安装Angular命令行工具

ng new my-app #利用脚手架快速搭建一个名称为my-app的项目

cd my-app & npm i #进入项目根目录并通过npm安装需要的所有包文件

ng serve #编译并运行项目,在浏览器中输入 http://localhost:4200 可以看到通过开发服务器运行起来的网站

2 Angular组件库NG-ZORRO和ng-alain

如果仅仅使用Angular作为前端Web开发框架的话,还需要大量的工作才能实现生产环境的项目开发,因此,通常的项目开发中还会使用封装好的组件库作为开发基础,Angular中最常用的几个组件库分别有官方的MATERIAL,蚂蚁金服主导的NG-ZORRO(Ant design组件库的Angular版本)以及华为的DEVUI,当然,对于有经验的团队,也可以直接使用更具有通用性的Bootstrap等库作为基础来开发。

为了进一步抽象业务,在组件库基础上,还有类似ng-alain之类的优秀项目,提供针对中-后台或者特定领域的业务实现库,虽然每个新库都需要一定的学习成本,但了解之后确实可以在他人工作基础之上避免重复制造轮子来提高开发效率。

NG-ZORRO的安装

ng new PROJECT_NAME #通过标准的angular命令行命令开始新项目

PROJECT_NAME

ng add ng-zorro-antd # 通过ng add指令添加ng-zorro组件库以开始ng-zorro项目

#如果要进一步添加并开始一个ng-alain项目

#注意,以下指令暂时仍只支持angular 8,如果使用(目前)最新的angular 9可能需要下载ng-alain库以开始项目

ng add ng-alain #通过ng add指令添加ng-alain并开始ng-alain项目

3 VS Code中的Angular插件

在VS Code编辑器中可以通过安装 Angular Essentials (version 9) 插件来安装一整套的 VSCode angular插件。如果要使用Angular 8,那么则需要安装对应的 version 8版本。当然,如果不希望安装所有插件(建议都安装),也可以分别安装进行Angular项目开发可能需要的VS Code插件。包括了:Extension Stats

Angular Snippets

Angular Language Service

Angular Console

Chrome Debugger

Edge Debugge

Editor Config

ESlint

Material Icon Theme

npm

Peacock

Prettier

Winter is Coming

4 浏览器插件Augury

为了快速检查和分析基于Angular开发的网站(这在调试中是非常有用的),可以安装(仅支持Chrome和Firefox浏览器)Angury插件,安装完该插件后,在Chrome或者Firefox的开发者工具栏中,可以看到Augury选项,如果网站采用Angular开发,则在Augury标签下可以看到网站的模块与组织,对网络开发者非常实用。Augury项目网站

鉴于以上原因,Angular开发者应该安装Chrome或(和)Firefox浏览器进行项目开发与调试

Logo

开放原子开发者工作坊旨在鼓励更多人参与开源活动,与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动,如meetup、训练营等,主打技术交流,干货满满,真诚地邀请各位开发者共同参与!

更多推荐