1. 介绍

Material 是 Google 创建的一个设计系统，旨在帮助团队为 Android、iOS、Flutter 和 Web 构建高质量的数字体验。

2. 原则

2.1. 材料是隐喻

Material design 的灵感来自物理世界及其纹理，包括它们如何反射光线和投射阴影。Material surfaces 重新构想了纸张和墨水的介质。

• Bold, graphic, intentional
  材质设计由印刷设计方法（排版、网格、空间、比例、颜色和图像）指导，以创建让观看者沉浸在体验中的层次结构、意义和焦点。

• Motion provides meaning
  Motion 通过微妙的反馈和连贯的过渡来集中注意力并保持连续性。当元素出现在屏幕上时，它们会通过交互来转换和重新组织环境，从而生成新的转换。

1. 理解layout

material设计布局使用统一的元素和间距，以鼓励在多种平台、环境和屏幕尺寸之间的一致性。

1.1. 原则

• Predictable(可预测的) 使用直观且可预测的布局，并具有一致的UI区域和空间组织。

• Consistent(一致的) 布局应始终使用网格、关键线和填充。

• Responsive(响应的) 布局是自适应的。它们对用户、设备和屏幕元素的输入做出反应。

1. 光线和阴影

material surface阻挡光源时会投射阴影。

在material设计环境中，虚拟灯光照亮UI。关键灯光创建更清晰的方向性阴影，称为关键光阴影。环境光从各个角度出现，以创建漫射的柔和阴影，称为环境光阴影。

1. 像素密度(Pixel Density)

一英寸屏幕上存在的像素数称为像素密度。

屏幕像素密度和分辨率因平台而异。

1.1. 屏幕密度变化

高密度屏幕的每英寸像素数比低密度屏幕的多。因此，相同像素尺寸的UI元素在低密度屏幕上显示得更大，而在高密度屏幕上显示得更小。

1. 响应式布局网格

Material Design的响应式布局网格可根据屏幕大小和方向进行调整，确保布局的一致性。

1.1. Columns, gutters, and margins

响应式布局网格由三个元素组成：Columns, gutters, 和 margins。

1. spacing methods

spacing methods使用基线网格、关键线、填充和增量间距来调整比率、容器和触摸目标。

1. Material Surfaces

Material设计具有三个维度的特质，这些品质反映在其对表面(Surfaces)、深度和阴影的使用中。

1.1. Material environment

在真实世界中，物体可以堆叠或相互接触，但不能相互传递。它们投射阴影并反射光线。

Material设计在Material UI 中如何显示和移动曲面来反映这些品质。表面以及它们在三维空间中的移动方式以类似于它们在物理世界中移动的方式进行通信。此空间模型还可以跨应用程序一致地应用。

1. 前言

一个网站，通常都会包含公开页面和受保护页面两种，如果是 OA 或者企业应用网站，甚至可能全部都是保护页面，访问者需要在进行身份认证后，才能正常的浏览相关页面。

在本实验中, 我们会创建一个登录页面, 一个受保护的页面, 和一个面向公众公开的信息页面. 当用户访问受保护页面时, 需要先登录再访问, 而公众公开页面不需要登录即可访问.

1. 前言

我们在开发 web 应用时，在服务器端都会控制某种或某个用户是否有权限调用某个接口。在前端，我们除了根据用户的角色或其他特性来控制一些页面元素是否显示以外，也需要控制用户是否能够进入某些页面（例如通过直接输入 URL 的方式直接进入）。要控制是否显示，我们可以使用 *ngIf 、 [hidden] 等方式。而对于控制用户能否进入某个页面，Angular2 的路由框架也提供了非常方便的方式来实现这个功能。

Angular2 提供了 2 种组件， Guard 和 Resolve 。 Guard 顾名思义就是用来保护一个路径。可以用来判断用户只有在满足一定的条件的情况下才能打开这个路径对应的页面。 Resolve 用来在进入某个路径之前先获取数据。

1. 前言

我们今天要学习的是 Angular2 的模块系统,一般情况下我们使用一个根模块去启动我们的应用,然后使用许多的功能模块去丰富我们的应用,扩展我们应用的功能.这些全部依靠我们的 NgModule 装饰器,接下来我们就来好好学习一下这个装饰器. 当然在这个过程中你会遇到一些新的指令,概念等等;但是别慌,我们会在以后的文章中一个一个的详细讲解呢.

1. 前言

本文会聊聊 JIT 与 AOT 之间的区别，及前端框架中 AOT 的应用。Angular 同时提供这两种编译方案，下面我们用 Angular 举例说明两者的区别。

1. 前言

作为 angular 应用的入口模块，了解他的重要性是显而易见的！

2. angular 之 main.ts

main.ts 是这个样子的，下面我就去解开 platformBrowserDynamic 神秘面纱！

1
2
3

platformBrowserDynamic()
  .bootstrapModule(AppModule)
  .catch((err) => console.error(err));

1. Angular platform 是什么?

原文: Angular Platforms in depth. Part 1. What are Angular Platforms?

2. 前言

在这一系列文章中，我将向你们揭示 Angular 应用程序如何跨不同环境执行。此外，我们还将学习如何构建自定义 Angular Platforms 使用 ASCII 图形呈现系统终端内的应用程序。

Angular 框架被设计成平台独立的。即允许在不同的环境中执行 Angular 应用程序  —  浏览器、服务器、web-worker，甚至移动设备。

1. 前言

在 Angular 应用程序中，默认情况下构建了两个环境文件 dev 和 prod。基于目标环境，您的应用程序可能具有不同的设置。您可以根据需要配置多个自定义环境。在这里，您将看到如何配置多个环境，如 staging、beta、QA、prod 等

1. 说明

本项目使用的 angular, nodejs, npm, cnpm 版本如下