Angular入门到精通系列教程（3） - Angular 技术栈（Tech Stack）

快来打我* 2023-01-04 13:21 140阅读 0赞

> (Based on Angular 10)

# 0. Angular-CLI #

[Angular CLI][] is a command-line interface tool that you use to initialize, develop, scaffold, and maintain Angular applications directly from a command shell.

It is the MUST have tool to write Angular code, so make sure you are familiar with its commands.

# 1. IDE #

## 1.1 Visual Studio Code ##

`Visual Studio Code`: Best and free IDE for web developing.  
Plugins:

*  `Angular Language Service` \- 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` \- A basic spell checker that works well with camelCase code.  
    The goal of this spell checker is to help catch common spelling errors while keeping the number of false positives low.
 *  `GitLens` \- 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.

## 1.2 Alternatives ##

*  Atom by GitHub
 *  Sublime Text 3
 *  PyCharm
 *  IntelliJ IDEA
 *  Webstorm

There are may alternatives, you can choose which you are familiar with.  
\*

# 2. UI Framework #

## 2.1 Angular Material ##

[Angular Material][] is Material Design components for Angular.  
There are many alternatives. But Angular Material is the official one from Angular, and Angular also give detail upgrade solution on Angular plus Angular Material in [https://update.angular.io/][https_update.angular.io].

For future upgrade reason, this is your best choice.

# 3. State Management - NgRx #

@ngrx/store is RxJS powered global state management for Angular applications, inspired by Redux. Store is a controlled state container designed to help write performant, consistent applications on top of Angular.

NgRx Store is mainly for managing global state across an entire application.

# 4. Code Reuse #

## 4.1 Angular libraries ##

[Angular libraries][] should what you need.

Many applications need to solve the same general problems, such as presenting a unified user interface, presenting data, and allowing data entry. Developers can create general solutions for particular domains that can be adapted for re-use in different apps. Such a solution can be built as Angular libraries and these libraries can be published and shared as npm packages.

An Angular library is an Angular project that differs from an app in that it cannot run on its own. A library must be imported and used in an app.

You can easily reuse your Angular library or also submit your library into npm server.

## 4.2 Alternatives - Angular custom elements ##

Note that libraries are intended to be used by Angular apps. To add Angular functionality to non-Angular web apps, you can use [Angular custom elements][].

Angular elements are Angular components packaged as custom elements (also called Web Components), a web standard for defining new HTML elements in a framework-agnostic way.

[Angular CLI]: https://cli.angular.io/
[Angular Material]: https://material.angular.io/
[https_update.angular.io]: https://update.angular.io/
[Angular libraries]: https://angular.io/guide/libraries
[Angular custom elements]: https://angular.io/guide/elements