使用angular和electron 构建桌面应用

最新推荐文章于 2024-06-12 09:50:06 发布
最新推荐文章于 2024-06-12 09:50:06 发布
阅读量1.3k 收藏
点赞数 1
分类专栏： angular 文章标签： angular.js electron 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39962271/article/details/132113554
版权
本文详细介绍了如何结合Angular和Electron构建桌面应用。首先，从新建Angular应用开始，修改src/index.html文件以适应Electron环境，接着安装Electron并配置主进程文件main.js。然后，自定义package.json的构建命令，通过命令行运行应用。最后，使用Electron Packager将应用打包成Windows、MacOS和Linux的可执行文件。
摘要由CSDN通过智能技术生成

使用angular和electron 构建桌面应用

初始设置

新建一个angular app

npm install -g @angular/cli
ng new angular-electron
cd angular-electron

修改src/index.html文件内容

将绝对路径改为相对路径，加个点，使electron可以访问到angular文件资源

<base href
了解本专栏 订阅专栏 解锁全文 超级会员免费看
大脑经常闹风暴@小猿
关注
专栏目录
订阅专栏
Angular+Electron+VSCode的桌面应用开发入门笔记（1）
yr7942793的博客
03-26 2万+
第一部分 Electron开发入门笔记 GitHub 的 Electron 框架（以前叫做 Atom Shell）允许你使用 HTML, CSS 和 JavaScript 编写跨平台的桌面应用。它是 io.js 运行时的衍生，专注于桌面应用而不是 web 服务端。 Electron 丰富的原生 API 使我们能够在页面中直接使用 JavaScript 获取原生的内容。 本文学习的主要知识来
Angular-angular-electron-dream-starter.zip
09-18
Angular-angular-electron-dream-starter.zip,Angular Electron初学者工具包，包括Webpack、Angular 4（路由器、HTTP、表单、服务、NGRX、测试、E2E、覆盖范围）、Karma、Spectron、Jasmine、伊斯坦布尔，以及带有Webpack的脚本Angular Electron Dream Starter,Angularjs于2016年发布，是Angularjs的重写版。它专注于良好的移动开发、模块化和改进的依赖注入。angular的设计目的是全面解决开发人员的web应用程序工作流。
Angular项目使用Electron打包为桌面程序
老杨头的博客
12-23 2214
项目中，有时会需要将Web页面应用打包为桌面程序。像visual studio code就是使用Web页面打包的桌面程序。 本文记录了使用Electron打包Angular项目的步骤。前提条件是已有项目已经按照Angular脚手架进行创建及开发，并且能够正常发布。 1、安装Electron依赖库 执行以下命令安装配置依赖库： npm config set ELECTRON_MIRROR=https://npm.taobao.org/mirrors/e...
Electron 和 Angular 项目升级
Talk is cheap, show the code. zhangsihui.pythonanywhere.com
06-20 1385
问题分为 Angular 升级带来的问题，Electron 升级带来的问题，包括 Angular 升级引起第三方模块不兼容的问题。还有一些 css 样式可能会变化，以及一些 TypeScript 语法问题。 框架升级是一件非常麻烦的事，特别是跨许多大版本升级，需要注意的事项很多，如果项目很大，升级后需要完整测试。
Electron与angular4结合实现热更新
qq_34749609的博客
02-20 2005
Electron与angular4结合实现热更新ELECTRON架构概况Renderer Process （渲染进程）Main Process（主进程）问题总结一、jQuery引入二、使用electron api三、主进程和渲染进程的理解四、electron 通过node-ffi调用 dll文件五、electron的生命周期六、使用electron-builder和electron-updater...
使用Angular和Electron构建原生桌面计时器应用 - AngularElectron
最新发布
gitblog_00065的博客
06-12 492
使用Angular和Electron构建原生桌面计时器应用 - AngularElectron 项目地址:https://gitcode.com/AngularFirebase/angular-electron 1、项目介绍 AngularElectron是一个开源项目，它将现代Web开发框架Angular与强大的Electron平台相结合，帮助开发者轻松创建桌面应用程序。项目中包含一个简洁的计时...
electronic-angular4-sqlite3：示例项目，展示如何使用Electron，Angular 4和Sqlite3构建桌面应用
02-04
这是一个示例项目，展示了如何使用Electron，Angular 4和Sqlite3构建桌面应用程序 有关分支的信息 主 显示使用Electron，Angular和Sqlite构建桌面应用程序的基本配置。 社区（WIP） 将使用户能够创建社区/组织，向...
Electron-Angular4-Pouchdb：使用PouchDB和CouchDB的基于Electron和Angular 4的桌面应用程序
02-06
如果您更改任何源文件，该应用程序将自动重新加载。 代码脚手架 运行ng generate component component-name生成一个新的组件。 您还可以使用ng generate directive|pipe|service|class|module 。 建立 运行npm run ...
electron-studio:使用电子构建跨平台桌面应用
05-13
通过 Electron，开发者可以用熟悉的 Web 技术来构建桌面应用，同时利用 Node.js 的能力进行后台处理，如文件系统操作和网络通信。 ### 2. JavaScript 在 Electron 中的角色 JavaScript 是 Electron 应用的核心编程...
AngularJS,Electron桌面开发
06-16
从网页上复制下来的，作为备份。忘记来源了。致歉。
详解Angular CLI + Electron 开发环境搭建
08-29
本篇文章主要介绍了Angular CLI + Electron 开发环境搭建，具有一定的参考价值，有兴趣的可以了解一下
electron基础构建angular桌面应用
qq_38951418的博客
04-26 1843
electron基础构建angular桌面应用目的什么是electron？具体的一个操作步骤流程生成用于安装的.exe文件 目的 把web项目打包成.exe和其他安装包文件 什么是electron？ Electron是由Github开发，用HTML，CSS和JavaScript来构建跨平台桌面应用程序的一个开源库。 Electron通过将Chromium和Node.js合并到同一个运行时环境中，并...
Angular+electron创建桌面应用
qq_35118335的博客
04-15 2691
一、angular环境搭建 不做介绍 二、构建electron配置 添加electron依赖 npm install electron --save-dev 三、将angular和electron整合 创建main.js配置文件 我们需要创建一个带有默认配置的main.js文件，来让我们的Electron应用跑起来，在项目根目录，创建main.js文件，并将一下内容放进去（...
使用 AngularJS 和 Electron 构建桌面应用
weixin_34399060的博客
02-18 150
GitHub 的 Electron 框架（以前叫做 Atom Shell）允许你使用 HTML, CSS 和 JavaScript 编写跨平台的桌面应用。它是io.js 运行时的衍生，专注于桌面应用而不是 web 服务端。 Electron 丰富的原生 API 使我们能够在页面中直接使用 JavaScript 获取原生的内容。 这个教程向我们展示了如何使用 Angular 和 Electron...
【Electron】Electron开发中，与部分jQuery/angularjs/vuejs等外链冲突的问题
Mickeymouse
03-27 1884
在Electron开发桌面应用中，之前的angularjs项目使用了websocket重连的方法，通过&lt;script&gt;引入进来，但是在Electron上运行的时候，会报错！后来找到一片说明的文档，是因为有冲突解决办法：&lt;html&gt; &lt;script&gt;if (typeof module === 'object') {window.module = module;...
Angular Electron - 开源项目推荐
gitblog_00011的博客
05-19 308
Angular Electron - 开源项目推荐 项目地址:https://gitcode.com/angular/angular-electron 1、项目介绍 Angular Electron 是一个基于 Electron 平台为 Angular 应用程序量身定制的框架。这个项目目前正处于积极开发阶段，旨在提供一个高效、稳定的解决方案，让开发者能够轻松地构建跨平台的桌面应用，结合了 Angu...
探索Angular 2与Electron的完美融合：图片计算器应用
gitblog_00059的博客
06-05 497
探索Angular 2与Electron的完美融合：图片计算器应用 项目地址:https://gitcode.com/auth0-blog/angular2-electron 在当今这个视觉为王的时代，管理和分析图像数据变得尤为重要。今天，我们要向您推荐一个集创新与实用为一体的开源项目——Angular 2 + Electron 图片计算器。这款应用不仅展示了前端技术的强大，更是将用户体验提升到了...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

大脑经常闹风暴@小猿

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值