介绍
Electron-Angular-Toolkit-Edge 是一个专门为 Electron 框架而设计的 Angular 扩展工具包。该工具包同时集成了 Angular、Electron、以及其他常用库，以便于您在开发 Electron 应用时使用
工具包所包含的功能如下：
- 基于
ng-packagr将 Angular 应用程序打包为库 - 集成 Electron，实现可以在 Electron 运行的应用程序发行版
- 在 Electron 中使用 Node.js 的 API
- 其他常见库的集成，如 Lodash、RxJS、等等
本篇文章将提供 Electron-Angular-Toolkit-Edge 的安装教程及使用说明，以帮助 Angular 开发者更好地使用 Electron。
安装
我们首先需要安装 Node.js 和 Angular-CLI，如果您已经安装了这两个工具，可以跳到下一步。
安装 Node.js
在安装 Electron-Angular-Toolkit-Edge 之前，我们需要确保安装了 Node.js
您可以在 https://nodejs.org/download/ 下载安装包并安装
安装 Angular CLI
Angular CLI 是一个命令行工具，用于创建基于 Angular 的应用程序。同样需要使用命令行工具，安装 Angular CLI。
打开终端（Windows 上是命令提示符或 PowerShell），输入
npm install -g @angular/cli
这条命令会将 Angular CLI 安装到全局环境中。
安装 Electron-Angular-Toolkit-Edge
我们使用 NPM 包管理器来安装 Electron-Angular-Toolkit-Edge 。打开终端，输入以下命令
npm install electron-angular-toolkit-edge --save-dev
使用
创建一个新的 Angular 项目：
ng new my-electron-app cd my-electron-app
使用 Angular CLI 生成一个库应用程序：
ng generate library my-library
在电子应用程序中包含库应用程序
- 安装
electron-angular-toolkit-edge并启动 Electron 服务
npm install electron-angular-toolkit-edge npm run electron:start
- 在
src/electron.ts中，导入和初始化库应用程序：
-- -------------------- ---- -------
------ - -- ---- ---- -------
------ - ------------------ -------------- - ---- ---------------
------ - --------- - ---- ------------------------------------------- ---------
--- ----------- ---------------
----- ----- - --------------------------- --- --------------
-------- ------- ------------------------------- -
------ --- ------------- ------- -- -
----- ------------------- ---------- -------------------- ---------------- ------------- ------- ---------------------------- --
--------- -
--------------------------------------
-
--------------------
---
-
--------------- ----- -- -- -
---------- - --------------------------------
------ ----
------- ----
------- -----
------ ------
---------- ------
------------ -----
--------------- -
---------------- -----
------------------- -----
--------------------- -----
-
---
----------------------- -- -- ------------
----- -------
---
- 在项目管理文件
angular.json中，添加 Electron 目标和 Electron 打包器
-- -------------------- ---- -------
-
---------- -----------------------------------------------------
---------- --
----------------- ---
----------- -
------------------ -
-------------- --------------
------------- -
-------------------------------- -
----------- ------
-
--
------- ---
------------- ------
--------- ------
------------ -
-------- -
---------- ----------------------------------------
---------- -
------------- -----------------------
-------- -----------------
------- ----------------------------------
----------- ----------------------------------------
--------- -
------------------
------------
--
--------- ---
---------- --
--
---
----------------- -
------------- -
---
--
----------- -
---------------- -------------------------
-
-
--
-------- -
---------- -------------------------------------------
---------- -
------- -----
---
--
----------------- -
----------- -
---------------- -------------------------
-
-
--
----------------- -
---------- --------------------------------------------
---------- -
----------- -------- ---------
------- ------
---------------- -----------
------------------ -
------- ------------------------------
-
--
----------------- -
------------- ---
----------- --
-
-
-
-
--
---
-- 命令行输入
ng run my-electron-app:electron以运行应用程序
示例代码
这是一个简单的示例代码，可以在 Electron 的 Renderer 进程中使用 Electron API 来创建窗口。
-- -------------------- ---- -------
------ - ---------- ------ - ---- ----------------
------ -------- ---- -----------
------------
--------- --------------
--------- -
------------------
------- -------------------------------------
-
--
------ ----- ---------------- ---------- ------ -
------ -------
------------- - -
---------- -
---------- - ----- -------------------------------
-
------------ -
--- ------ - --- ---------------------- ------ ---- ------- --- ---
----------------------------------------
-
-结语
借助 Electron-Angular-Toolkit-Edge ，我们可以更轻松快捷地使用 Angular 和 Electron 来构建高效、可靠、易于维护的桌面应用程序。这一工具包的安装和使用教程也展现了其特点：易于使用，文档清晰详细，操作步骤几乎不受限。相信使用本工具包可以大幅提高 Angular 开发者的开发效率及项目运行性能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562b581e8991b448dff43