anguar一个空间多个项目实战

2023-11-14

一、前言

有时候我们在一条产品线上,会有多套前端代码,运行在不同平台或者有多个业务端。这些代码可复用性非常高,以至于可以从某套代码直接copy出来用于开发另一个业务端。于是某个小组件需要改动时却要跑起多个项目来修改。angular-cli很好地帮我们解决了这个问题——建立多项目的工作空间。

在正式投入实战之前,先来试一试。来,,,做好笔记。
假设你已经装好了node和全局安装最新的angular-cli,然后,我们开始快活吧~

二、建立项目

1. 建立工作空间

首先,建立一个无项目空间,终端输入:

ng new my-workspace --createApplication="false"

好了,建好了,
在这里插入图片描述
但是建好的项目,空空如也,=͟͟͞͞( •̀д•́) 我的src呢?我的index.html呢?

2. 建立第一个项目

别急嘛,既然没有,那建一个不就是了。我们终端进入根目录,运行一下命令

cd my-workspace
ng generate application my-first-app

建立项目的时候会询问是否需要测试框架、使用什么样式预编译语言、还有是否使用路由功能。我们有yes就选yes,没yes就… 选你喜欢的(。◝‿◜。) ,有时候不是小孩子更需要选择。
在这里插入图片描述
在这里插入图片描述
建好之后会多出一个projects目录,该目录下有一个我们刚刚建立的项目 my-first-app,我们npm start跑起来 ↖(▔▽▔)↗
在这里插入图片描述

3. 建立第三个项目
接着,我们建立另一个项目

ng generate application my-second-app

在这里插入图片描述
好了,项目有了,但是,,,
怎么跑起来啊(゚Д゚)w,先去喝杯咖啡冷静一下…

唔,,,咖啡甜中略带苦涩的味道涌上心头,宛如浓郁的花香,带领你置身清新悠然的大自然,翱翔在自由的天空,柔和的微风宛如仙女的双手…
.
咳咳~,对了,还有正事呢,不是想入非非的时候…

我们看packge.json,跑起项目my-first-app的时候ng serve就跑了起来,官方对ng serve的用法是

ng serve
Builds and serves your app, rebuilding on file changes.

ng serve <project> [options]
ng s <project> [options]

恍然大悟,醍醐灌顶,毛塞顿开,ng serve要传入一个项目名称的参数,那么我们在package.json的scripts加入这两句:

"second-project": "ng serve my-second-app --port=5000 --open"
"build:second-project": "ng build my-second-app"

好了,我们跑一下

npm run second-project

在这里插入图片描述
果然跟我预期那样跑了起来(〃‘▽’〃),端口是5000,–open是自动打开了浏览器。

