摘要

当 Angular 实例化组件类并渲染组件视图及其子视图时，组件实例的生命周期就开始了。生命周期一直伴随着变更检测，Angular 会检查数据绑定属性何时发生变化，并按需更新视图和组件实例。当 Angular 销毁组件实例并从 DOM 中移除它渲染的模板时，生命周期就结束了。当 Angular 在执行过程中创建、更新和销毁实例时，指令就有了类似的生命周期。

你的应用可以使用生命周期钩子方法来触发组件或指令生命周期中的关键事件，以初始化新实例，需要时启动变更检测，在变更检测过程中响应更新，并在删除实例之前进行清理。

生命周期及顺序

概述

组件是 Angular 应用的主要构造块。每个组件包括如下部分：

• 一个 HTML 模板，用于声明页面要渲染的内容
• 一个用于定义行为的 Typescript 类
• 一个 CSS 选择器，用于定义组件在模板中的使用方式
• （可选）要应用在模板上的 CSS 样式

Component可以是一个页面，也可以是一个组件（控件）。总是，是一个页面元素。

任何一个Component都是NgModule的一部分，这样它就可以被其他应用和其他Component所调用。为了定义Component是NgModule的一个成员之一，开发者应该在NgModule的declarations属性中，将自己开发的Component列出。

本地开发环境搭建

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

node.js

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

第三方UI库的选择

Angular开发，除非你只有简单一两个页面，否则引入第三方UI库就是必不可少的。而具体用哪个库，就需要考虑多方面的东西了。比如：

1. 流行程度
2. 版本更新情况 （是否能跟进anuglar更新，bug是否及时修复）
3. UI风格，是否适用于项目
4. 入手难易程度
5. 文档完善程度

市面上有很多Angular可用的类库，可用根据项目、企业情况去选择。简单列一下可选的UI库。

1. Angular Material: angular 官方UI库。https://material.angular.io/

Angular （Angular2）v.s. AngularJS

Angular最早期的版本，也叫AnugularJS，使用javascript开发；新的版本，才叫Angular，也称为Angular2，使用typescript开发，Angular和AngularJS是不兼容的（当然，官方也有2个版本的集成方案）。

检查本地环境的版本

检查npm, node 版本:

Angular-CLI

Angular CLI: https://cli.angular.io/ 是一个命令行界面工具，可直接从命令行初始化，开发，构建脚手架以及维护 Angular 应用程序。

它是编写 Angular 代码必不可少的工具，请务必熟练使用它的命令。

IDE

Visual Studio Code

Visual Studio Code：这是 Web 开发领域中一款优秀且免费的 IDE（集成开发环境）。
推荐插件：

监控方案

监控方案我选择了 Zabbix，要实现对每个容器信息的监控，需要 zabbix-docker-monitoring 插件。

配置服务端

Zabbix 是 C/S 架构，服务端最好能配置在一台独立的宿主机上。

服务端 docker-compose 文件：

域名路由

nginx-proxy 是一个 Docker 容器， 是实现本文解决方案的神器，只需简单的配置，便可实现为多个容器路由的功能。

1. 在服务器上安装并运行

1

docker run -d -p 80:80 -v /var/run/docker.sock:/tmp/docker.sock:ro jwilder/nginx-proxy

一些概念

Docker Registry

Docker 远程镜像仓库

• DockerHub
• DaoCloud / Aliyun

Docker Images

Docker Images 是用来创建 docker 容器的只读模版，其中包含了容器启动所需要的所有配置信息和运行程序，一次构建之后可以多次复用。