安装nodejs

brew install node
node -v
npm -v

npm镜像加速

华为开源镜像站：华为开源镜像站_软件开发服务_华为云 (huaweicloud.com)

npm config set registry https://repo.huaweicloud.com/repository/npm/
npm cache clean -f

安装 Angular CLI

Angular CLI 来创建项目，生成应用和库代码，以及执行各种持续开发任务，比如测试、打包和部署。

npm install -g @angular/cli

使用Angular CLI创建并初始化应用

ng new domus-h5

使用Intellij打开应用

Intellij安装Angular插件

打开应用

启动应用

ng serve --open

安装基本依赖

安装ng-bootstrap依赖

Angular powered Bootstrap (ng-bootstrap.github.io)

ng add @ng-bootstrap/ng-bootstrap

安装ngx-echarts依赖

ngx-echarts – npm (npmjs.com)

npm install echarts -S
npm install ngx-echarts -S

Angular基本概念

模块：Angular应用是模块化的，模块是提供一组功能的集合。在开发中我们可以安装第三方依赖并引用已有的模块来提升开发效率，例如，上面安装的ng-bootstrap依赖和ngx-echarts依赖中就提供了多个模块。也可以将自己应用的代码组织为多个模块，方便管理和对外提供功能。

组件：组件是通过模板将视图、服务、事件、数据绑定等关联起来的集合。开发Angular时，大部分时间都在开发组件：

• 开发组件的视图，也就是页面的展示效果。
• 数据绑定，将用户输入与展示进行单向/双向绑定。
• 开发对事件处理，也就是处理各种事件。
• 开发服务，也就是对各种功能进行抽象，比如调用后端接口、数据计算与处理。

创建Angular组件

创建FamilyTree独立组件

ng generate component FamilyTree --standalone --skip-tests

将首页替换为独立组件

FamilyTree是独立组件，NgModule在使用独立组件时，只需要在NgModule中import即可。

本地构建和测试部署应用

第一个终端，在监控（watch）模式下执行 ng build 命令把该应用编译进 dist 文件夹：

ng build --watch

第二个终端，使用lite-server作为web服务器，调试编译后的文件的运行效果：

npm install --global lite-server
lite-server --baseDir="dist/domus-h5"

使用Nginx和Docker镜像部署应用到生产环境

使用docker多阶段部署，首先使用node docker镜像编译源文件，然后再将编译后的输出文件复制到nginx docker镜像中。

Dockerfille

FROM node:20.5-alpine AS builder1
WORKDIR /usr/src/app
COPY package.json package-lock.json ./
RUN npm install

FROM builder1 as builder2
COPY . .
RUN npm run build

FROM nginx:1.19.2-alpine
COPY nginx.conf /etc/nginx/nginx.conf
COPY --from=builder2 /usr/src/app/dist/domus-h5 /usr/share/app

构建镜像

docker build -t domus-h5:latest .

启动容器

docker run --rm --name domus-h5 -d -p 8082:80 domus-h5:latest