Создавайте настольные приложения с помощью Angular

Если вы можете создать веб-сайт, вы можете создать настольное приложение.

Это правда, если вы знаете, как писать код Javascript, вы можете создать настольное приложение, которое выглядит и ведет себя как нативное. Мало того, вы также можете привнести мощь Angular в мир настольных приложений, чтобы ваш IU выглядел сногсшибательно 😍, хватит болтать, идите, выпейте чашечку кофе и давайте начнем.

Что мы будем делать?!!

Мы собираемся создать базовое настольное приложение, используя Электрон и Угловой.

Прежде чем мы начнем, я ожидаю, что у вас есть базовые знания о NodeJs и Angular.

Настроить угловой

Если у вас еще не установлен Angular cli, выполните следующую команду, чтобы установить его.

$ npm install -g @angular/cli

Теперь давайте запустим новое приложение Angular.

$ ng new angular-electron

Он спросит вас о компиляторе стилей, который вы хотите использовать, и если вы хотите использовать маршрутизатор Angular и т. д., эта конфигурация не имеет значения, выберите все, что хотите.

Теперь вы можете увидеть свое приложение в действии, запустив…

$ cd angular-electron
$ ng serve

Затем откройте браузер по адресу http://localhost:4200/, впрочем, это еще не самое смешное, идем дальше.

Нам нужно изменить файл index.html в папке src нашего проекта, добавить точку к базовому тегу, чтобы наше приложение могло найти статические файлы. не пропустите этот шаг, это очень важно.

<base href="./">

Настроить Электрон

Теперь мы собираемся добавить Электрон в наше приложение.

$ npm install --save-dev electron

И нам также понадобятся некоторые зависимости.

$ npm install --save-dev app-root-path

Теперь давайте создадим новую папку для нашего Электронного приложения.

$ mkdir bin && cd bin && touch main.ts

Как видите, мы создали папку bin с файлом main.ts в ней, и поэтому мы создали основной файл с расширением ts и не js в том, что мы уже используем Typescript для приложения Angular, так почему бы не использовать Typescript для всего проекта ?!!

Теперь давайте добавим немного кода в наш файл main.ts (наконец мы пишем код 😅)

Приведенный выше код точно такой же, как указан на официальном сайте, но в синтаксисе Typescript, также обратите внимание, что функция win.loadFile ссылается на файл записи Angular приложение мы его еще не построили.

Хорошо, нам нужно проверить, работает ли то, что мы делаем, верно!!

Давайте добавим скрипт в наш файл package.json, чтобы мы могли собрать и запустить это приложение.

"main" : "bin/main.js",
"scripts": {
 ...
   “electron”: “tsc bin/main.ts && ng build && electron bin/main.js”
}

А теперь давайте посмотрим на это в действии.

$ npm run electron

На данный момент вы должны увидеть запущенное приложение с логотипом angular, пока все хорошо 😉.

Хорошо, теперь наше приложение запущено, но кто может использовать Электронный API в самом приложении Angular?!!

Не паникуйте, это так же просто, как бежать…

$ npm install --save-dev ngx-electron

Получите доступ к Электронному API изприложения Angular.

Мы только что установили ngx-electron, который значительно облегчит нам жизнь, так что давайте посмотрим, как его использовать.

Нам нужно импортировать этот модуль, как и любой другой модуль, который мы использовали с Angular, внутри файла app.module.ts.

import { NgxElectronModule } from 'ngx-electron';
@NgModule({
imports: [
  ...
  NgxElectronModule
]
})
export class AppModule {}

Вот и все, теперь мы можем использовать его в наших компонентах, например…

import { ElectronService } from 'ngx-electron';
export class AppComponent {
   constructor(private _electronService: ElectronService) {
   // now we have access to electron api through this service
   }
}

Давайте посмотрим, действительно ли у нас есть доступ к Электронному API.

Замените содержимое файла app.component.ts следующим.

И замените содержимое файла app.component.html следующим

Так что ты думаешь? не думайте много давайте посмотрим в действии 😅.

$ npm run electron

На данный момент вы должны увидеть приложение в рабочем состоянии с версиями кода, хрома и электрона, которые мы используем, хммм, мы сделали это 😉.

Вывод

Создание настольных приложений не так сложно, и мы можем использовать какой-нибудь мощный инструмент, такой как node, angular, electronic и typescript, чтобы делать потрясающую работу, и знаете что? даже если вы веб-разработчик, неплохо попробовать новые технологии в свободное время, я почти уверен, что вы узнаете что-то новое, попробовав новые технологии 😉.

Я могу добавить новый пост, чтобы написать модульный тест для нашего приложения, если у меня будет свободное время.

И если вы застряли, вы всегда можете обратиться к репозиторию Github этого приложения.