从Angular 13升级到Angular 15

1. 前言

升级应用程序或者框架是软件生命周期中非常重要的一项活动. 因为其有风险性, 很多人不愿意去做, 久而久之随着技术债务的积累变成了一件不能去做的事情.

在我的职业生涯中见到过很大这样逐渐失去生命活力的系统, 这里就不具体举例了, 以免引起不必要的争论, 明白的人自然明白.

阅读更多

Centos7 上安装 wordpress

1. 前言

当前环境说明:

OS: Centos 7.9

2. 安装要求

安装 WordPress 之前,服务器要求具备两个基本元素:

阅读更多

帮助系统设计2

1. 网站帮助中心的作用

  • 通过向客户表明您了解他们所面临的问题以及如何提供帮助来建立信任;
  • 通过回答常见问题来改善客户服务,增强专业的品牌形象;
  • 通过减少重复发送给支持人员的电话和电子邮件,节省时间和金钱;
  • 增强您在搜索引擎中的知名度(包含更多关键词的帮助中心页面更易被搜索引擎喜欢);
  • 通过轻松找到他们要寻找的内容而不是搜索站点来改善用户体验。将答案直接链接到博客文章或内容页面可以使访问者更轻松地获取其他信息;
阅读更多

使用stomp实现服务器端向web客户端推送数据

1. 前言

在上篇文章java实现websocket的五种方式, 我详细讲述了使用java实现websocket的五种方式.
五种方式都集中在服务器端的实现, 客户端我们使用的是一个在线测试工具进行测试的. 只有针对stomp这种方式我自己写了一个javascript版本的客户端. 但是随着项目的推进, 发现整个体系就像魔方或拼图一样, 在完整体系中还缺少了一块, 那就是java客户端去连接stomp websocket服务. 其作用是,在服务器端主动向客户端发送消息时, 通过stomp客户端连接stomp websocket服务, 将消息发布到某个topic, 最终被订阅消息的前端页面接收到. 三者之间的关系 java client -> stomp websocket服务 -> 前端页面. 采用的是消息订阅模式, 消息订阅并不是pull, 实际是push.

阅读更多

java实现websocket的五种方式

1. 前言

WebSocket 是 HTML5 一种新的协议。它实现了浏览器与服务器全双工通信,能更好的节省服务器资源和带宽并达到实时通讯,它建立在 TCP 之上.

本文主要讲述在Java技术领域实现websocket服务的五种方式.

阅读更多

Angular sweetalert2

1. 前言

在本教程中,我们将学习如何在 angular 14 应用程序中使用 sweetalert2 来显示 sweetalert 弹出消息。

阅读更多

帮助系统案例与赏析

1. 前言

网站设计师应将每一位访问我们网站的用户视为潜在的新用户,为他们提供足够的指导和指南,以完成他们的任务并熟悉网站。几乎所有类型的网站都必须帮助用户,但方式不同。网站的类型将决定您应该提供的帮助系统的类型。
此外,帮助系统的有效性直接关系到网站设计的质量。一个设计不好的帮助系统——无论其内容多么好——都会带来劣质的用户体验。在本文中,我们将通过示例研究设计有效帮助页面的一些方法,这些方法可能会启发您的工作。

阅读更多

Angular Flex Layout使用详解

1. 前言

1.1. update on 5th/Apr/2023

根据 flex-layout 官方宣告, @angular/flex-layout 当前处于 deprecated 状态. 替代方案为 Tailwindcss 或者 Angular CDK.

具体原因参考官方的 anoucement - Medium post
和 github 上的讨论

建议新项目使用其他 css library, 旧项目考虑移植到其他 css library.

迁移工具:

migrate-angular-flex-to-tailwind

[flex-layout-migrator](https ://github.com/NIPE-Solutions/flex-layout-migrator)

1.2. update on 25th/June/2023

目前 DuncanFaulkner 克隆了@angular/flex-layout 并提供社区支持, 目前以及能支持 Angular 16 了.

所以使用社区版本的 flex-layout 也是一直选择, 如果重度依赖 flex-layout

新家现在位于

@ngbracket/ngx-layout

2. 安装

要在 Angular CLI 项目中使用@angular/flex-layout 相当简单,只需要两个步骤:

  1. 安装组件指令

    1
    npm install @angular/flex-layout --save
  2. 将 Angular Flex Layout 导入到 app.module 中

    1
    2
    3
    4
    5
    6
    7
    8
    9
    // src/app/app.module.ts

    import {NgModule} from '@angular/core';
    import {FlexLayoutModule} from '@angular/flex-layout';
    @NgModule({
    imports: [FlexLayoutModule],
    ...
    })
    export class AppModule {}
阅读更多

应用angular material design

1. 前言

  • 为什么选择 angular material design?

实际上如果想在自己的 web 项目中使用 material design 这套设计理念, 有多种选择, 一个是使用 bootstrap + mdbootstrap 这套架构和组件, 或者使用 bootstrap+materialize-css 这套解决方案. 其核心思想就是使用 bootstrap 去处理响应式 web ux 的问题以及跨浏览器, 跨各种大小屏幕兼容性问题, 而使用 mdbootstrap 或 materialize 去实现一套 material design 风格的组件库. 实际上这是一套很好的思路, 各方案专注自己的擅长的领域, 保持小而美的设计. 但是现实问题是 mdbootstrap 并不是免费的, 其 prime 版本是收费的, 而且对初创公司来说其收费还不便宜. materialize-css 是开源免费的, 但是截至 2022-05-29, 该项目已经 6 年没有更新了, 最近的一个版本是 6 年前发布的一个 1.0.0 版本.

阅读更多

Angular实现登录保护

1. 前言

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

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

阅读更多

Angular guard介绍

1. 前言

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

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

阅读更多

深度刨析NgModule

1. 前言

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

阅读更多

Angular中的JIT与AOT

1. 前言

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

阅读更多

深度刨析@angular/platform-browser-dynamic

1. 前言

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

2. angular 之 main.ts

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

1
2
3
platformBrowserDynamic()
.bootstrapModule(AppModule)
.catch((err) => console.error(err));
阅读更多