Erstellen Sie einen Registerkartenbrowser mit Node-Webkit und AngularJs

' '' ' }; })

Was wir hier tun, ist eine wiederverwendbare Vorlage, die dynamisch mit Angular erstellt werden kann. Die TrustSrc () -Methode im Iframe SRC -Attribut wird in unserem Controller erstellt.

erklärt, wie Richtlinien in Angular funktionieren, liegt außerhalb des Rahmens dieses Artikels. Wenn Sie eine Auffrischung benötigen, sehen Sie sich an: eine praktische Anleitung zu AngularJS -Richtlinien.

Einige unterstützende Dienste

Angular verwendet Dienste für die Codeorganisation, die Wiederverwendbarkeit, die Kommunikation mit APIs und die Freigabe der Logik zwischen seinen Controllern. Wir müssen drei für uns selbst herstellen: eine (Aufforderung), um Eingabeaufforderungen zu verwenden, um URL-Eingänge und die anderen beiden (GUI und Fenster) zu erhalten, um mit NW.JS 'GUI- und Fenster-APIs zu kommunizieren, damit wir benutzerdefinierte Minimierungen, Vollbildscreen erstellen können und Schließen von Tasten:

.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();
});

der Controller endlich

Der Controller steuert genau wie der Name den Datenfluss in der Anwendung. Wir werden die folgenden Abhängigkeiten injizieren: $ scope, $ sce (ein Dienst, der strikte kontextbezogene Fluchtdienste für AngularJs, Eingabeaufforderung, Fenster (die beiden oben erstellten Dienste).

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

Wir werden zuerst eine Methode erstellen, um einer Ressourcen -URL zu vertrauen (die wir bereits in der Richtlinie implementiert haben):

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

Es wäre großartig, SitePoint unsere Startseite zu machen. Daher erstellen wir eine Reihe von Registerkarten, damit unsere Anweisung mit SitePoint -URL als erster Wert durchlaufen kann.

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

Wir können jetzt neue Registerkarten mit dem Eingabeaufforderungservice starten, um die URL vom Benutzer abzurufen. Wir setzen das aktive Attribut auf true, damit die neue Registerkarte Fokus empfängt:

$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!");
  });
};

Registerkarten Schließen umfasst die Verwendung der Funktion "Array#Splice", um Werte aus dem Array der Registerkarten zu entfernen, wie unten angezeigt:

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

Der Rest des Controllers wird verwendet, um den Steuerelementen Verhaltensweisen hinzuzufügen, die zum Minimieren, Aktivieren/Deaktivieren des Vollbildmodus und des Schließens des Fensters dienen:

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

Wir müssen diese Steuerelemente dem Markup noch hinzufügen, obwohl wir die Implementierung hinzugefügt haben. Lassen Sie uns dies jetzt tun (in App/Ansichten/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>

Und das war's! Sie können den Browser jetzt mit dem Grunzenbefehl vom Terminal starten.

Gebäude für Plattformen

Wenn Sie Ihre Meinung zum Beginn des Artikels zurückgeben, erwähnte ich, dass es möglich ist, eine NW.JS -App für alle wichtigen Betriebssysteme bereitzustellen. Es gibt umfangreiche Anweisungen dazu auf der NW.JS-Projektseite, oder Sie können die vorkonfigurierte Build-Aufgabe von Generator-Wean verwenden (die ich jetzt demonstrieren werde).

Ausführen von Grunn Build aus der Projektwurzel erstellt die App für das Betriebssystem, auf dem es aufgebaut wurde, während Grunt Build: Alle werden für alle Plattformen erstellen. Der Befehl Grunzen Build: {Plattform} (zB GrunT Build: Mac) erstellt für ein bestimmtes Betriebssystem. Mögliche Optionen sind Win, OSX, Linux32, Linux64. Weitere Informationen finden Sie unter Generator-Wean Readme.

beispielsweise, wenn Sie sich auf einem 64-Bit-Linux-System befinden und ausführen:

.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();
});

Dies generiert ein Builds/Test/Linux64 -Verzeichnis, das eine ausführbare Datei enthält, die dem Namen Ihres Projekts entspricht.

Schlussfolgerung

damit ich hoffe, nicht nur die Kraft von NW.js, sondern auch die Kraft von Webtechnologien bei der Erstellung nativer Anwendungen nachgewiesen zu haben. Wir haben nicht nur gelernt, wie man einen einheimischen Browser macht, sondern wir haben auch NW.JS, Yeoman und andere Werkzeuge im Spiel gesehen. Vergessen Sie nicht, der Quellcode für dieses Tutorial ist auf GitHub - ich ermutige Sie, ihn herunterzuladen und zu experimentieren.

Verwenden Sie NW.js? Denken Sie, dass es eine ernsthafte Herausforderung für native Anwendungen haben kann? Ich würde gerne Ihre Gedanken in den Kommentaren unten hören.

häufig gestellte Fragen (FAQs) zu Node-Webkit und AngularJS

