Buat penyemak imbas tab menggunakan nod-webkit dan angularjs

' '' }; })

Apa yang kita lakukan di sini ialah mewujudkan templat yang boleh diguna semula yang boleh dibuat secara dinamik menggunakan Angular. Kaedah TrustSrc () pada atribut iframe Src akan dibuat dalam pengawal kami.

menerangkan bagaimana arahan berfungsi dalam sudut adalah di luar skop artikel ini. Jika anda memerlukan penyegaran, lihat: Panduan Praktikal untuk Arahan AngularJS.

Beberapa Perkhidmatan Sokongan

Perkhidmatan menggunakan sudut untuk organisasi kod, kebolehgunaan semula, berkomunikasi dengan API dan perkongsian logik antara pengawalnya. Kita perlu membuat tiga untuk diri kita sendiri: satu (segera) untuk menggunakan arahan untuk mendapatkan input URL dan dua yang lain (GUI dan tetingkap) untuk berkomunikasi dengan API GUI dan Window NW.JS supaya kita dapat membuat Custom Minimize, skrin penuh dan butang tutup:

.factory("prompt", function ($window, $q) {
  function prompt(message, defaultValue) {
    var defer = $q.defer();
    var response = $window.prompt(message, defaultValue);
    if (response === null) {
      defer.reject();
    } else {
      defer.resolve(response);
    }
    return (defer.promise);
  }
  return (prompt);
})
.factory('GUI', function () {
  return require('nw.gui');
})
.factory('Window', function (GUI) {
  return GUI.Window.get();
});

pengawal akhirnya

Pengawal, sama seperti namanya, akan mengawal aliran data dalam aplikasi. Kami akan menyuntik kebergantungan berikut: $ skop, $ SCE (perkhidmatan yang menyediakan perkhidmatan melarikan diri kontekstual yang ketat ke AngularJS), prompt, tetingkap (kedua -dua perkhidmatan yang kami buat di atas).

.controller('main', function ($scope, $sce, prompt, Window) {
  //implementation here
})

kami akan mula membuat kaedah untuk mempercayai URL sumber (yang telah kami laksanakan dalam Arahan):

$scope.trustSrc = function (src) {
  return $sce.trustAsResourceUrl(src);
}

Adalah hebat untuk membuat laman web kami, jadi kami akan membuat pelbagai tab untuk arahan kami untuk melingkari dengan URL SitePoint sebagai nilai pertama.

$scope.tabs = [
  {
    url: 'https://www.sitepoint.com/'
  }
];

Kami kini boleh melancarkan tab baru menggunakan perkhidmatan segera untuk mendapatkan URL dari pengguna. Kami menetapkan atribut aktif kepada benar, supaya tab baru menerima fokus:

$scope.newTab = function () {
  prompt("Please enter a url", "http://www.sitepoint.com")
  .then(function (url) {
    var tab = {url: url, active:true}
    $scope.tabs.push(tab);
  },
  function () {
    alert("Error opening site!");
  });
};

Tab penutupan melibatkan menggunakan fungsi#Splice Array untuk menghapuskan nilai dari array tab seperti yang dilihat di bawah:

$scope.closeTab = function (index) {
  $scope.tabs.splice(index, 1);
};

selebihnya pengawal digunakan untuk menambah tingkah laku kepada kawalan yang meminimumkan, membolehkan/melumpuhkan skrin penuh dan menutup tetingkap:

$scope.minimize = function () {
  Window.minimize();
};
$scope.toggleKioskMode = function () {
  Window.toggleKioskMode();
};
$scope.close = function () {
  Window.close();
};

kami masih belum menambah kawalan ini ke markup walaupun kami telah menambah pelaksanaannya. Oleh itu marilah kita melakukannya sekarang (dalam app/paparan/index.ejs):

