[Angular] 使用 ng-alain
[Angular] 使用 ng-alain
ng-alain,一个阿里的 angular 脚手架。基于 ng-zorro ,进行再次封装。
这里记录一些如何生成一个 ng-alain 项目,以及如何使用 ng-alain 和后端(springboot)交互。
使用命令行新建
新建空项目
ng new my-project --style less --routing
cd my-project
ng add ng-alain
这里需注意 Angular Cli 版本为 9.x
新建页面
这是ng-alain感觉很方便的一点,可以通过命令行创建模块和页面,页面ng-alain还内置了几种模板(查看、编辑等)。
模块
ng g ng-alain:module sys
CLI 会自动在 src/app/routes/sys
下创建 sys.module.ts
和 sys-routing.module.ts
文件。前者是系统设置模块组件定义文件,后者是系统设置模块路由配置文件。
为了使模块跟主模块产生联系,还会在src/app/routes/routes-routing.module.ts
文件内注册新建的业务模块。
页面
业务页
目前包含的业务组件页,包括:
empty
空白页list
列表页edit
编辑页view
查看页curd
列表、编辑、查看
例如:在 trade
模块下生成 list
列表页:
ng g ng-alain:list list -m=trade
注意: -m
是必须指定的,因为 ng-alain 认为页面应该在某个具体的模块里,而不是幽灵。
骚操作
一般而言,一个模块可能会包含相同类型的业务页,而我们产生的文件结构可能希望是:
syslogviewview.component.tslog.component.tssys.module.ts
因此,当希望生成的查看应该是在 log
组件(支持 log/list
多级写法)下面时,你可以这样子:
ng g ng-alain:view view -m=sys -t=log
edit & view 页
对于 edit
、view
默认是以模态框展示来生成,可以改用页面展示则:
ng g ng-alain:edit [page name] --modal=false
使用11.1.0
前端更新的太快了,不知不觉ng-alain就已经11了。我也很眼馋ng-alain新版本中的新特性,不过要升级感觉跨的版本有点多(之前是8,感觉会有很多坑),就重新搭建一个吧。
这里根据官网的教程来走的。
安装
先清除npm的缓存
npm cache clean --force
npm的速度,用过的都知道,设置淘宝源
# 设置淘宝源
npm config set registry https://registry.npm.taobao.org
npm config set sass_binary_site http://cdn.npm.taobao.org/dist/node-sass
# 恢复默认源
npm config delete registry
npm config delete sass_binary_site
安装 Angular Cli
npm install -g @angular/cli
创建 ng-alain 项目
ng new my-project --style less --routing
当提示 Packages installed successfully.
表示创建成功,接下来只需要将 NG-ALAIN 添加到 my-project
项目中即可,在 my-project
目录下 通过终端窗口中运行:
ng add ng-alain
运行
npm start
报错
我这里发生了很多诡异的问题,实在不想挨个去解决,所以直接用了github上面的demo。再把node_modules 拷贝到之前新建的项目里,跑起来了…
git clone --depth=1 https://github.com/ng-alain/ng-alain.git my-project
cd my-project
npm install
前后端对接
后端使用的是 springboot
跨域问题
大部分应用都会前后端分离进行开发,这导致当对后端发起一个请求时会受跨域(CORS)的因素,例如:
http.get(`http://192.168.1.100/api/app`).subscribe();
注:如果非
http
开头的请求,会在每个请求都会加上environment.SERVER_URL
作为请求 URL 的前缘。
直接返回以下错误:
Access to XMLHttpRequest at 'http://192.168.1.100/api/app' from origin 'http://localhost:4200' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
而正常解决跨域问题有两种方法,一是让后端开发环境直接支持跨域请求(不推荐,但最简单),二是利用 Angular Cli 提供代理支持,开发代理服务器会将 Angular 发送的请求的域和端口转发给后端服务器,CORS 是浏览器的安全限制,在代理服务器与后端服务器之前并不存在 CORS 的问题,这也就是为什么很多人会尝试明明在 Postman 能请求,而在 Angular 下无法请求的原因所在。
假定所有后端请求都是以 /api
为前缀时,就可以在 proxy.conf.json
配置所有这个前缀都转向新的后端,例如:
{"/api": {"target": "http://192.168.1.100/api","secure": false}
}
/api
代理路径,不支持域target
代理目标地址secure
代理目标地址如果是https
应该设置为true
,反之为false
pathRewrite
重写地址,例如pathRewrite: {'^/api': '/'}
将前缀/api
转为/
changeOrigin
将主机标头的host
更改为目标URL,有些后端会根据其值来判断是否有效,可能需要通过设置true
logLevel
设置为debug
可以终端显示代理转发的消息
更多使用说明请参考代理到后端服务器,以及配置描述请参考http-proxy-middleware options。
除了修改 proxy.conf.json 外,还需要修改 environment.ts 中的 SERVER_URL
proxy.conf.json
{"/api/*": {"target": "http://localhost:8080/","secure": false,"logLevel": "debug","pathRewrite": {"^/api" : ""}}
}
environment.ts
export const environment = {SERVER_URL: `/api`,production: false,useHash: true,
};
其他
我这里还写了一篇,关于具体控件使用的:https://blog.csdn.net/BlackParade/article/details/108983167
[Angular] 使用 ng-alain相关推荐
- Angular 中后台前端解决方案 - Ng Alain 介绍
Angular 中后台前端解决方案 - Ng Alain 介绍 参考文章: (1)Angular 中后台前端解决方案 - Ng Alain 介绍 (2)https://www.cnblogs.com/ ...
- angular项目 集成ng zorro 和ng alain
angular项目 集成 ng zorro和ng alain(mock 和acl权限)学习笔记 这段时间,比较忙,很久没有写博客了.作为后端开发人员,第一次接触angular,以下是个人的学习心得和D ...
- ng alain的简单使用
1.创建一个空 angular 项目 ng new demo --style less 2.添加 ng-alain 脚手架 ng add ng-alain 3.运行项目 ng serve -o ...
- angular蚂蚁_Angular 中后台前端解决方案 - Ng Alain 介绍
背景 之前项目使用过vue.js+iview,习惯了后端开发的我,总觉得使用不习惯,之前分析易企秀前端代码,接触到了angular js,完备的相关功能,类似后端开发的体验,让人耳目一新,全新的ang ...
- ng-alain php,Angular 中后台前端解决方案 - Ng Alain 介绍
背景 之前项目使用过vue.js+iview,习惯了后端开发的我,总觉得使用不习惯,之前分析易企秀前端代码,接触到了angular js,完备的相关功能,类似后端开发的体验,让人耳目一新,全新的ang ...
- Angular 项目 ng serve 背后发生的事情
敲了 ng 之后回车,显示这些命令列表: package.json 里并没有 serve script: 那么就到 angular.json 里去找: 我们只看 build 和 serve 这两个 a ...
- Angular应用ng build的一些边界情况boundary condition
ng build报错:no projects support the build target 究其原因,发现angular.json architect里的build被改成build2了: 直接用n ...
- Angular应用ng serve命令行的学习笔记
在Angular项目下执行命令行ng serve --open: The ng serve command builds the app, starts the development server, ...
- Angular CLI ng常用命令整理
Angular CLI 的ng命令常用整理 当前对应版本:angular-cli:1.0.0 node:8.9.3 os:win32 x64 1.创建项目 ng new 命令 描述 ng n ...
- Angular 常用ng指令详解
详解Angular ng内置指令 我们依次从使用频率高到低来,重要性大小来说明各种指令. 1.ng-repeat 1.1 一般用法 <ul><li ng-repeat="c ...
最新文章
- SQL中的关联更新和关联删除
- c语言程序设计分段定时器,单片机C语言程序设计:按键控制定时器选播多段音乐...
- 数据结构: 排序算法介绍
- Python的lambda匿名函数
- html年月日下拉联动菜单 年月日三下拉框联动
- linux 编译报错 not a directory,Linux常见英文报错中文翻译
- 真机测试报错ERROR/AndroidRuntime: java.lang.RuntimeException: setParameters failed解决办法
- C#异常--System.IO.FileLoadException:“混合模式程序集是针对“v2.0.50727”版的运行时生成的错误...
- Ubuntu 14.04 jdk安装与配置
- 【SQL】日期型函数
- 1031 查验身份证 (15 分)—PAT (Basic Level) Practice (中文)
- 反射获取Class对象的三种方式
- Java实现一个简单的计算器功能
- 求1e8以为素数的个数【埃氏筛,线性筛(欧拉筛),埃氏筛升级版】
- 基于C语言设计的唐诗三百首
- 关于12306网站抢票的架构设计
- 2022下半年软考考试时间安排已确定!
- 彩云之巅(一) 回忆的牵绊
- 【游戏运营】【实战】首充分析——王国纪元
- uniapp 自制头部左侧胶囊组件
热门文章
- php 动态网格,ZBrush中的动态网格该怎么进行运用
- python学习:函数(一)
- mysql数据库设计与应用答案智慧树_知到智慧树_MySQL数据库设计与应用_答案完整...
- top-1 and top-5 error rates
- Linux 根目录爆满 解决
- 什么是AI管道和MLOps?
- Arthas(阿尔萨斯)使用教程
- Think PHP crud,ThinkPHP教程_PHP框架之ThinkPHP(八)【CRUD與連貫操作】
- perl 串口 linux,Perl的串口操作Win32::SerialPort
- -XX:+UseCompressedOops 与 -XX:-UseCompressedOops