Елецтрон вам омогућава да правите десктоп апликације за Виндовс, Мац и Линук. Када направите апликацију користећи Елецтрон, можете да прегледате и покренете апликацију кроз прозор десктоп апликације.

Можете да користите Елецтрон да конфигуришете Ангулар апликацију за покретање на прозору радне површине, уместо уобичајеног веб претраживача. То можете учинити помоћу ЈаваСцрипт датотеке у самој апликацији.

Када конфигуришете Елецтрон, можете да наставите са развојем као што бисте радили на обичној Ангулар апликацији. Главни делови апликације ће и даље пратити исту стандардну Ангулар структуру.

Како инсталирати Елецтрон као део ваше апликације

Да бисте користили Елецтрон, морате да преузмете и инсталирате ноде.јс и користите нпм инсталл да додате Елецтрон у своју апликацију.

  1. Преузети и инсталирати ноде.јс. Можете потврдити да сте га правилно инсталирали тако што ћете проверити верзију:
    чвор -в
    Чвор такође укључује нпм, ЈаваСцрипт менаџер пакета. Можете потврдити да имате инсталиран нпм тако што ћете проверити верзију нпм-а:
    нпм -в
  2. Креирајте нову Ангулар апликацију користећи нг нев команда. Ово ће креирати фасциклу која садржи све што је потребно датотеке потребне за Ангулар пројекат на посао.
    нг Нова електрон-апп
  3. У основној фасцикли ваше апликације користите нпм да инсталирам Елецтрон.
    нпм инсталирај--саве-дев електрон
  4. Ово ће креирати нову фасциклу за Елецтрон у фасцикли ноде_модулес апликације.
  5. Такође можете глобално инсталирати Елецтрон на свој рачунар.
    нпм инсталирај -г електрон

Структура датотеке апликације Ангулар Елецтрон

Елецтрон ће захтевати главну ЈаваСцрипт датотеку за креирање и управљање прозором радне површине. Овај прозор ће приказати садржај ваше апликације у њему. ЈаваСцрипт датотека ће такође садржати друге догађаје који се могу десити, на пример, ако корисник затвори прозор.

У току извршавања, приказани садржај долази из датотеке индек.хтмл. Подразумевано, можете пронаћи датотеку индек.хтмл унутар срц фолдер, а у току рада његова уграђена копија се аутоматски креира унутар дист фолдер.

Датотека индек.хтмл обично изгледа овако:

<!доцтипе хтмл>
<хтмл ланг="ен">
<глава>
<мета цхарсет="утф-8">
<наслов> ЕлецтронАпп </title>
<басе хреф="./">
<мета наме="виевпорт" цонтент="видтх=девице-видтх, инитиал-сцале=1">
<линк рел="икона" типе="слика/к-икона" хреф="фавицон.ицо">
</head>
<тело>
<апп-роот></app-root>
</body>
</html>

Унутар ознаке тела је таг. Ово ће приказати главну компоненту апликације за Ангулар апликацију. Главну компоненту апликације можете пронаћи у срц/апп фолдер.

Како користити Елецтрон да отворите угаону апликацију у прозору радне површине

