Electron umożliwia tworzenie aplikacji komputerowych dla systemów Windows, Mac i Linux. Gdy tworzysz aplikację za pomocą Electron, możesz wyświetlić podgląd i uruchomić aplikację w oknie aplikacji komputerowej.

Możesz użyć Electrona, aby skonfigurować aplikację Angular do uruchamiania w oknie pulpitu, zamiast w zwykłej przeglądarce internetowej. Możesz to zrobić za pomocą pliku JavaScript w samej aplikacji.

Po skonfigurowaniu Electrona możesz kontynuować rozwój tak, jak w zwykłej aplikacji Angular. Główne części aplikacji nadal będą miały tę samą standardową strukturę Angular.

Jak zainstalować Electron jako część swojej aplikacji?

Aby używać Electron, musisz pobrać i zainstalować node.js, a następnie użyć npm install, aby dodać Electron do swojej aplikacji.

  1. Ściągnij i zainstaluj node.js. Możesz potwierdzić, że zainstalowałeś go poprawnie, sprawdzając wersję:
    węzeł -v
    Węzeł zawiera również npm, menedżer pakietów JavaScript. Możesz potwierdzić, że masz zainstalowany npm, sprawdzając wersję npm:
    npm -v
    2. instagram viewer
  2. Utwórz nową aplikację Angular za pomocą nowy Komenda. Spowoduje to utworzenie folderu zawierającego wszystkie niezbędne pliki wymagane do projektu Angular pracować.
    ng Nowy aplikacja elektronowa
  3. W folderze głównym aplikacji użyj npm zainstalować Electron.
    npm zainstalować--save-dev elektron
  4. Spowoduje to utworzenie nowego folderu dla Electron w folderze node_modules aplikacji.
  5. Możesz także zainstalować Electron globalnie na swoim komputerze.
    npm zainstalować -g elektron

Struktura plików aplikacji Angular Electron

Electron będzie wymagał głównego pliku JavaScript do tworzenia i zarządzania oknem pulpitu. W tym oknie zostanie wyświetlona zawartość Twojej aplikacji. Plik JavaScript będzie również zawierał inne zdarzenia, które mogą wystąpić, na przykład zamknięcie okna przez użytkownika.

W czasie wykonywania wyświetlana zawartość będzie pochodzić z pliku index.html. Domyślnie można znaleźć plik index.html wewnątrz pliku src folder, a w czasie wykonywania automatycznie tworzona jest jego zbudowana kopia wewnątrz odległość teczka.

Plik index.html zwykle wygląda tak:

<!doctype html>
<html lang="en">
<głowa>
<zestaw znaków meta="utf-8">
<tytuł> Aplikacja elektroniczna </title>
<bazowy href="./">
<nazwa meta="rzutnia" zawartość="szerokość=szerokość urządzenia, początkowa skala=1">
<link rel="Ikona" typ="obraz/ikona x" href="favicon.ico">
</head>
<ciało>
<root aplikacji></app-root>
</body>
</html>

Wewnątrz znacznika ciała znajduje się etykietka. Spowoduje to wyświetlenie głównego składnika aplikacji dla aplikacji Angular. Główny składnik aplikacji można znaleźć w źródło/aplikacja teczka.

Jak używać Electrona do otwierania aplikacji kątowej w oknie pulpitu?

