Electron, Windows, Mac ve Linux için masaüstü uygulamaları oluşturmanıza olanak tanır. Electron kullanarak bir uygulama oluşturduğunuzda, uygulamayı bir masaüstü uygulama penceresinden önizleyebilir ve çalıştırabilirsiniz.

Bir Angular uygulamasını normal web tarayıcısı yerine bir masaüstü penceresinde başlatılacak şekilde yapılandırmak için Electron'u kullanabilirsiniz. Bunu, uygulamanın kendi içindeki bir JavaScript dosyası kullanarak yapabilirsiniz.

Electron'u yapılandırdıktan sonra, normal bir Angular uygulamasında yaptığınız gibi geliştirmeye devam edebilirsiniz. Uygulamanın ana bölümleri yine aynı standart Açısal yapıyı izleyecektir.

Uygulamanızın Bir Parçası Olarak Electron Nasıl Kurulur

Electron'u kullanmak için node.js'yi indirip yüklemeniz ve uygulamanıza Electron eklemek için npm kurulumunu kullanmanız gerekir.

  1. İndir ve Yükle düğüm.js. Sürümü kontrol ederek doğru şekilde kurduğunuzu onaylayabilirsiniz:
    -v düğümü
    Düğüm ayrıca şunları içerir: npm, JavaScript paket yöneticisi. Npm sürümünü kontrol ederek npm'nin kurulu olduğunu onaylayabilirsiniz:
    npm -v
    2. instagram viewer
  2. kullanarak yeni bir Angular uygulaması oluşturun. yeni emretmek. Bu, gerekli tüm bilgileri içeren bir klasör oluşturacaktır. Angular projesi için gerekli dosyalar çalışmak.
    ng yeni elektron uygulaması
  3. Uygulamanızın kök klasöründe şunu kullanın: npm Electron'u yüklemek için.
    npm Yüklemek--save-dev elektron
  4. Bu, uygulamanın node_modules klasöründe Electron için yeni bir klasör oluşturacaktır.
  5. Electron'u bilgisayarınıza global olarak da yükleyebilirsiniz.
    npm Yüklemek -g elektron

Açısal Elektron Uygulamasının Dosya Yapısı

Electron, masaüstü penceresini oluşturmak ve yönetmek için bir ana JavaScript dosyasına ihtiyaç duyacaktır. Bu pencere, uygulamanızın içeriğini içinde gösterecektir. JavaScript dosyası, kullanıcının pencereyi kapatması gibi meydana gelebilecek diğer olayları da içerecektir.

Çalışma zamanında, görüntülenen içerik index.html dosyasından gelecektir. Varsayılan olarak, index.html dosyasını içinde bulabilirsiniz. kaynak klasör ve çalışma zamanında bunun yerleşik bir kopyası otomatik olarak içinde oluşturulur. uzak dosya.

index.html dosyası genellikle şöyle görünür:

<!doctype html>
<html dili="tr">
<kafa>
<meta karakter kümesi="utf-8">
<Başlık> ElektronApp </title>
<temel href="./">
<meta adı="görüş alanı" içerik="genişlik=cihaz genişliği, başlangıç ​​ölçeği=1">
<bağlantı rel="simge" tip="görüntü/x simgesi" href="favicon.ico">
</head>
<gövde>
<uygulama kökü></app-root>
</body>
</html>

Gövde etiketinin içinde bir etiket. Bu, Angular uygulaması için ana uygulama bileşenini gösterecektir. Ana uygulama bileşenini şurada bulabilirsiniz: kaynak/uygulama dosya.

Masaüstü Penceresinde Açısal Bir Uygulama Açmak İçin Elektron Nasıl Kullanılır

