Angular在Nebular项目中编写自己模块

Nebular一个基于Angular的全功能框架 如果您创建基于Angular的Rich UI应用程序,并且不希望将时间花费在痛苦的项目设置上,Nebular是一个很棒的工具包。 它为您提供统一的方法来管理各种组件样式 立即下载

https://akveo.github.io/nebular/#/docs/installation/based-on-starter-kit-ngxadmin

一、在指定文件夹下生成带路由的模块

ng g m --routing pages/attend


常用新建指令:

ng g cl my-new-class: 新建 class

ng g c my-new-component: 新建组件

ng g d my-new-directive: 新建指令

ng g e my-new-enum: 新建枚举

ng g m my-new-module: 新建模块

ng g p my-new-pipe: 新建管道

ng g s my-new-service: 新建服务

二、创建模块部分组件,组建中只放一个路由插座,配置路由

ng g c -it -is pages/attend


可选项:

  • --flat: boolean, 默认为 false, 表示在 src/app 目录下生成组件而不是在 src/app/site-header 目录中

  • --inline-template: boolean, 默认为 false, 表示使用内联模板而不是使用独立的模板文件

  • --inline-style: boolean, 默认为 false, 表示使用内联样式而不是使用独立的样式文件

  • --prefix: boolean, 默认为 true, 使用 .angular-cli.json 配置的前缀作为组件选择器的前缀

  • --spec: boolean, 默认为 true, 表示生成包含单元测试的 spec 文件

  • --view-encapsulation: string, 用于设置组件的视图封装策略

  • --change-detection: string, 用于设置组件的变化检测策略

三、将我们编写的模块加入左侧菜单栏










Nebular 一个基于Angular的全功能框架-javascript 如果您创建基于Angular的Rich UI应用程序,并且不希望将时间花费在痛苦的项目设置上,Nebular是一个很棒的工具包。 它为您提供统一的方法来管理各种组件样式 Nebular 是您下一个 Angular 应用程序的一组基本模块。 如果您基于 Angular 构建富 UI Web 应用程序,并希望使用开箱即用的基本功能来引导您的开发,那么 Nebular 是一个很好的工具包。 它为您提供了一个原生 Angular 组件列表、用于管理各种组件(包括第 3 方)样式的统一方法以及可轻松为您的 API 配置的身份验证和安全层。 同时,Nebular 允许您将其与您选择的任何其他 UI 库一起使用。 入门文档 | ngx-admin 演示 :artist_palette: Theme @nebular/theme 主 Nebular 模块,包括 UI 套件和主题系统。 Native Angular Components 组件 描述 布局 页面布局组件,具有可配置的列、页眉和页脚。 具有多种状态的侧边栏布局侧边栏。 Menu 多深度菜单组件。 Card 具有任意页眉和页 立即下载

相关推荐

nebularAuth

NebularAuth 该项目是使用版本11.2.4生成的。 开发服务器 为开发服务器运行ng serve 。导航到http://localhost:4200/ 。如果您更改任何源文件,该应用程序将自动重新加载。 代码脚手架 运行ng generate component component-name生成一个新的组件。您还可以使用ng generate directive|pipe|service|class|guard|interface|enum|module 。 建造 运行ng build来构建项目。构建工件将存储在dist/目录中。使用--prod标志进行生产构建。 运行单元测试 运行ng test以通过执行单元测试。 运行端到端测试 运行ng e2e通过执行端到端测试。 进一步的帮助 要获得有关Angular CLI的更多帮助,请使用ng help或查看页面。

angular 模块推荐 “nebular”

最近写博客玩,用的nebular,感觉里面的auth模块和acl模块挺好用,nebular 使用场景 主要用于身份认证,权限控制 前端登录后端,后端返回token,前端通过该token明确用户是什么身份,具有哪些权限,使用户身份与操作ui相得益彰。 知识前置,token,jwt(json web token) 虽说直接用别人的模块...

weixin_33929309的博客 756

Dia 使用说明