Utwórz plik main.js i skonfiguruj go tak, aby otwierał zawartość aplikacji w oknie pulpitu.

  1. Utwórz plik w katalogu głównym projektu o nazwie main.js. W tym pliku zainicjuj Electron, aby móc go użyć do utworzenia okna aplikacji.
    stały { aplikacja, okno przeglądarki } = wymagać('elektron');
  2. Utwórz nowe okno pulpitu o określonej szerokości i wysokości. Załaduj plik indeksu jako zawartość do wyświetlenia w oknie. Upewnij się, że ścieżka do pliku indeksu jest zgodna z nazwą Twojej aplikacji. Jeśli na przykład nazwałeś swoją aplikację „electron-app”, ścieżka będzie miała postać „dist/electron-app/index.html”.
    funkcjonowaćutwórz okno() {
     wygrana = Nowy Okno przeglądarki({szerokość: 800, wzrost: 800});
     win.loadFile('dist/electron-app/index.html');
    }
  3. Gdy aplikacja jest gotowa, wywołaj funkcję createWindow(). Spowoduje to utworzenie okna aplikacji dla Twojej aplikacji.
    app.gdyReady().then(() => {
     utwórzOkno()
    })
  4. w src/index.html plik, w baza zmień atrybut href na „./”.
    <bazowy href="./">
  5. W pakiet.json, dodać Główny i dołącz plik main.js jako wartość. Będzie to punkt wejścia aplikacji, dzięki czemu aplikacja uruchamia plik main.js podczas uruchamiania aplikacji.
    {
    "Nazwa": "aplikacja elektronowa",
    "wersja": "0.0.0",
    "Główny": "main.js",
     ...
    }
  6. w .browserslistrc pliku, zmodyfikuj listę, aby usunąć iOS safari w wersjach 15.2-15.3. Zapobiegnie to wyświetlaniu błędów zgodności w konsoli podczas kompilacji.
    ostatnia 1 wersja Chrome
    ostatnia 1 wersja Firefoksa
    ostatnie 2 główne wersje Edge
    ostatnie 2 główne wersje Safari
    ostatnie 2 główne wersje iOS
    Firefox ESR
    nieios_saf 15.2-15.3
    niesafari 15.2-15.3
  7. Usuń domyślną zawartość w src/app/app.component.html plik. Zastąp go nową zawartością.
    <klasa div="zawartość">
    <klasa div="karta">
    <h2> Dom </h2>
    <p>
     Witam na mojej aplikacji Angular Electron!
    </p>
    </div>
    </div>
  8. Dodaj stylizację do treści w src/app/app.component.css plik.
    .zawartość {
     wysokość linii: 2rem;
    rozmiar czcionki: 1.2em;
     margines: 48px 10%;
     rodzina czcionek: Arial, bezszeryfowa
    }
    .karta {
    cień pudełka: 0 4px 8px 0 RGB(0, 0, 0, 0.2);
     szerokość: 85%;
     dopełnienie: 16px 48px;
     margines: 24px 0px;
     kolor tła: biały dym;
     rodzina czcionek: bezszeryfowa;
    }
  9. Dodaj ogólną stylizację do src/style.css plik, aby usunąć domyślne marginesy i dopełnienia.
    html {
     margines: 0;
     wypełnienie: 0;
    }

Jak uruchomić aplikację elektronową

Aby uruchomić aplikację w oknie, skonfiguruj polecenie w tablicy scripts pliku package.json. Następnie uruchom aplikację za pomocą polecenia w terminalu.

  1. W pakiet.json, wewnątrz tablicy scripts dodaj polecenie, aby zbudować aplikację Angular i uruchomić Electron. Upewnij się, że dodałeś przecinek po poprzednim wpisie w tablicy Scripts.
    "skrypty": {
     ...
    "elektron": "ng budować && elektron ."
    },
  2. Aby uruchomić nową aplikację Angular w oknie pulpitu, uruchom następujące polecenie w wierszu poleceń, w folderze głównym projektu:
    npm uruchomić elektron
  3. Poczekaj, aż aplikacja się skompiluje. Po zakończeniu zamiast otwierania aplikacji Angular w przeglądarce internetowej otworzy się okno pulpitu. W oknie pulpitu zostanie wyświetlona zawartość Twojej aplikacji Angular.
  4. Jeśli nadal chcesz wyświetlać swoją aplikację w przeglądarce internetowej, nadal możesz uruchomić polecenie ng serve.
    ng służyć
  5. Jeśli używasz ng służyć polecenie, zawartość Twojej aplikacji będzie nadal wyświetlana w przeglądarce internetowej pod adresem Lokalny Gospodarz: 4200.

Tworzenie aplikacji desktopowych za pomocą Electron

Możesz używać Electrona do tworzenia aplikacji komputerowych w systemach Windows, Mac i Linux. Domyślnie możesz przetestować aplikację Angular za pomocą przeglądarki internetowej za pomocą polecenia ng serve. Możesz skonfigurować aplikację Angular tak, aby otwierała się również w oknie pulpitu zamiast w przeglądarce internetowej.

Możesz to zrobić za pomocą pliku JavaScript. Będziesz także musiał skonfigurować pliki index.html i package.json. Ogólna aplikacja będzie nadal miała tę samą strukturę, co zwykła aplikacja Angular.

Jeśli chcesz dowiedzieć się więcej o tworzeniu aplikacji klasycznych, możesz również zapoznać się z aplikacjami Windows Forms. Aplikacje Windows Forms umożliwiają klikanie i przeciąganie elementów interfejsu użytkownika na kanwę, jednocześnie dodając dowolną logikę kodowania do plików C#.