main.js dosyasını oluşturun ve uygulamanın içeriğini bir masaüstü penceresinde açacak şekilde yapılandırın.

  1. adlı projenizin kökünde bir dosya oluşturun. ana.js. Bu dosyada, uygulama penceresini oluşturmak için kullanabilmeniz için Electron'u başlatın.
    const { uygulama, BrowserWindow } = gerekmek('elektron');
  2. Belirli bir genişlik ve yükseklikte yeni bir masaüstü penceresi oluşturun. Pencerede görüntülenecek içerik olarak dizin dosyasını yükleyin. Dizin dosyasının yolunun uygulamanızın adıyla eşleştiğinden emin olun. Örneğin, uygulamanıza "elektron-app" adını verdiyseniz, yol "dist/elektron-app/index.html" olacaktır.
    işlevCreatePencere() {
     kazanmak = yeni Tarayıcı penceresi({Genişlik: 800, yükseklik: 800});
     win.loadDosya('dist/elektron-app/index.html');
    }
  3. Uygulama hazır olduğunda createWindow() işlevini çağırın. Bu, uygulamanız için uygulama penceresini oluşturacaktır.
    app.WhenReady().then(() => {
     pencere oluştur()
    })
  4. İçinde kaynak/index.html dosyada, temel etiketi, href niteliğini "./" olarak değiştirin.
    <temel href="./">
  5. İçinde paket.json, ekle ana alanına girin ve main.js dosyasını değer olarak ekleyin. Bu, uygulamanın giriş noktası olacaktır, böylece uygulama, uygulamayı başlatırken main.js dosyasını çalıştırır.
    {
    "isim": "elektron uygulaması",
    "versiyon": "0.0.0",
    "ana": "ana.js",
     ...
    }
  6. İçinde .browserslistrc dosya, iOS safari sürüm 15.2-15.3'ü kaldırmak için listeyi değiştirin. Bu, derleme sırasında uyumluluk hatalarının konsolda gösterilmesini önleyecektir.
    son 1 Chrome sürümü
    son 1 Firefox sürümü
    son 2 Edge ana sürümü
    son 2 Safari ana sürümü
    son 2 iOS ana sürümü
    Firefox ESR'si
    olumsuzlukios_saf 15.2-15.3
    olumsuzluksafari 15.2-15.3
  7. içindeki varsayılan içeriği silin. src/app/app.component.html dosya. Bazı yeni içerikle değiştirin.
    <div sınıfı="içerik">
    <div sınıfı="kart">
    <h2> Ev </h2>
    <p>
     Açısal Elektron uygulamama hoş geldiniz!
    </p>
    </div>
    </div>
  8. içindeki içerik için biraz stil ekleyin. src/app/app.component.css dosya.
    .içerik {
     satır yüksekliği: 2rem;
    yazı Boyutu: 1.2em;
     kenar boşluğu: 48 piksel %10;
     yazı tipi ailesi: Arial, sans-serif
    }
    .kart {
    kutu-gölge: 0 4piksel 8piksel 0 rgba(0, 0, 0, 0.2);
     genişlik: %85;
     dolgu: 16 piksel 48 piksel;
     kenar boşluğu: 24 piksel 0 piksel;
     arka plan rengi: beyaz duman;
     yazı tipi ailesi: sans-serif;
    }
  9. Bazı genel stiller ekleyin kaynak/styles.css varsayılan kenar boşluklarını ve dolguları kaldırmak için dosya.
    html {
     kenar boşluğu: 0;
     dolgu: 0;
    }

Elektron Uygulaması Nasıl Çalıştırılır

Uygulamanızı bir pencerede çalıştırmak için package.json dosyasının komut dizileri dizisinde bir komut yapılandırın. Ardından, terminaldeki komutu kullanarak uygulamanızı çalıştırın.

  1. İçinde paket.json, scripts dizisinin içine, Angular uygulamasını oluşturmak ve Electron'u çalıştırmak için bir komut ekleyin. Scripts dizisindeki önceki girişten sonra virgül eklediğinizden emin olun.
    "Kodlar": {
     ...
    "elektron": "inşa && elektron."
    },
  2. Yeni Angular uygulamanızı bir masaüstü penceresinde çalıştırmak için projenizin kök klasöründeki komut satırında aşağıdakini çalıştırın:
    npm çalışan elektron
  3. Uygulamanızın derlenmesini bekleyin. Tamamlandığında, Angular uygulamanızın web tarayıcısında açılması yerine, bunun yerine bir masaüstü penceresi açılacaktır. Masaüstü penceresi, Angular uygulamanızın içeriğini gösterecektir.
  4. Uygulamanızı hala web tarayıcısında görüntülemek istiyorsanız, yine de ng serve komutunu çalıştırabilirsiniz.
    hizmet etmek
  5. kullanıyorsanız hizmet etmek komut, uygulamanızın içeriği hala şu adresteki bir web tarayıcısında görüntülenecektir. yerel ana bilgisayar: 4200.

Electron ile Masaüstü Uygulamaları Oluşturma

Electron'u Windows, Mac ve Linux'ta masaüstü uygulamaları oluşturmak için kullanabilirsiniz. Varsayılan olarak, bir Angular uygulamasını ng serve komutu aracılığıyla bir web tarayıcısı kullanarak test edebilirsiniz. Angular uygulamanızı bir web tarayıcısı yerine bir masaüstü penceresinde de açılacak şekilde yapılandırabilirsiniz.

Bunu bir JavaScript dosyası kullanarak yapabilirsiniz. Ayrıca index.html ve package.json dosyalarınızı da yapılandırmanız gerekecektir. Genel uygulama yine de normal bir Angular uygulamasıyla aynı yapıyı izleyecektir.

Masaüstü uygulamaları oluşturma hakkında daha fazla bilgi edinmek istiyorsanız Windows Forms uygulamalarını da keşfedebilirsiniz. Windows Forms uygulamaları, C# dosyalarına herhangi bir kodlama mantığı eklerken UI öğelerini tıklayıp bir tuval üzerine sürüklemenize olanak tanır.