背景

之前项目使用过vue.js+iview,习惯了后端开发的我,总觉得使用不习惯,之前分析易企秀前端代码,接触到了angular js,完备的相关功能,类似后端开发的体验,让人耳目一新,全新的angular拥抱typescript,更是为后端开发量身打造,

学习angular,可以参考学习笔记:

大概了解了angular,和vue.js使用iview一样,需要找一个类似的UI框架,实现快速开发,于是ng-alain进入了视野。

ng-alain 介绍

官方介绍:

一个基于 Antd 中后台前端解决方案,提供更多通用性业务模块,让开发者更加专注于业务。

另外一个介绍:

ng-alain 是一个企业级中后台前端/设计解决方案脚手架,目标也非常简单,希望在Angular上面开发企业后台更简单、更快速。随着『设计者』的不断反馈,将持续迭代,逐步沉淀和总结出更多设计模式和相应的代码实现,阐述中后台产品模板/组件/业务场景的最佳实践,也十分期待你的参与和共建。

先来理下关系:

  • Antd是蚂蚁金服开源的一个服务于企业级产品的设计体系,基于『确定』和『自然』的设计价值观和模块化的解决方案,让设计者专注于更好的用户体验。

  • Antd官方提供了基于react的实现。

  • 然后开源项目NG-ZORRO(Ant Design of Angular)是Ant Design 的 Angular 实现。

  • ng-alain技术栈基于  TypescriptAngularg2@delon 和 ng-zorro-antd,并遵循Antd设计了新的组件,基于ng-alain可以快速的开发中后台。

安装

命令行安装;

ng new demo --style less
cd demo
ng add ng-alain
ng serve

直接 clone git 仓库

$ git clone --depth=1 https://github.com/cipchk/ng-alain.git my-project
$ cd my-project && npm install && npm start

启动后,启动完成后会打开浏览器访问 //localhost:4200,你看到下面的页面就代表成功了。

未完待续


作者:Jadepeng

出处:jqpeng的技术记事本--http://www.cnblogs.com/xiaoqi

您的支持是对博主最大的鼓励,感谢您的认真阅读。

本文版权归作者所有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

Angular 中后台前端解决方案 - Ng Alain 介绍的更多相关文章

  1. Svelte Ui Admin后台管理系统|svelte3+svelteUI中后台前端解决方案

    基于svelte3.x+svelteKit+svelte-ui网页后台管理系统SvelteAdmin. Svelte-Ui-Admin 基于svelte3.x+svelteKit+vite3+echa ...

  2. 推荐一款基于Angular实现的企业级中后台前端/设计解决方案脚手架

    ng-alain 是一个企业级中后台前端/设计解决方案脚手架,我们秉承 Ant Design 的设计价值观,目标也非常简单,希望在Angular上面开发企业后台更简单.更快速.随着『设计者』的不断反馈 ...

  3. Angular实战之使用NG-ZORRO创建一个企业级中后台框架(进阶篇)

    前言: 上一篇文章我们讲了如何在创建的Angular项目中快速引入ng-zorro-antd企业中台组件库,并且快速构建后台管理页面框架模板.这一章主要介绍的是如何在创建好的后台管理页面框架的快速生成 ...

  4. Ng-Matero:基于 Angular Material 搭建的中后台管理框架

    前言 目前市面上关于 Angular Material 的后台框架比较少,大多都是收费主题,而且都不太好用. 很多人都说 Material 是一个面向 C 端的框架,其实在使用其它框架做管理系统的时候 ...

  5. formily-面向中后台场景的复杂解决方案

    正文 在解决企业级应用的前端问题中,表单是个无法绕过的大山,正好最近有时间,调研一下 Formily-来自阿里巴巴的面向中后台复杂场景的表单解决方案,也是一个表单框架,前身是 UForm.主要解决如何 ...

  6. Angular实战之使用NG-ZORRO创建一个企业级中后台框架

    前言: 在之前的一篇文章已经介绍过了,公司正在使用NG-ZORRO组件库开发后台应用,并且详细的介绍了Angular开发环境的搭建和项目的创建.这篇文章就是为了让大家熟悉了解我们该如何在Angular ...

  7. Formily教程 | formily是中后台复杂场景的表单解决方案

    前言 formily 不是一个简单的前端轮子.Formily 是一个由阿里巴巴集团多 BU 共建的面向中后台复杂场景的表单解决方案,它也是一个表单框架.它的前身是供应链平台在 2019 年初对外开源的 ...

  8. Angular中ngCookies模块介绍

    1.Cookie介绍 Cookie总是保存在客户端中,按在客户端中的存储位置,可分为内存Cookie和硬盘Cookie.内存Cookie由浏览器维护,保存在内存中,浏览器关闭后就消失了,其存在时间是短 ...

  9. 三种Web前端框架比较与介绍--Vue, react, angular

    一.Angular 1.MVVM(Model)(View)(View-model): 2.模块化(Module)控制器(Contoller)依赖注入: 3.双向数据绑定:界面的操作能实时反映到数据,数 ...

随机推荐

  1. 006、容器 What、Why、How(2018-12-21 周五)

    参考https://www.cnblogs.com/CloudMan6/p/6751516.html   What - 什么是容器?       容器是一种轻量级.可移植.自包含的软件打包技术,是应用 ...

  2. 自动提取文件系统---binwalk(一)

    Binwalk是路由器固件分析的必备工具,该工具最大的优点就是可以自动完成指定文件的扫描,智能发掘潜藏在文件中所有可疑的文件类型及文件系统. 1.Binwalk和libmagic Binwalk的扫描 ...

  3. OracleHelper与SqlServerHelper

    1.OracleHelper using System; using System.Data; using System.Configuration; using System.Linq; using ...

  4. Linux cache 缓存过大

    linux cache 缓存过大 : 除重启服务 之外:直接释放内存方式之一: 修改配置释放cached内存: echo > /proc/sys/vm/drop_caches

  5. POJ3304 Segments 【线段直线相交】

    题意: 给出n条线段两个端点的坐标,问所有线段投影到一条直线上,如果这些所有投影至少相交于一点就输出Yes!,否则输出No!. 思路: 计算几何.这道题要思考到两点: 1:把问题转化为是否存在一条直线 ...

  6. Git合并一次commit到指定分支

    1 在当前分支,查看要合并的分支版本号 git log 需要合并的commit版本号 16b7df3aa1e64e00554a8a3c871e59db8cd87b16 2 切换到 指定分支 git c ...

  7. mod_wsgi 的两种模式

    mod_wsgi 的两种模式 http://ssmax.net/archives/977.html http://www.cnblogs.com/yuxc/p/3555005.html mod_wsg ...

  8. Python 爬虫学习

    #coding:utf-8 #author:Blood_Zero ''' 1.获取网页信息 2.解决编码问题,通过charset库(默认不安装这个库文件) ''' import urllib impo ...

  9. linux查看操作系统的版本

    内核信息 uname -a localhost.localdomain:所在主机的主机名,与主机配置文件/etc/hosts内容一致 2.4.20-8#1:内核版本号 Thu Mar 13 17:18 ...

  10. cartographer 安装问题

    安装主要参考hitcm教程: http://www.cnblogs.com/hitcm/p/5939507.html 这里只说安装过程中遇到的问题, ceres-solver 与 eigen3 版本不 ...