用angular编写管理中台，放置于现有的非angular项目中

最新推荐文章于 2020-12-20 00:33:33 发布
最新推荐文章于 2020-12-20 00:33:33 发布
阅读量319 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： 前端总结 文章标签： Angular6 Routing Component
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_30766277/article/details/81287136
本文介绍如何使用Angular CLI创建Angular项目，包括配置全局样式、构建通用组件及路由管理等步骤。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

创建angular项目

  1. npm i -g @angular/cli
  2. ng new projectname –style=scss
  3. 创建全局通用header和aside: ng g c components/header ng g c components/aside
  4. 在 app.component.html写入这里写图片描述
  5. 在src/app/目录下新建 app-routing.module.ts,作为项目组件可路由管理，以后新创建的页面全部走 app-routing.module.ts
  6. 例如： ng g pages/main –module=app-routing这里写图片描述
  7. app.module.ts 配置如下这里写图片描述这里写图片描述
  8. index.html里面的baseurl设置：
  9. package.json中的build设置这里写图片描述
  10. 预览效果这里写图片描述这里写图片描述
angular 分享_6个精选Angular开源UI组件库，值得收藏
weixin_32865081的博客
01-14 5667
2020年听过很多同行都说Vue、React、Angula前端三大框架，现在是Vue的天下了。我觉得如果这样理解就太片面了，毕竟每个框架都有自己的优缺点。今天就给大家分享几个在Angular开发中能快速提升开发效率的UI组件库。1、Angular/MaterialAngular官方出品的 Material Design 风格的UI组件库。https://material.angular.io/ht...
angular编程规范
最新发布
Orzak的博客
06-13 1333
直接导入并使用此模块会立即加载它，而原本的设计意图是按需加载它。使用生命周期钩子来介入到 Angular 暴露的重要事件里。这种目录让标识和隔离这些特性内容变得更轻松。
Ng-Matero：基于 Angular Material 搭建的中后台管理框架
weixin_30384217的博客
07-18 368
ng-matero 0.1 已发布，添加 schamatics，支持 ng add 前言 目前市面上关于 Angular Material 的后台框架比较少，大多都是收费主题，而且都不太好用。 很多人都说 Material 是一个面向 C 端的框架，其实在使用其它框架做管理系统的时候，我发现 Material 的组件基本已经够用了，其它不足的地方可以配合一些优秀的第三方库。另外，Materia...
推荐一款基于Angular实现的企业级中后台前端/设计解决方案脚手架
weixin_30929295的博客
10-01 114
ng-alain 是一个企业级中后台前端/设计解决方案脚手架，我们秉承 Ant Design 的设计价值观，目标也非常简单，希望在Angular上面开发企业后台更简单、更快速。随着『设计者』的不断反馈，将持续迭代，逐步沉淀和总结出更多设计模式和相应的代码实现，阐述中后台产品模板/组件/业务场景的最佳实践，也十分期待你的参与和共建。 如何阅读文档 在开始之前有一些文档描述约定说明，这有助于更好的阅读...
Angular 笔记（day3）
weixin_42127792的博客
11-24 226
Angular 笔记（day3） 1,服务创建及使用 1.1 ng g s services/api 1.2 挂载到 app.moudel import{ApiService}from'./services/api.service'; providers:[ApiService], //放入需要注册的服务 在组件中引入服务import{Ap...
angular 部署的项目自定义访问路径，不使用root根目录的配置
叮咚侠的博客
09-03 5506
配置方法如下（以项目名称为admin为例）： 需要注意的地方，html中引用的静态文件要从assets开始写，不可以使用相对路径，例如: <img src="../images/bg.png"/> 不可以，会出现路径引用错误，找不到此图片文件； <img src="assets/images/bg.png"/> 是可以的，正常显示。 1、修改index.html文件...
CURD-TS：一套基于TS的后台管理系统，前端语言Vue3.0，React，Angular，可以使用Languagenode + express，采用了三种数据库MySQL，MongoDB，SQLite编写
02-04
Vue3.0版本已开发完成！...①sql为数据库存放文件夹②doc为文档编写存放文件夹③backend为放置项目存放文件夹④frontend为前端项目存放文件夹 结构介绍 ①SQL存储数据库的文件夹②文档写入文档的存储文件夹③后端存储
Angular 11中MenuBar组件的使用与项目结构解析
4. 构建项目:ng build命令用于构建Angular项目，构建产物可放置于dist/目录中，生产环境构建需要使用--prod标志。 5. 单元测试:ng test命令用于执行Angular项目的单元测试，确保各个独立的代码单元按预期工作。 6....
使用Angular CLI构建和管理项目的步骤指南
然而，描述中的内容提供了一些关于Angular项目的开发过程的信息，所以我们可以围绕这些信息来构建知识点。 描述中提到了Angular CLI（Command Line Interface），这是一个强大的命令行工具，它为Angular开发提供了...
Angular项目管理UI开发指南与构建实践
在Angular项目中，可以通过运行`ng build`命令来构建项目，构建的结果称为构建工件，它将被放置在`dist/`目录下。使用`--prod`标志可以运行生产环境的构建，通常会涉及代码的压缩、优化等步骤。 5. 单元测试：单元...
10个开源且优秀的后台管理系统UI面板
Java知音
07-23 2520
作者：SevDotwww.jianshu.com/p/3bc7404af887昨天发了开发一个大型后台管理系统，真的需要用前后端分离的技术方案吗？，大家不同意见挺多，但是正如文末说的：结...
什么是中台(个人理解)
热门推荐
几钱清风
12-14 7万+
中台是一套结合互联网技术和行业特性，将企业核心能力以共享服务中心进行沉淀，形成“大中台、小前台”的组织和业务机制，供企业快速低成本的进行业务创新的企业架构； 最近看到了好多回复，感觉到了大家对中台的兴趣，这里再多说两句吧 1、中台提倡的是大中台小前台的模式，简单点说就是核心+共用的逻辑全部可以抽象在中台中实现，前台（例如售卖、展示等）由于渠道众多，因此这一块越小就越灵活，上线及变更时间就越短。...
Angular开发：AngularUI库Ant Desigin介绍和安装
Brave Soul Blog
02-02 1096
一、Angular5 UI 库 Ant Desigin 介绍 Ant Design 是我们（蚂蚁金服 Ant Design 团队）开发的一款优秀的前端框 UI 库架支持 React 和 Angular5。 Ant Design 很久以前只支持 React，但是 Facebook React 开源协议修改后, 阿里巴巴 Ant Design 团队开始了 Angular5 的支持。 据了解，Faceb...
Angular7教程-02-Angular项目目录及基本文件说明
weixin_33913377的博客
11-05 472
本教程基于Angular7,更新时间2018-11-05. 1. 项目根目录如下： e2e文件夹：end to end，测试目录，主要用于集成测试。 node_modules：项目的模块依赖目录。 src：项目的源代码。 .editorconfig：编辑器配置文件。 .gitignore: git版本控制时忽略的文件（此文件中配置的文件不纳入版本控制）。 .angular.json：angul...
AngularJS2——使用Angular Cli 快速搭建工程
当一堆用不熄灭的柴火
02-13 1万+
最近小小的研究了一下AngularJS2，今天介绍一下环境的搭建软件安装：Node.JS5.0以上；NPM3.0以上（安装Node.js的时候自动就安装了npm）;TypeScript（可以通过VS或者命令行两种方式进行安装）第一步： 安装npm，由于npm官网镜像访问太慢，我们使用淘宝的npm镜像，在node命令窗口$ npm install -g cnpm --registry=https:/
angular 标准目录结构_Angular 10 目录详解
weixin_39820136的博客
12-20 552
angular 10.x 目录详解1. 根目录文件e2e (end-to-end)端到端测试目录node_modules 依赖包src 应用程序源代码目录.browserslistrc 目标浏览器配置表.editorconfig 编辑器配置文件.gitignore 指定git需要忽略的不必跟踪的...
Angular 实现树形菜单（多级菜单）功能模块
xiaoxinshuaiga的博客
03-30 2万+
前言本文要分享的是一个多级菜单效果，也就是传说中的树形结构菜单，理论上支持无限级菜单，当然数据结构要一定的要求，但这都不是什么难事，因为我们可以把数据组装成所需要的结构。下面这个例子虽然不是很完美好，但是估计也够用了。这个多级菜单是模仿 Angular 官方的左侧菜单效果来做的，效果的相似度应该达到 99%，本文内容有点多（主要是代码），因为我想把所有的代码都贴出来，尽量不让你幻想缺失的代码。好了...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值