使用 Angular Noob Angular 和 Electron 在 ElectronJS 中开发桌面应用程序

2025-06-10

使用 Angular 在 ElectronJS 中开发桌面应用程序

新手 Angular 和 Electron

如今，程序是一个界面，是计算机与用户之间的桥梁。现在，它被赋予了另一个名称，叫做应用程序。应用程序可以有效地利用人们的时间，提高工作效率。考虑到智能手机的数量相对于个人电脑的数量，移动应用程序的数量比桌面应用程序要多。这给桌面用户在寻找高效的应用程序时留下了很大的空白。

替代文本

申请流程

应用程序曾经使用机器语言编写，后来出现了可读性更高的汇编语言，而如今我们用 JavaScript 来开发桌面应用程序。为什么选择 JavaScript？因为它更易于理解，而且像自然语言一样易于使用。它只需基本的最低配置，几乎可以在任何地方运行。

替代文本

我们的应用程序架构

Angular 所采用的 MVC（模型视图控制器）可以理解为一套标准实践，一种机制，它帮助你在内部组织代码，并在出现错误时快速修复，从而确保你的代码不会“洒”出来。模型部分剥离了应用程序的逻辑，并将其放入另一个容器中，在那里它与其他逻辑连接，但所有逻辑都在那里完成，所以如果你遇到一些逻辑问题，你不必打开并搜索所有文件。它管理所有进出应用程序的数据。

MVC（模型-视图-控制器）的视图部分负责渲染所有内容并将其显示在浏览器上。您在网页上看到的所有图形和文本都位于 MVC 的视图模块中。控制器部分负责处理所有用户输入，并将所有输入转发给模型和视图。因此，Angular 是一个由 Google 的开发人员维护的 Web 框架，这些开发人员致力于开发被称为 SPA（单页应用程序）的应用程序。它将您的应用程序转换为模型-视图-控制器架构。

ElectronJS 是另一个框架，它使您能够将您的 Web 应用程序或网站转换为可执行应用程序，从而可以充分利用任何操作系统的所有 Windows、Mac 或 Linux 功能。

现在，Node.js 是一个承载所有这些功能的环境。它帮助每个人使用 JavaScript 编写易于理解的英语编程语言。它既支持服务器端，也支持客户端。它不仅能帮助你提供服务，还能提供客户端逻辑。

环境安装流程

我们将使用 Windows 10 操作系统来开发启动应用程序。

下载 NodeJS
https://nodejs.org/en/download/

前往 URL 下载安装程序。该网站也可用于下载其他平台的 NodeJS。

替代文本

现在运行安装程序，你将看到一个 NodeJS 安装程序界面。点击“下一步”继续。选择“自定义安装”，并检查是否启用了“从磁盘安装所有”，尤其是“添加到 PATH”选项。“添加到路径”将 nodeJS 目录链接到你的环境路径，相当于对所有命令和可执行文件的全局访问。

替代文本
替代文本

这相当于你无需进入 NodeJS 目录即可运行命令，NodeJS 命令可以在任何目录的任何位置访问。安装完成后，让我们检查一下 Node 是否安装成功。要检查安装是否成功，请从开始菜单打开运行对话框，按 Window 键 + R 快捷键，输入 CMD 并按回车键。你应该会看到一个命令提示符窗口。

替代文本
替代文本

输入以下命令

Node -v 
Npm -v
Enter fullscreen mode Exit fullscreen mode

它应该会显示已安装的版本。我们已经安装了 Node。现在让我们安装 Angular。要安装 Angular，请使用以下命令

npm install -g @angular/cli
npm install typescript -g
Enter fullscreen mode Exit fullscreen mode

设置项目

要创建新的 Angular 项目，我们使用名为 ng 的 Angular 命令行工具。使用以下命令创建新项目。

Ng new myDesktopApp
Would you like to add Angular routing? Yes
Which stylesheet format would you like to use? SCSS
Cd myDesktopApp
npm i -D electron@latest
Enter fullscreen mode Exit fullscreen mode

现在我们需要创建一个 main.js 文件作为我们的入口点，并修改 package.json、tsconifg.json 和 angular.json。

替代文本

替代文本

Angular.json

"outputPath": "dist",

Package.json
  "main": "main.js", 
  "scripts": {
    "electron": "ng build --base-href ./ && electron .",
    "electron-tsc": "tsc main.ts && ng build --base-href ./ && electron .",

Tsconfig.json
    "target": "es5",


Main.js

const { app, BrowserWindow } = require("electron");
const path  = require("path");
const url   = require("url");


let win;

// Create our App Window
app.on("ready", createWindow);

// Fix for MAC to Quite
app.on("window-all-closed", () => {
    if (process.platform !== "darwin") {
        app.quit();
    }
});

// Focus our Window
app.on("activate", () => {
    if (win === null) {
        createWindow();
    }
});

function createWindow() {
    win = new BrowserWindow({ width: 800, height: 600 });

    // Loading the Dist Folder
    win.loadURL(
        url.format({
        pathname: path.join(__dirname, `/dist/index.html`),
        protocol: "file:",
        slashes: true
        })
    );

    // Open Developer Tools
    win.webContents.openDevTools()

    //On Close Event
    win.on("closed", () => {
        win = null;
    });    
}
Enter fullscreen mode Exit fullscreen mode

替代文本

npm install -g electron-builder
npm install electron-builder --save-dev

Now open Package.json
  "scripts": {
    "electron": "ng build --base-href ./ && electron .",
    "electron-tsc": "tsc main.ts && ng build --base-href ./ && electron .",
    "pack": "electron-builder --dir",
    "dist": "electron-builder",
  },
  "build": {
    "appId": "com.noobs.noobapp",
    "win": {
      "target": "nsis"
    }
  },
Enter fullscreen mode Exit fullscreen mode

然后编译应用程序

Npm run dist
Enter fullscreen mode Exit fullscreen mode

替代文本

现在打开 dist 文件夹，您将看到一个安装程序 my-desktop-app Setup 0.0.0.exe 和一个 win-unpacked 文件夹

替代文本

太棒了，现在你有一个使用 Angular 的 MVC 架构的桌面应用程序正在运行。尽情享受吧！它还会创建一个安装程序，使用 Nullsoft Scriptable Install Script。这是 Nullsoft 为微软开发的一款创作工具。它使用 zlib 许可证，你可以在

替代文本

GitHub 徽标 th3n00bc0d3r / noob-angular-electron

Angular 8 和 Electron 样板

新手 Angular 和 Electron

Angular 8 和 Electron 的样板

环境

Angular 8 Electron 6

跑步

git clone repo
npm install

npm run electron //To Run It
npm run dist //To Get Windows Build

在 GitHub 上查看


鏂囩珷鏉ユ簮锛�https://dev.to/th3n00bc0d3r/desktop-application-development-in-electronjs-using-angular-4cno
Devto 翻译
PREV
Seaborn 多图使用 matplotlib 和 seaborn GitHub 存储库进行子图绘制参考
NEXT
使用 Vite、TypeScript、Jest 和 React 测试库 2025 轻松设置 React 测试