• 1. 前言
• 2. 前置条件
• 3. 创建后端项目
• 4. 创建前端项目
• 5. 使用 gradle 将前后端整合
  • 5.1. 配置 angular 项目
  • 5.2. 配置 spring boot 项目
  • 5.3. 自动化工程
• 6. Angular 系列文章
• 7. 总结
• 8. 参考文档

1. 前言

本文讲述如何使用 Gradle 搭建一个以 springboot 技术栈作为后端, 使用 Angular 作为前端技术栈, 同过 gradle 将其整合成一个项目的实践经验.

这里只是作为一种实践, 并不建议在生产环境中将前后端耦合在一起. 本文的目的是拓展 Spring 在(SPA)Single page Application 一种能力, 即将实现项目依赖关系, 测试,打包等等自动化.

实现思路就是通过 Gradle task 触发 npm build, 将编译后的静态资源文件, 部署到 springboot 的静态资源文件目录, 然后沿用后端打包过程, 将前后端应用程序整合在一起.

前言

这里假设我们已经使用Angular开发了SPA应用, 我们希望在此基础上使用PWA做一些增强以获得更好的用户体验, 更好的性能.

1. 前言

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

前言

在本教程中，您将学习如何在 angular 12/11 应用程序中制作带有预览功能的图像上传示例。

此外，本教程将逐步指导您如何在角度 11/12 中上传图像。并且还将反应式表单与表单组一起使用，以上传带有预览的图像。

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 {}

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 版本.

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 版本如下

1. Angular 介绍

关于 Angular 版本，Angular 官方已经统一命名 Angular 1.x 同一为 Angular JS；Angular 2.x 及以上统称 Angular；

CLI 是 Command Line Interface 的简写，是一种命令行接口，实现自动化开发流程. 它可以创建项目、添加文件以及执行一大堆开发任务，比如测试、打包和发布。