好了,两个项目的组件和公库,可以复用啦ds(❁´◡`❁)✲゚

总结

angular-cli在前端项目工程化方面做得非常好的一个框架,官方脚手架本身集成路由和状态管理、分包加载项目代码,无需其他过多配置。相对于简单的react,留给你自由发挥的空间并不多,但却省去前期配置的很多工作量。比起vue跟react,angular才更像是一个框架。react、vue、angular我都用过,我不是在打广告,我只是说出我的感想。(#゚Д゚)

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

anguar一个空间多个项目实战 的相关文章

随机推荐

  • 【JS】简易ATM取款机

    页面显示请输入你的操作 不输入4就会反复弹出这个对话框 1 存款 2 取款 3 查看余额 4 退出 while嵌套switch 循环的时候 需要反复提示输入框 所以提示框写到循环里面 退出的条件是用户输入了4 如果是4 则结束循环 不在弹窗
  • 文件名称乱码,content-disposition 获取filename乱码的解决办法

    1 前端先确认是否能在响应头里获取到filename 如果获取不到 需后端服务器设置请求头Access Control Expose Headers 设置headers name 文件名称 中国 xlsx public static Htt
  • 微信小程序接入客服功能开发流程

    首先看官方文档这样说的 1 小程序内 开发者在小程序内添加客服消息按钮组件 用户可在小程序内唤起客服会话页面 给小程序发消息 客服消息使用指南 微信开放文档 客服消息按钮组件 button 微信开放文档 在线客服是通过按钮组件来绑定的 所以
  • mac安装MongoDB以后 报错 command not found: mongod

    mac安装MongoDB以后 报错 command not found mongod 阐述 这里具体就不介绍怎么安装MongoDB了 可以自行的去查教程 官网 MongoDB官网 菜鸟教程 建议使用这个 报错问题 当执行 mongod ve
  • 循环里,设置执行间隔

    在循环内控制 多长时间执行一次循环体 js没有提供这种方法 就只能自己写个判断时间的函数 第一种方法 es6之前我们可以用时间戳来判断 function sleep n var start new Date getTime 定义起始时间的毫
  • AQS同步组件-CountDownLatch解析和案例

    CountDownLatch原理 CountDownLatch是通过一个计数器来实现的 计数器的初始化值为线程的数量 每当一个线程完成了自己的任务后 计数器的值就相应得减1 当计数器到达0时 表示所有的线程都已完成任务 然后在闭锁上等待的线
  • Linux——线程同步(互斥锁、信号量、读写锁、自旋锁、条件变量)

    前言 当多个控制线程共享相同的内存时 需要确保每个线程看到一致的数据视图 若每个线程使用的变量都是其他线程不会读取或修改的 那么就不存在一致性概念 同样地 若变量是只读的 多个线程同时读取该变量也不会有一致性问题 但是当某个线程可以修改变量
  • Myeclipse平台struts+hibernate+spring项目开发示例

    如果您按照上篇文章配置成功 可以进行开发简单的J2EE项目 开发前准备 1 新建项目包 如下图 Dao 数据层 service 逻辑层 web web展现层 2 建立好三层架构 部署好包名 建立一个jsp文件 取名为 login jsp 代
  • Go设置国内源

    Go设置国内源 如果你需要Beego这个框架 正常来说你需要安装Git之后go get不会报错 但由于网络问题 go get会非常慢 以至于没法使用 这个时候我们需要需要国内源来进行加速 首先需要我们开启Go的MODULL支持 SETX G
  • 从零开始的ESP8266探索(16)-扫描网络演示

    文章目录 目的 使用演示 同步扫描 异步扫描 总结 目的 ESP8266可以通过扫描获取周围环境中的WiFi热点 所以我们也可以先扫描一下再决定连接到某个网络上 这也是一种常见的应用场景 使用演示 同步扫描 使用下面代码进行同步扫描 同步扫
  • 59. 螺旋打印情况

    i 代表一圈 j 从用来上下左右移动 主要是控制 i 与j 的参数关系就ok了 另一个是注意如何初始化 从左上角到右上角 while j
  • CScrollView嵌入对话框中无法响应WM_MOUSE WHEEL 消息

    1 问题描述 当使用CScrollView来显示图像时 往往需要将它嵌入到对话框中 当嵌入对话框之后 显示图像 使用放大镜查看图像时 发现使用WM MOUSE WHEEL消息来放大和缩小放大镜 结果消息未响应 2 分析原因 跟着调试发现 C
  • 基于LLaMA-2进行微调的FreeWilly2开源语言模型

    FreeWilly2是由Stability AI基于Llama2 70B所微调后发布的大语言模型 该模型的部分推理能力甚至已经超越了openAI的GPT 3 5 截止至发稿前 该模型在HuggingFace的开源语言模型排行榜中位列榜首 大
  • FPGA的虚拟时钟如何使用?

    以下文章来源于傅里叶的猫 作者张大侠 但文中对虚拟时钟的应用介绍的还不够详细 因此这里我们再对虚拟时钟做一个更加细致的介绍 首先 虚拟时钟用于什么地方 虚拟时钟通常用于设定输入和输出的延时 即set input delay和set outp
  • python 读取dll、exe文件版本终极方案

    网上找到的大都是调用win32api 但是这个api很多dll识别失败了 推荐使用wind32com 它兼容性比较强 1 使用win32api import os import win32api def getFileVersion fil
  • AlmaLinux构建LNMP

    环境 虚拟机 AlmaLinux9 1 hostname localhost ip 192 168 123 228 查看系统 cat etc redhat release 确保软件包管理器是最新的 yum clean all yum upd
  • 已解决AttributeError: ‘list‘ object has no attribute ‘text‘

    已解决AttributeError list object has no attribute text 文章目录 报错问题 报错翻译 报错原因 解决方法 千人全栈VIP答疑群联系博主帮忙解决报错 报错问题 粉丝群里面的一个小伙伴遇到问题跑来
  • 时间序列预测误差_时间序列-误差指标

    时间序列预测误差 时间序列 误差指标 Time Series Error Metrics It is important for us to quantify the performance of a model to use it as
  • 2023年电工杯B题问题二三思路讲解+创新点

    问题二三解题思路 1 根据你们对数据的分析结果选取评价指标 从优先级 科学性 可操作性等方面论述其合理性 并构建评价指标体系 2 建立数学模型 评价人工智能对大学生学习的影响 给出明确 有说服力的结论 这两问 可以看作一个问题 即针对人工智
  • anguar一个空间多个项目实战

    一 前言 有时候我们在一条产品线上 会有多套前端代码 运行在不同平台或者有多个业务端 这些代码可复用性非常高 以至于可以从某套代码直接copy出来用于开发另一个业务端 于是某个小组件需要改动时却要跑起多个项目来修改 angular cli很