简述 在linux上面能找到dia这个工具还是挺幸运的,因为之前画流程图总是使用ubuntu默认的word工具 在里面画图,感觉流程图使用起来麻烦,并且视觉效果真的不好看。 自从使用Dia后,感觉至少画起来流程图会变得越来越标准了。但是Dia也存在问题,就是使用的文档很少,使用中遇到为后,查起来比较费劲,但是至少问题不是很多,所以使用中遇到的几点问题我就记下来,和大家分享,加快大家的开发和文档整理能力。 我会按照遇到的问题来说,不存在使用的先后顺序。 1. Dia 去掉背景中的线条 首先去点那个大一点的蓝色

linan101的博客 4926

探索Nebular:一个强大的Angular UI框架和设计系统

是一个由Akveo团队构建并维护的开源项目,为Angular应用提供了一套完整的UI组件、主题生成器以及身份认证解决方案。它的目标是帮助开发者快速构建美观且响应式的企业级Web应用,同时保持代码的可维护性和一致性。 ## 技术剖析 1. **基于Angular** - Nebular完全构建在Angular之上,这意味着你可以无缝集成Angular的功能,如依赖注入、指令和服务。它与最新版本的...

gitblog_00021的博客 700

数据湖是什么?有什么优势?与数仓区别?未来的发展?

数据湖是什么?有什么优势?与数仓区别?未来的发展?一、什么是数据湖二、数据湖的发展三、数据湖有哪些优势四、数据湖应该具备哪些能力五、数据湖的实现遇到了哪些问题六、数据湖与数据仓库的区别七、为什么要做数据湖?区别在于?八、数据湖挑战九、湖仓一体十、目前有哪些开源数据湖组件 来源:大数据DT 一、什么是数据湖 数据湖是一种不断演进中、可扩展的大数据存储、处理、分析的基础设施;以数据为导向,实现任意来源、任意速度、任意规模、任意类型数据的全量获取、全量存储、多模式处理与全生命周期管理;并通过与各类外部异构数据

一个写湿的程序猿 9148

南 京 农 业 大 学 试 题 纸 附表(rape.csv)是25个油菜材料,测得每个材料的千粒重、亚油酸等的含量. (1) 对物质含量的八个指标作主成分分析,画出碎石图和主成分得分图; (2) 选

(1)请用n1

Mrrunsen的博客 497

Nebular:基于Eva Design System的现代化Angular UI库全面解析

Nebular:基于Eva Design System的现代化Angular UI库全面解析 【免费下载链接】nebular :boom: Customizable Angular UI Library based on Eva Design System :new_moon_with_face::sparkles:Da...

gitblog_00955的博客 1271

季节性注意力的时间序列预测模型 SAITS 进行数据补齐 完整代码数据

季节性注意力的时间序列预测模型 SAITS 进行数据补齐 完整代码数据

1071

Nebular框架全面解析:基于Angular的企业级UI组件库

Nebular是一个基于Eva设计系统规范构建的可定制化Angular UI组件库。它不仅仅是一个普通的UI工具集,而是一个完整的前端解决方案,专为构建现代化企业级Web应用而设计。该框架提供了40多个高质量的UI组件、4种视觉主题,以及强大的身份验证和安全模块。 ## 核心特性解析 ### 模块化架构设计 Nebular采用模块化设计理念,各个功能模块通过独立的npm包分发: 1. **...

gitblog_00611的博客 625

【YOLOv12多模态融合改进】(可见光+红外)涉及像素级融合、特征级融合(中期、中后期、后期)、决策级融合的完整配置步骤以及二次改进方案

在网络输入阶段将多模态数据直接合并,形成统一的特征表示。

Limiiiing的博客 1211

Android车载音频系统概览

官网有些部分的内容描述比较简单,对没有app、系统和底层开发经验,容易一眼扫过,没有留意到相关细节。 本节补充车载音频相关细节。

hwj的博客 785

[Angular]——快速创建框架模板

Angular搭建模板框架 前言:网络不好,可以使用国内淘宝镜像。本模板的脚手架使用Ng Alain,本地环境需要安装 node 和 git。技术栈基于 Typescript、Angular、g2、@delon 和 ng-zorro-antd。 配置国内镜像: 打开终端,输入 npm config get registry 来查看当前地址 更改地址:npm config set registry https://registry.npm.taobao.org 安装(推荐CLI) 创建项目:ng