<span><span><span><div</span> class<span>="controls"</span>></span>
</span>   <span><span><span><i</span> class<span>="fa fa-plus"</span> tooltip-placement<span>="bottom"</span>
</span></span><span>   <span>uib-tooltip<span>="New tab"</span> ng-click<span>="newTab()"</span>></span><span><span></i</span>></span>
</span>   <span><span><span><i</span> class<span>="fa fa-minus"</span> ng-click<span>="minimize()"</span>></span><span><span></i</span>></span>
</span>   <span><span><span><i</span> class<span>="fa fa-square-o"</span> ng-click<span>="toggleKioskMode()"</span>></span><span><span></i</span>></span>
</span>   <span><span><span><i</span> class<span>="fa fa-times"</span> ng-click<span>="close()"</span>></span><span><span></i</span>></span>
</span><span><span><span><div</span>></span>
</span>

Dan itu sahaja! Anda kini boleh melancarkan penyemak imbas menggunakan perintah grunt dari terminal.

Bangunan untuk Platform

Jika anda membuang minda anda kembali ke permulaan artikel, saya menyebutkan bahawa mungkin untuk menggunakan aplikasi NW.JS pada semua sistem operasi utama. Terdapat arahan yang luas tentang bagaimana untuk melakukan ini di halaman projek NW.JS, atau anda boleh menggunakan tugas membina pra-konfigurasi Generator-Wean (yang akan saya tunjukkan sekarang).

Running Grunt Build dari Projek Root akan membina aplikasi untuk OS yang dibina, sedangkan Grunt Build: semua akan membina untuk semua platform. Perintah Grunt Build: {Platform} (contohnya Grunt Build: Mac) akan dibina untuk OS tertentu. Pilihan yang mungkin ialah menang, OSX, Linux32, Linux64. Untuk maklumat lanjut, sila rujuk kepada Generator-Wean Readme.

sebagai contoh, jika anda berada di sistem Linux 64-bit dan lari:

.factory("prompt", function ($window, $q) {
  function prompt(message, defaultValue) {
    var defer = $q.defer();
    var response = $window.prompt(message, defaultValue);
    if (response === null) {
      defer.reject();
    } else {
      defer.resolve(response);
    }
    return (defer.promise);
  }
  return (prompt);
})
.factory('GUI', function () {
  return require('nw.gui');
})
.factory('Window', function (GUI) {
  return GUI.Window.get();
});

Ini akan menjana direktori binaan/ujian/linux64 yang mengandungi executable, sepadan dengan nama projek anda.

Kesimpulan

dengan itu saya berharap dapat menunjukkan bukan hanya kuasa NW.JS, tetapi kuasa teknologi web dalam membuat aplikasi asli. Kami tidak hanya belajar bagaimana membuat pelayar asli, tetapi kami juga melihat NW.JS, Yeoman dan alat lain dalam permainan. Jangan lupa, kod sumber untuk tutorial ini adalah di GitHub - saya menggalakkan anda memuat turun dan eksperimen.

adakah anda menggunakan nw.js? Adakah anda berfikir bahawa ia boleh menimbulkan cabaran yang serius kepada aplikasi asli? Saya suka mendengar pendapat anda dalam komen di bawah.

Soalan Lazim (Soalan Lazim) Mengenai Node-Webkit dan AngularJS

Apakah perbezaan utama antara node.js dan angularjs?

node.js dan angularjs adalah teknologi berasaskan JavaScript, tetapi mereka melayani tujuan yang berbeza. Node.js adalah persekitaran runtime yang membolehkan JavaScript dijalankan di sisi pelayan, manakala AngularJS adalah rangka kerja sisi klien yang digunakan untuk membina aplikasi web dinamik. Node.js sangat sesuai untuk membuat aplikasi sisi pelayan yang berskala dan cekap, sementara AngularJS cemerlang dalam membuat aplikasi satu halaman dengan ciri-ciri yang kaya dan interaktif. 🎜> node.js dan angularjs boleh digunakan bersama-sama untuk membuat aplikasi JavaScript penuh. Node.js boleh digunakan untuk membuat bahagian pelayan aplikasi, tugas pengendalian seperti operasi pangkalan data, fail I/O, dan komunikasi rangkaian. Sebaliknya, AngularJs boleh digunakan untuk membuat bahagian sisi klien aplikasi, menyediakan antara muka pengguna yang dinamik dan interaktif. >

