Angular核心技术之组件 组件(component)Angular 组件是一个由模板组成的元素,通过组件来渲染我们的应用。 一个简单组件Angular提供了@Component装饰器来,我们需要使用该装饰器来定义一个组件。 @Component内置了一些参数: providers : 用来声明一些资源,这些资源可以在构造函数中通过DI注入。 selector : 在html中适应的查询选择器,Angular会使用定义 2019-08-02
如何实现Angular Material自定义主题 什么是主题主题就是一组要应用于 Angular Material 的颜色,也可以理解成应用的皮肤。在以前使用 QQ 空间的时候,腾讯就做好多些空间皮肤(主题)进行出售。现在 Android 手机系统也都有好多主题,让用户自己手机系统的主题。 在 Angular Material 中,主题由多个调色板组成。具体来说,包括: 主调色板:那些在所有屏幕和组件中广泛使用的颜色。 强调调色板:那些用于浮动 2019-08-02
Angular开发必不可少的代理配置 此处说的代理是 ng serve 提供的代理服务。 在开发环境中,Angular应用与后端服务联调测试时,Chrome浏览器会对发请求进行跨域检测。通过代理服务,来解决开发模式下的跨域问题。 接下来我们通过代理服务实现请求 http://localhost:4200/api 时代理到后端服务http://localhost:8080/api 基本代理首先我们需要在项目更目录下创建一个名为 p 2019-08-02
当ThreadLocal碰上线程池 ThreadLocal可以让线程拥有本地变量,在web环境中,为了方便代码解耦,我们通常用它来保存上下文信息,然后用一个util类提供访问入口,从controller层到service层可以很方便的获取上下文。下面我们通过代码来研究一下ThreadLocal。 新建一个ThreadContext类,用于保存线程上下文信息 public class ThreadContext { 2019-08-02
使用Prettier来规范你的Angular项目 在实际项目中,我们经常会遇到团队人员写的代码风格不统一,尤其是前端代码。比如在JavaScript中,字符串可以是使用单引号'This is string',也可以使用双引号"This is string"。对于JavaScript语言来说,这两种格式都是正确的,但是对于一个项目来讲,这就是没有规范的表现。 今天,我们就来分享一个叫prettier的前端工具,来 2019-06-27 工具 Angular
WebStorm VSCode集成cmder 概述cmder是一个增强型命令行工具,不仅可以使用windows下的所有命令,更爽的是可以使用linux的命令,shell命令。 安装 去cmder官网下载压缩包 解压下载的cmder (可选)将您自己的可执行文件放入bin文件夹中,以便注入到系统的Path中 运行cmder.exe VS Code配置Cmder使用ctrl+,快捷键打开设置页面,选择右上角的{}切换到settings.json 2019-06-26 工具
使用webpack-bundle-analyzer分析Angular应用 概述webpack-bundle-analyzer是一个前端分析工具,可以生成可视化大小的webpack输出文件与互动缩放树形图,为开发人员对Application进行优化提供更为直观的指导依据。 Angular集成webpack-bundle-analyzer安装webpack-bundle-analyzer是一个开发者工具,实际发布的Application并不依赖于它,因此,我们需要将webp 2019-06-26 前端 Angular
Angular打包优化之momentjs瘦身 项目中使用到了moment.js,编译后发现moment的locale文件全部被打包到发布文件中,且moment的大部分都是locale文件,实际上我们只需要zh-cn这个语言包。 使用webpack-bundle-analyzer分析见图: moment.js 并不是一个现代化的模块化的库, 无法对其进行Tree Shaking优化。 我们需要借助第三方的builder组件: @angular 2019-06-26 前端 Angular
如何用Angular Reactive Form的实现领域模型one-to-many 在应用系统中,必不可少的一样功能就是表单录入。在Angular中,提供了两种表单模式:响应式表单和模板驱动表单。 Angular表单模板驱动表单模板驱动表单是通过使用ngModel创建双向数据绑定,以读取和写入输入控件的值。如下: 首先ts文件里面创建模型: model = new Hero(18, 'Dr IQ', this.powers[0], 'Chuck Overstreet'); 然后 2019-06-14 前端 Angular
TypeScript编码指南 TypeScript编码指南 命名 使用 PascalCase 方式对类进行命名. 接口命名中不要使用前缀字母 I . 使用 PascalCase 方式对枚举值进行命名. 使用 camelCase 方式对函数进行命名. 使用 camelCase 方式对属性和本地变量进行命名. 私有属性命名不要使用前缀 _ . 尽可能在命名中使用整个单词 . 组件 每个逻辑组件一个文件 (例如: par 2019-06-05 前端 TypeScript