我使用Angular Electron制作了一个待办事项应用

3 年 ago
科, 颖
1 minute

总结

我根据上次的进展尝试了一下Angular。
顺便也尝试了一下Electron，于是又又做了一个Todo应用。

经过调查我发现自己可以结合Angular和Electron来开发，但是我并不太了解(orz)，所以我选择了使用Angular-Electron作为基础。

来源：https://github.com/yasuakihirano/todoapp-angular-electron

来源于：https://github.com/yasuakihirano/todoapp-angular-electron

undefined

做过的事情 (zuò guò de shì

使用git clone命令克隆angular-electron代码库。

git clone https://github.com/maximegris/angular-electron.git

因为想使用Bootstrap4，所以使用Bower进行安装，也希望使用图标，所以安装了Open-Iconic。

bower install bootstrap4 --save
bower install open-iconic --save

基本上，todoapp-angular-electron/src/app/components/home/ 目录下的内容需要进行某些更改。

为了实现输入面板的展开和关闭动画以及文件输出，需要分别安装@angular/animations和ngx-fs。

npm i @angular/animations --save
npm i ngx-fs --save

困难&调查过的事情

bower_components目录的位置配置错误。

在根目录下创建.bowerrc文件，并按照以下设置即可。

{
    "directory":"src/assets/bower_components"
}

我不太懂文件输出的方法。

可能会有必要回顾已输入的待办事项，所以我想将其输出为文件，但我不知道如何进行文件输出。
我在npm上找到了一个叫做ngx-fs的包，尝试使用它后成功了。

浏览器和桌面版的处理分支

我在调查了一番后仍然不太明白，但在查看了用户代理后发现电脑版中已经安装了electron，因此我根据这个进行了分支判断。

    if (-1 < window.navigator.userAgent.indexOf("Electron")) {

外部CSS的加载位置在哪里？

我最终在todoapp-angular-electron/src/styles.scss文件中按照以下方式写了。

@import "./assets/bower_components/bootstrap4/dist/css/bootstrap.css";
@import "./assets/bower_components/open-iconic/font/css/open-iconic-bootstrap.css";

经常使用的命令和笔记

コマンド内容ng servewebで実行する。electron .pjルートディレクトリで実行するとデスクトップ形式で実行される。npm run electron:windowswindows用にビルドするnpm run electron:linuxlinux用にビルドするnpm run electron:macmac用にビルドする

使用electron命令在桌面上运行时，请注意必须在构建后才能反映更改。
制作gif图像时，ScreenToGif很方便。

封装

使用electron-packager工具。在Windows系统下，会生成一个exe文件。非常厉害。

electron-packager . todoapp-angular-electron --platform=win32 --arch=ia32

感觉

我觉得做起来比我想象的简单些。感觉信息来源有点少，有些出人意料。(我英语水平不高。。)
因为在桌面版本编译需要花费时间，所以基本上最好在开发时保持ng serve（会自动重新加载）。

bannerAds