Was ist der Hauptunterschied zwischen Node.js und AngularJs? Node.js ist eine Laufzeitumgebung, in der JavaScript auf der Serverseite ausgeführt werden kann, während AngularJS ein clientseitiges Framework ist, das zum Erstellen dynamischer Webanwendungen verwendet wird. Node.js ist ideal, um skalierbare und effiziente serverseitige Anwendungen zu erstellen, während AngularJs beim Erstellen von Einzel-Seiten-Anwendungen mit reichen, interaktiven Merkmalen hervorruft. 🎜> node.js und AngularJs können zusammen verwendet werden, um eine JavaScript-Anwendung in Vollstapel zu erstellen. Node.js kann verwendet werden, um den serverseitigen Teil der Anwendung zu erstellen, Aufgaben wie Datenbankvorgänge, Datei-E/A und Netzwerkkommunikation zu erstellen. AngularJs hingegen kann verwendet werden, um den clientseitigen Teil der Anwendung zu erstellen und eine dynamische und interaktive Benutzeroberfläche bereitzustellen. >

Knoten-Webkit ist ein Tool, mit dem Sie Desktop-Anwendungen mithilfe von Webtechnologien wie HTML, CSS und JavaScript erstellen können. Es kombiniert die Laufzeit von node.js mit dem Chromium -Webbrowser, sodass Sie Node.js -Module direkt im Browser verwenden können. Dies bedeutet, dass Sie AngularJS verwenden können, um die Benutzeroberfläche für Ihre Knoten-Webkit-Anwendung zu erstellen, genau wie Sie für eine reguläre Webanwendung.

Kann ich Desktop-Anwendungen mit JavaScript und Knoten-Webkit erstellen? Mit Node-Webkit können Sie Web-Technologien zum Erstellen von Desktop-Anwendungen verwenden. Dies bedeutet, dass Sie JavaScript zusammen mit HTML und CSS verwenden können, um die Benutzeroberfläche für Ihre Anwendung zu erstellen. Sie können auch Node.js -Module direkt im Browser verwenden, um auf leistungsstarke Funktionen wie Datei -E/A und Netzwerkkommunikation zugreifen zu können.

Der Hauptvorteil von Node.js gegenüber AngularJS ist die Fähigkeit, serverseitige Aufgaben wie Datenbankvorgänge, Datei-E/A und Netzwerkkommunikation zu erledigen. Dies macht es ideal, um skalierbare und effiziente serverseitige Anwendungen zu erstellen. Andererseits ist der Hauptvorteil von AngularJs gegenüber Node.js die Fähigkeit, dynamische und interaktive Benutzeroberflächen zu erstellen, wodurch es ideal für die Erstellung von Anwendungen im Einzelstellen ist.

Wie kann ich mit Knoten-Webkit beginnen

Um mit Node-Webkit zu beginnen, müssen Sie es zunächst herunterladen und installieren. Sobald Sie dies getan haben, können Sie ein neues Projekt erstellen, indem Sie eine Paket.json -Datei und eine Haupt -HTML -Datei erstellen. Die Datei package.json wird verwendet, um die Haupt-HTML-Datei und andere Einstellungen für Ihre Anwendung anzugeben, während in der Haupt-HTML-Datei die Benutzeroberfläche Ihrer Anwendung geschrieben wird. ?

Ja, Sie können andere JavaScript-Frameworks mit Node-Webkit verwenden. Mit Node-Webkit können Sie jedes JavaScript-Framework verwenden, das im Browser ausgeführt wird, einschließlich Frameworks wie React, Vue.js und Ember.js. Dies gibt Ihnen viel Flexibilität, wenn es darum geht, die richtigen Tools für Ihre Anwendung auszuwählen. Desktop -Anwendungen, die Web -Technologien verwenden müssen. Dies beinhaltet Anwendungen wie Textredakteure, Musikspieler und Fotoredakteure. Es wird auch verwendet, um Anwendungen zu erstellen, die dank der Integration mit node.js.

Wie ist Node-Webkit mit anderen Tools zum Erstellen von Desktop-Anwendungen verglichen?

knoten-webkit vergleichbar mit anderen Tools zum Erstellen von Desktop-Anwendungen. Der Hauptvorteil ist die Fähigkeit, Web -Technologien zu nutzen, was es den Webentwicklern erleichtert, zur Entwicklung der Desktop -Anwendungen zu wechseln. Es integriert sich auch in node.js und bietet ihm Zugriff auf leistungsstarke Funktionen wie Datei -E/A und Netzwerkkommunikation.

Welche Herausforderungen stellen ich möglicherweise mit Node-Webkit und AngularJs zusammen? Neben Teile Ihrer Bewerbung. Dies kann besonders schwierig sein, wenn Sie mit der Entwicklung von JavaScript-Entwicklung nicht vertraut sind. Mit sorgfältiger Planung und gutem Gebrauch von Node.js und AngularJS können Sie diese Herausforderung überwinden.

Das obige ist der detaillierte Inhalt vonErstellen Sie einen Registerkartenbrowser mit Node-Webkit und AngularJs. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!