Electron을 사용하면 Windows, Mac 및 Linux용 데스크톱 애플리케이션을 구축할 수 있습니다. Electron을 사용하여 앱을 빌드할 때 데스크톱 애플리케이션 창을 통해 앱을 미리 보고 실행할 수 있습니다.
Electron을 사용하여 일반적인 웹 브라우저 대신 데스크탑 창에서 실행되도록 Angular 앱을 구성할 수 있습니다. 앱 자체 내에서 JavaScript 파일을 사용하여 이 작업을 수행할 수 있습니다.
Electron을 구성하면 일반 Angular 앱에서와 같이 개발을 계속할 수 있습니다. 애플리케이션의 주요 부분은 여전히 동일한 표준 Angular 구조를 따릅니다.
애플리케이션의 일부로 Electron을 설치하는 방법
Electron을 사용하려면 node.js를 다운로드하여 설치하고 npm install을 사용하여 앱에 Electron을 추가해야 합니다.
- 다운로드 및 설치 노드.js . 버전을 확인하여 올바르게 설치했는지 확인할 수 있습니다.
노드에는 다음이 포함됩니다. npm, 자바스크립트 패키지 관리자 . npm 버전:node -v
npm -v
를 확인하여 npm이 설치되었는지 확인할 수 있습니다. - 다음을 사용하여 새 Angular 응용 프로그램을 만듭니다. 새로운 명령. 이것은 필요한 모든 것을 포함하는 폴더를 생성합니다 Angular 프로젝트에 필요한 파일
ng new electron-app
- 응용 프로그램의 루트 폴더에서 다음을 사용하십시오. npm Electron.
npm install --save-dev electron
설치 - 앱의 node_modules 폴더에 Electron을 위한 새 폴더가 생성됩니다.
- 컴퓨터에 Electron을 전역적으로 설치할 수도 있습니다.
npm install -g electron
각 전자 응용 프로그램의 파일 구조
Electron은 바탕 화면 창을 만들고 관리하기 위해 기본 JavaScript 파일이 필요합니다. 이 창은 그 안에 있는 앱의 콘텐츠를 표시합니다. JavaScript 파일에는 사용자가 창을 닫는 경우와 같이 발생할 수 있는 다른 이벤트도 포함됩니다.
런타임에 표시되는 콘텐츠는 index.html 파일에서 가져옵니다. 기본적으로 index.html 파일은 내부에서 찾을 수 있습니다. src 폴더 및 런타임에 빌드된 복사본이 자동으로 내부에 생성됩니다. 거리 폴더.
index.html 파일은 일반적으로 다음과 같습니다.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> ElectronApp </title>
<base href="./">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root> </app-root>
</body>
</html>
body 태그 안에는
Electron을 사용하여 데스크탑 창에서 Angular 애플리케이션을 여는 방법
main.js 파일을 만들고 데스크톱 창에서 애플리케이션 콘텐츠를 열도록 구성합니다.
네트워크 암호를 변경하는 방법 Windows 10
- 프로젝트의 루트에 파일을 생성합니다. 메인.js . 이 파일에서 Electron을 초기화하여 응용 프로그램 창을 만드는 데 사용할 수 있습니다.
const { app, BrowserWindow } = require('electron');
- 특정 너비와 높이의 새 바탕 화면 창을 만듭니다. 인덱스 파일을 창에 표시할 내용으로 로드합니다. 인덱스 파일의 경로가 앱의 이름과 일치하는지 확인하십시오. 예를 들어 앱 이름을 'electron-app'으로 지정한 경우 경로는 'dist/electron-app/index.html'.
function createWindow() {
가 됩니다.
win = new BrowserWindow({width: 800, height: 800});
win.loadFile('dist/electron-app/index.html');
} - 앱이 준비되면 createWindow() 함수를 호출합니다. 그러면 앱에 대한 애플리케이션 창이 생성됩니다.
app.whenReady().then(() => {
createWindow()
}) - 에서 src/index.html 파일에서 베이스 태그에서 href 속성을 './'로 변경하십시오.
<base href="./">
- ~ 안에 패키지.json , 을 추가하다 기본 필드에 입력하고 main.js 파일을 값으로 포함합니다. 이것은 앱의 진입점이 될 것이므로 애플리케이션이 app.
{
를 시작할 때 main.js 파일을 실행합니다.
"name": "electron-app",
"version": "0.0.0",
"main" : "main.js",
....
} - 에서 .browserslistrc 파일에서 iOS 사파리 버전 15.2-15.3을 제거하도록 목록을 수정합니다. 이렇게 하면 컴파일할 때 콘솔에 호환성 오류가 표시되지 않습니다.
last 1 Chrome version
last 1 Firefox version
last 2 Edge major versions
last 2 Safari major versions
last 2 iOS major versions
Firefox ESR
not ios_saf 15.2-15.3
not safari 15.2-15.3 - 에서 기본 콘텐츠를 삭제합니다. src/app/app.component.html 파일. 새로운 콘텐츠로 교체하십시오.
<div class="content">
<div class="card">
<h2> Home </h2>
<p>
Welcome to my Angular Electron application!
</p>
</div>
</div> - 콘텐츠에 스타일을 추가하십시오. src/app/app.component.css 파일.
.content {
line-height: 2rem;
font-size: 1.2em;
margin: 48px 10%;
font-family: Arial, sans-serif
}
.card {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
width: 85%;
padding: 16px 48px;
margin: 24px 0px;
background-color: whitesmoke;
font-family: sans-serif;
} - 전체적인 스타일링을 더해보세요. src/styles.css 기본 여백 및 패딩을 제거하는 파일입니다.
html {
margin: 0;
padding: 0;
}
전자 애플리케이션을 실행하는 방법
창에서 애플리케이션을 실행하려면 package.json의 스크립트 배열에서 명령을 구성하십시오. 그런 다음 터미널에서 명령을 사용하여 앱을 실행합니다.
- ~ 안에 패키지.json , 스크립트 배열 내부에 Angular 앱을 빌드하고 Electron을 실행하는 명령을 추가합니다. 스크립트 배열의 이전 항목 뒤에 쉼표를 추가해야 합니다.
"scripts": {
...
"electron": "ng build && electron ."
}, - 데스크탑 창에서 새 Angular 애플리케이션을 실행하려면 프로젝트의 루트 폴더에 있는 명령줄에서 다음을 실행하십시오.
- 애플리케이션이 컴파일될 때까지 기다리십시오. 완료되면 웹 브라우저에서 Angular 앱이 열리는 대신 데스크탑 창이 열립니다. 바탕 화면 창에 Angular 앱의 콘텐츠가 표시됩니다.
- 웹 브라우저에서 애플리케이션을 계속 보려면 ng serve 명령을 실행할 수 있습니다.
ng serve
- 사용 중인 경우 봉사의 명령을 실행하면 앱의 콘텐츠가 웹 브라우저에 계속 표시됩니다. 로컬 호스트:4200.
Electron으로 데스크탑 애플리케이션 구축하기
Electron을 사용하여 Windows, Mac 및 Linux에서 데스크톱 애플리케이션을 구축할 수 있습니다. 기본적으로 ng serve 명령을 통해 웹 브라우저를 사용하여 Angular 애플리케이션을 테스트할 수 있습니다. 웹 브라우저 대신 데스크탑 창에서도 열리도록 Angular 애플리케이션을 구성할 수 있습니다.
JavaScript 파일을 사용하여 이 작업을 수행할 수 있습니다. index.html 및 package.json 파일도 구성해야 합니다. 전체 응용 프로그램은 여전히 일반 Angular 응용 프로그램과 동일한 구조를 따릅니다.
데스크톱 응용 프로그램을 빌드하는 방법에 대해 자세히 알아보려면 Windows Forms 앱을 탐색할 수도 있습니다. Windows Forms 앱을 사용하면 C# 파일에 코딩 논리를 추가하는 동시에 UI 요소를 클릭하여 캔버스로 끌 수 있습니다.