Креирајте датотеку маин.јс и конфигуришите је да отвори садржај апликације унутар прозора радне површине.

  1. Направите датотеку у корену вашег пројекта под називом маин.јс. У овој датотеци иницијализујте Елецтрон тако да можете да га користите за креирање прозора апликације.
    конст { апп, БровсерВиндов } = захтевају('електрон');
  2. Направите нови прозор радне површине одређене ширине и висине. Учитајте датотеку индекса као садржај за приказ у прозору. Уверите се да путања до датотеке индекса одговара имену ваше апликације. На пример, ако сте својој апликацији дали назив „елецтрон-апп“, путања ће бити „дист/елецтрон-апп/индек.хтмл“.
    функцијацреатеВиндов() {
     победа = Нова Прозор претраживача({ширина: 800, висина: 800});
     вин.лоадФиле('дист/елецтрон-апп/индек.хтмл');
    }
  3. Када је апликација спремна, позовите функцију цреатеВиндов(). Ово ће креирати прозор апликације за вашу апликацију.
    апп.вхенРеади().тхен(() => {
     цреатеВиндов()
    })
  4. У срц/индек.хтмл фајл, у база таг, промените атрибут хреф у "./".
    <басе хреф="./">
  5. У пацкаге.јсон, додати а главни поље и укључите датотеку маин.јс као вредност. Ово ће бити улазна тачка за апликацију, тако да апликација покреће датотеку маин.јс док покреће апликацију.
    {
    "име": "електрон-апп",
    "верзија": "0.0.0",
    "главни": "маин.јс",
     ...
    }
  6. У .бровсерслистрц датотеку, измените листу да бисте уклонили иОС сафари верзије 15.2-15.3. Ово ће спречити да се грешке компатибилности прикажу на конзоли приликом компајлирања.
    последња 1 верзија Цхроме-а
    последња 1 верзија Фирефок-а
    последње 2 Едге главне верзије
    последње 2 главне верзије Сафарија
    последње 2 главне верзије иОС-а
    Фирефок ЕСР
    неиос_саф 15.2-15.3
    несафари 15.2-15.3
  7. Избришите подразумевани садржај у срц/апп/апп.цомпонент.хтмл фајл. Замените га неким новим садржајем.
    <див цласс="садржаја">
    <див цласс="картица">
    <х2> Кућа </h2>
    <стр>
     Добродошли у моју апликацију Ангулар Елецтрон!
    </п>
    </div>
    </div>
  8. Додајте мало стила за садржај у срц/апп/апп.цомпонент.цсс фајл.
    .садржај {
     лине-хеигхт: 2рем;
    фонт-сизе: 1.2ем;
     маргина: 48пк 10%;
     фонт-фамили: Ариал, санс-сериф
    }
    .картица {
    кутија-сенка: 0 4пк 8пк 0 ргба(0, 0, 0, 0.2);
     ширина: 85%;
     паддинг: 16пк 48пк;
     маргина: 24пк 0пк;
     боја позадине: бели дим;
     фонт-фамили: санс-сериф;
    }
  9. Додајте мало општег стила срц/стилес.цсс датотеку да бисте уклонили подразумеване маргине и допуне.
    хтмл {
     маргина: 0;
     паддинг: 0;
    }

Како покренути електронску апликацију

Да бисте покренули апликацију у прозору, конфигуришите команду у низу скрипти пакета.јсон. Затим покрените своју апликацију користећи команду у терминалу.

  1. У пацкаге.јсон, унутар низа скрипти, додајте команду за прављење апликације Ангулар и покретање Елецтрон-а. Уверите се да сте додали зарез после претходног уноса у низ Сцриптс.
    "скрипте": {
     ...
    "електрон": "нг буилд && електрон ."
    },
  2. Да бисте покренули своју нову Ангулар апликацију у прозору радне површине, покрените следеће у командној линији, у основној фасцикли вашег пројекта:
    нпм покренути електрон
  3. Сачекајте да се ваша апликација компајлира. Када се заврши, уместо да се ваша Ангулар апликација отвори у веб претраживачу, отвориће се прозор радне површине. Прозор радне површине ће приказати садржај ваше Ангулар апликације.
  4. Ако и даље желите да видите своју апликацију у веб претраживачу, још увек можете да покренете команду нг серве.
    нг служе
  5. Ако користите нг служе команде, садржај ваше апликације ће се и даље приказивати у веб прегледачу на локални хост: 4200.

Израда десктоп апликација са Елецтроном

Можете да користите Елецтрон за прављење десктоп апликација на Виндовс, Мац и Линук. Подразумевано, можете тестирати Ангулар апликацију користећи веб прегледач преко команде нг серве. Можете да конфигуришете своју Ангулар апликацију да се отвара и у прозору радне површине уместо у веб претраживачу.

То можете учинити помоћу ЈаваСцрипт датотеке. Такође ћете морати да конфигуришете своје датотеке индек.хтмл и пацкаге.јсон. Целокупна апликација ће и даље пратити исту структуру као и обична Ангулар апликација.

Ако желите да сазнате више о томе како да направите апликације за десктоп рачунаре, можете да истражите и Виндовс Формс апликације. Виндовс Формс апликације вам омогућавају да кликнете и превучете елементе корисничког интерфејса на платно, док истовремено додајете било коју логику кодирања у Ц# датотеке.