Angular 标签

关于@delon包 有更新!

  |   0 评论   |   0 浏览

ng-alain 是来自中国作者 卡色 开源出的一个企业级中后台前端/设计解决方案脚手架,秉承 Ant Design 的设计价值观,让 Angular 快速落地于企业生产实践中的一个高集成性框架。

其中提供了非常丰富的功能诸如

  • Dynamic Form
  • Antv/Echarts
  • Acl
  • Auth
  • Theme
  • Cache
  • Mock
  • Util (DeepCopy/TreeToArray 等等)

假如你对 Angular 有一些使用基础,那么使用起来会相当的得心应手。

假如你对 Angular 只有一些略微了解,那么也可以通过 ng-alain 提供的 CLI 快速的建立起一个可运行 Project 用来快速上手。

  • 生成一个 ng-alain 项目首先需要安装 AngularCli
  • npm install @angular/cli@12.2.0
  • 其次使用 ng new my-project --style less --routing 创建名为 my-project 的纯 Angular 项目
  • 然后使用 ng-alainCLI 生成项目
  • ng add ng-alain
  • 最后使用 npm run start 启动项目
  • 或者直接前往预览地址

关于微前端实现原理与ngx-planet(四)服务端渲染

  |   0 评论   |   0 浏览

1.为什么要服务端渲染 因为公司后端服务在 k8s 上,是分布式的微服务,之前端全部打包部署在了物理机器(虚拟机)nginx 上,如果通过 helm 做应用商店的话,nginx 前端这部分无法处理,包括灰度部署,CI 等,全部都只能做到接口级别的处理,并不能连带静态资源文件一起处理,所以基于分布式的前端整改迫在眉睫。 偶然发现了 ngx-planet,整篇文章基于前几篇文章,可以看之前的几篇文章。 2.如何基于 ngx-palnet 进行服务端渲染 2.0 有路由前缀的情况下服务端渲染 ngx-planet 如何改进 在 start 函数中监听路由阶段,其中的 startWith 过滤路由要把 location.pathname 修改好,要将前缀去除掉,至于如何动态去除不写死,仁者见仁智者见智。 2.1 首先,准备打包好的静态文件 将 build 命令修改,注意 --deploy-url 的意思是,打包完成后,静态资源路径是什么 "build": "ng build --prod --deploy-url=/static/star-universe/ --base-href=/star-universe", 打....

AngularCli

  |   0 评论   |   0 浏览

简介 写一份自定义的 angular 脚手架吧 写之前我们先解析一下 antd 的脚手架 前提 先把 Angular Schematic 这篇文章读一遍,确保了解了 collection 等基础 antd 脚手架 克隆项目 Git clone https://github.com/NG-ZORRO/ng-zorro-antd.git 开始 打开项目 在 schematics 下的 collection.json 为入口,查看内容 一共定了了 4 个 schematic,每个 schema 分别指向了各文件夹的子 schema.json,factory 指向了函数入口,index.ts ng-add/schema.json { // 指定 schema.json 的验证模式 "$schema": "http://json-schema.org/schema", "id": "nz-ng-add", "title": "Ant Design of Angular(NG-ZORRO) ng-add schematic", "type": "object", // 包含的属性 "properties": { "project": ....

Angular6

  |   0 评论   |   0 浏览

入门 官方文档 高阶 修仙之路 构建第三方包 angular-cli 的 ng g lib 不太好用,所以还是用 ng-packgr 建立父项目 ng new project --style less --prefix pre 调整项目结构 cd project # 建立第三方包文件夹 mkdir -p projects/mylib # 在父项目中生成模块 ng g module mylib # 将 mylib.module.ts 移动到 project/mylib 下 mv mylib.module.ts ./projects/mylib # 在project/mylib 下生成 component/service # 注意,component 要 export 出来 cd project/mylib ng g c mycomponent ng g s myservice # 至此基本项目结构完成 模块依赖 当你编写第三方依赖包的时候,你的 service/component 或许需要一些数据来驱动,往往这些数据/对象是使用者提供的 # 建立 model 文件夹 mkdir -p project/my....