虽菜但瘾 730

芒果YOLOv12改进13:独家原创改进最新 CFNet 核心结构|即插即用 | 首发改进显著提升检测性能,小目标检测涨点必备

芒果YOLOv12改进13:独家原创改进最新 CFNet 核心结构|即插即用 | 首发改进显著提升检测性能,小目标检测涨点必备

包括YOLOv5、YOLOv7、YOLOv8等模型改进 285

angular学习笔记(二)-创建angular模块

如果在页面的html标签(或任意标签)中添加ng-app,表示对整个页面应用angular来管理. 他是一个模块. 模块有助于把东西从全局命名空间中隔离. 今天学习如何自定义创建模块: <!DOCTYPE html> <html> <head> <title>2.1模块</title> <meta char...

weixin_33690963的博客 90

【Jenkins】Jenkins :首次登录直接使用 admin 账户

目录 一、使用admin账户 二、修改admin用户密码 三、管理视图 一、使用admin账户 安装时,自定义安装,选择必要的插件安装,设置Jenkins的URL为: http://本机或服务器IP:8080 然后在创建第一个管理者界面,直接选择:使用admin 二、修改admin用户密码 进入:系统管理——管理用户——选中用户——点击设置图标——修改密码: 三、...

顾三殇 —— 博客空间(软件测试) 1万+

蓝牙模块HM-10手册

蓝牙模块HM-10手册,该手册对蓝牙模块HM-10进行了详细的介绍和使用方法以及一些AT指令。

Nebular 安装指南:使用 Angular CLI 与手动两种方式完成主题库接入配置

Nebular 是一套基于 Eva Design System 的可定制 Angular UI 组件库,本指南讲解在其当前仓库(`@nebular/theme` 17.x)中完成安装的两种主流方式:通过 Angular Schematics 的 `ng add` 一键接入,以及在已有 Angular 工程中手动安装依赖、配置模块与样式。读完本文后,你将掌握 Nebular 主题模块、图标包、认证与

gitblog_00623的博客 384

TMS_WebGMaps_1.9.8.0_Full_Source

TMS_WebGMaps_1.9.8.0_Full_Source 全源码 delphi cbuilder

Nebular 入门路线图:从安装到第一个页面,快速上手 Angular UI 库