Node-WebKit adalah alat yang membolehkan anda membuat aplikasi desktop menggunakan teknologi web seperti HTML, CSS, dan JavaScript. Ia menggabungkan runtime Node.js dengan penyemak imbas web Chromium, yang membolehkan anda menggunakan modul Node.js secara langsung dalam penyemak imbas. Ini bermakna anda boleh menggunakan AngularJS untuk membuat antara muka pengguna untuk aplikasi Node-WebKit anda, sama seperti anda untuk aplikasi web biasa.

Bolehkah saya membina aplikasi desktop menggunakan JavaScript dan Node-WebKit?

Ya, anda boleh membina aplikasi desktop menggunakan JavaScript dan Node-Webkit. Node-WebKit membolehkan anda menggunakan teknologi web untuk membuat aplikasi desktop, yang bermaksud anda boleh menggunakan JavaScript, bersama dengan HTML dan CSS, untuk membuat antara muka pengguna untuk aplikasi anda. Anda juga boleh menggunakan modul Node.js secara langsung dalam penyemak imbas, memberikan anda akses kepada ciri -ciri yang kuat seperti fail I/O dan komunikasi rangkaian.

Kelebihan utama node.js ke atas AngularJS adalah keupayaannya untuk mengendalikan tugas-tugas pelayan, seperti operasi pangkalan data, fail I/O, dan komunikasi rangkaian. Ini menjadikannya ideal untuk membuat aplikasi sisi pelayan berskala dan cekap. Sebaliknya, kelebihan utama angularjs ke atas node.js adalah keupayaannya untuk mewujudkan antara muka pengguna yang dinamik dan interaktif, menjadikannya sesuai untuk membuat aplikasi satu halaman. ?

Untuk memulakan dengan Node-Webkit, anda perlu memuat turun dan memasangnya terlebih dahulu. Sebaik sahaja anda melakukannya, anda boleh membuat projek baru dengan membuat fail Package.json dan fail HTML utama. Fail pakej.json digunakan untuk menentukan fail HTML utama dan tetapan lain untuk aplikasi anda, sementara fail HTML utama adalah di mana anda menulis antara muka pengguna aplikasi anda. ?

Ya, anda boleh menggunakan rangka kerja JavaScript lain dengan nod-webkit. Node-WebKit membolehkan anda menggunakan mana-mana rangka kerja JavaScript yang boleh dijalankan dalam penyemak imbas, termasuk rangka kerja seperti React, Vue.js, dan Ember.js. Ini memberi anda banyak fleksibiliti ketika memilih alat yang sesuai untuk aplikasi anda. Aplikasi desktop yang perlu menggunakan teknologi web. Ini termasuk aplikasi seperti editor teks, pemain muzik, dan editor foto. Ia juga digunakan untuk membuat aplikasi yang perlu berinteraksi dengan sistem fail atau rangkaian, terima kasih kepada integrasinya dengan node.js.

Bagaimana node-webkit berbanding dengan alat lain untuk membuat aplikasi desktop?

Node-WebKit membandingkan dengan alat lain untuk membuat aplikasi desktop. Kelebihan utamanya ialah keupayaannya untuk menggunakan teknologi web, yang menjadikannya lebih mudah bagi pemaju web untuk beralih ke pembangunan aplikasi desktop. Ia juga mengintegrasikan dengan Node.js, memberikan akses kepada ciri -ciri yang kuat seperti fail I/O dan komunikasi rangkaian.

Apakah beberapa cabaran yang mungkin saya hadapi ketika menggunakan nod-webkit dan angularjs bersama-sama? bahagian sampingan permohonan anda. Ini boleh menjadi sangat rumit jika anda tidak biasa dengan pembangunan JavaScript penuh. Walau bagaimanapun, dengan perancangan yang teliti dan penggunaan node.js dan angularjs yang baik, anda dapat mengatasi cabaran ini.

Atas ialah kandungan terperinci Buat penyemak imbas tab menggunakan nod-webkit dan angularjs. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!