Nebular 是一套基于 [Eva Design System](https://link.gitcode.com/i/1810f711153ec1134973262a56c01e1b) 规范构建的可定制 Angular UI 库,包含 4 套视觉主题、40+ 个 UI 组件,以及 Auth 与 Security 模块。本文是官方 [Where to start?](https://link.g

gitblog_00325的博客 145

计算机控制技术及应用

《计算机控制技术及应用》通过总结作者的科研成果和吸收国内外的先进理论、方法和技术,以计算机控制系统的网络化、开放化、智能化和集成化发展趋势为主线索,主要介绍计算机控制系统的基本概念和计算机控制系统的典型形式,计算机控制系统的数学描述与基本分析方法,以及数字PID控制器、最少拍控制系统、达林算法、状态变量设计法等设计方法及其各种改进算法。重点突出计算机控制系统输入输出通道接口的设计方法和典型控制系统的设计案例与实现方法等。

C# WinForm 基于DirectShow.dll编写的程序,可边预览边保存视频,音频和图片

基于微软的DirectShow.dll的二次开发1.自动识别连接的摄像头跟麦克风且可以对其进行选择(默认选中第一个)2.可录制wmv和avi两种格式的视频并且都带有音频,avi可以录制的分辨率和帧数进行选择,wmv默认进行了淸晰度优化如不喜欢可去除代码中有相关提示3.可在预览点开之后进行拍照,也可边录制视频边拍照4.添加了视频和音频的压缩功能(酌情使用)这次二次开发发现C#对DirectShow的相关信息太少,这次做完也不敢藏私共享出来,还望大家指正

Nebular框架安装指南:从零开始构建Angular企业级应用

Nebular是一套基于Angular的企业级UI组件库,由Akveo团队开发维护。它提供了丰富的UI组件、主题系统、安全模块和身份验证解决方案,特别适合开发中后台管理系统。本文将详细介绍如何在Angular项目中安装和配置Nebular框架。 ## 环境准备 在开始安装Nebular之前,我们需要确保开发环境满足以下要求: 1. Node.js环境(建议使用LTS版本) 2. npm或ya...

gitblog_01183的博客 458

Nebular 项目教程

Nebular 是一个可定制的 Angular UI 库,其目录结构如下: ``` nebular/ ├── docs/ ├── src/ │ ├── framework/ │ │ ├── auth/ │ │ ├── theme/ │ │ ├── ui/ │ │ └── ... │ ├── playground/ │ └── ... ├── packa...

gitblog_00240的博客 340

Angular Dashboard 开源项目教程

Angular Dashboard 开源项目教程 项目介绍 Angular Dashboard 是一个基于Angular 9+ 和 Nebular框架构建的流行管理后台模板。它旨在提供一个现代、响应式且高度可定制的用户界面,适用于各种Web应用程序的后端管理界面。项目集成了最新的前端技术栈,确保了开发效率和性能表现,使得开发者能够快速搭建专业级别的仪表板。 项目快速启动 要开始使用Angular...

gitblog_00792的博客 1172

Nebular认证模块实战:多策略认证与安全集成指南

Nebular认证模块实战:多策略认证与安全集成指南 【免费下载链接】nebular :boom: Customizable Angular UI Library based on Eva Design System :new_moon_with_face::sparkles:Dark Mode ...

gitblog_00122的博客 393

Nebular组件库性能优化指南:从加载速度到渲染效率

你是否遇到过Angular应用在使用Nebular组件库时加载缓慢、滚动卡顿的问题?本文将从加载速度优化、渲染性能提升、主题切换优化三个维度,提供可落地的解决方案,帮助你将应用性能提升40%以上。读完本文你将掌握按需加载、变更检测策略优化、虚拟滚动等核心优化技巧,并了解性能监控与最佳实践。 ## 加载速度优化 ### 模块按需加载 Nebular采用模块化设计,支持按功能模块拆分加载。通过A...

gitblog_00264的博客 714

Angular Nebular UI库 form表单验证

NebularUI库:这是一个俄罗斯的UI库,不知道为什么,并没有封装表单验证功能,可能是因为angular 有自己的一套表单验证方式吧~ https://akveo.github.io/nebular/docs/components/components-overview 感觉 歪果仁的审美 跟 中国UI库 还是有点差别的,功能也没有antd element 等组件库 那么万能. Angular...

lllsj的博客 757

Nebular国际化方案:多语言支持实现与优化

随着全球化应用需求的增长,为Angular应用提供完善的国际化(Internationalization,简称i18n)支持成为开发者必备技能。Nebular作为基于Eva Design System的可定制Angular UI库,提供了从布局方向到日期格式化的全方位国际化解决方案。本文将系统介绍Nebular的多语言实现机制,包括RTL布局支持、日期本地化处理及动态语言切换的最佳实践。 ## ...

gitblog_00636的博客 602

Nebular 多角色授权:为单个用户配置多个角色并实现 ACL 权限判定

Nebular Security 是 Nebular(基于 Eva Design System 的 Angular UI 库)中负责**授权(Authorization)**的模块,与负责登录认证的 `NbAuthModule` 互补。本文聚焦 `@nebular/security` 中"一个用户拥有多个角色"的场景:通过自定义 `NbRoleProvider` 让 `getRole()` 返回角

gitblog_01163的博客 740

Nebular项目后端集成指南:安全高效的API对接方案

在现代Web应用开发中,前端框架与后端服务的无缝集成是项目成功的关键因素之一。本文将深入探讨Nebular项目与后端API集成的专业方案,帮助开发者构建安全、高效的完整应用系统。 ## 为什么需要后端集成 Nebular作为基于Angular的企业级UI框架,通常需要与后端服务进行数据交互。合理的集成方案不仅能确保数据安全,还能优化应用性能,提供更好的用户体验。 ## 常见集成方案对比 #...

gitblog_00921的博客 466
上一篇: Angular安装
下一篇: npm安装报错解决方案
心灵泽尘
博客等级 码龄10年 32粉丝 83原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值