Créez un navigateur à onglets à l'aide de Node-Webkit et AngularJS

iframe> ' ' uib-tab>' }; })

Ce que nous faisons ici, c'est de créer un modèle réutilisable qui peut être créé dynamiquement en utilisant Angular. La méthode TrustSrc () sur l'attribut src iframe sera créée dans notre contrôleur.

Expliquer comment les directives fonctionnent dans Angular dépasse le cadre de cet article. Si vous avez besoin d'un rafraîchissement, consultez: un guide pratique des directives AngularJS.

certains services de support

Angular utilise des services pour l'organisation du code, la réutilisabilité, la communication avec les API et le partage de la logique entre ses contrôleurs. Nous devons en faire trois pour nous-mêmes: l'un (invite) à utiliser des invites pour obtenir des entrées d'URL et les deux autres (GUI et fenêtre) pour communiquer avec les API GUI et Window et fermer les boutons:

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

le contrôleur enfin

Le contrôleur, tout comme son nom, contrôlera le flux de données dans l'application. Nous injecterons les dépendances suivantes: $ Scope, $ sce (un service qui fournit des services d'échappement contextuels stricts à AngularJS), invite, fenêtre (les deux services que nous avons créés ci-dessus).

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

Nous allons d'abord créer une méthode pour faire confiance à une URL de ressource (que nous avons déjà implémentée dans la directive):

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

Ce serait génial de faire de SitePoint notre page d'accueil, nous allons donc créer un tableau d'onglets pour que notre directive passe avec l'URL de SitePoint comme première valeur.

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

Nous pouvons désormais lancer de nouveaux onglets à l'aide du service rapide pour obtenir l'URL de l'utilisateur. Nous définissons l'attribut actif à True, afin que le nouvel onglet reçoive Focus:

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

Les onglets de fermeture impliquent l'utilisation de la fonction d'épissage du tableau # pour supprimer les valeurs du tableau des onglets comme indiqué ci-dessous:

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

Le reste du contrôleur est utilisé pour ajouter un comportement aux commandes qui sont pour minimiser, activer / désactiver l'écran complet et fermer la fenêtre:

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

Nous n'avons pas encore ajouté ces contrôles au balisage même si nous avons ajouté l'implémentation. Alors faisons cela maintenant (dans App / Views / 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>

Et c'est tout! Vous pouvez désormais lancer le navigateur à l'aide de la commande grogn du terminal.

Bâtiment pour les plates-formes

Si vous vous rendez l'esprit au début de l'article, j'ai mentionné qu'il est possible de déployer une application NW.JS sur tous les principaux systèmes d'exploitation. Il existe des instructions approfondies sur la façon de procéder sur la page du projet NW.JS, ou vous pouvez utiliser la tâche de construction préconfigurée de Generator-Wean (que je vais maintenant démontrer).

La construction de grognement à partir de la racine du projet créera l'application pour le système d'exploitation sur lequel il a été construit, tandis que Grunt Build: tout va construire pour toutes les plates-formes. La commande de grunt de commande: {plateforme} (par exemple, la construction de grunt: Mac) se construire pour un système d'exploitation spécifique. Les options possibles sont Win, OSX, Linux32, Linux64. Pour plus d'informations, veuillez vous référer à la réadme du générateur-Wean.

à titre d'exemple, si vous êtes sur un système Linux 64 bits et exécutez:

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

Cela générera un répertoire Builds / Test / Linux64 qui contient un exécutable, correspondant au nom de votre projet.

Conclusion

avec cela, j'espère avoir démontré non seulement la puissance de NW.JS, mais la puissance des technologies Web dans la création d'applications natives. Nous n'avons pas seulement appris à faire un navigateur natif, mais nous avons également vu NW.JS, Yeoman et d'autres outils en jeu. N'oubliez pas, le code source de ce tutoriel est sur GitHub - je vous encourage à le télécharger et à expérimenter.

utilisez-vous nw.js? Pensez-vous qu'il peut monter un défi sérieux aux applications natives? J'aimerais entendre vos réflexions dans les commentaires ci-dessous.

Questions fréquemment posées (FAQ) sur le nœud-webkit et angularjs

Quelle est la principale différence entre Node.js et Angularjs?

Node.js et AngularJS sont tous deux des technologies basées sur JavaScript, mais elles servent des objectifs différents. Node.js est un environnement d'exécution qui permet à JavaScript d'être exécuté du côté du serveur, tandis qu'AngularJS est un cadre côté client utilisé pour créer des applications Web dynamiques. Node.js est idéal pour créer des applications côté serveur évolutives et efficaces, tandis que AngularJS excelle à créer des applications à une seule page avec des fonctionnalités riches et interactives.

Comment puis-je utiliser Node.js avec angularjs?

node.js et angularjs peuvent être utilisés ensemble pour créer une application JavaScript complète. Node.js peut être utilisé pour créer la partie côté serveur de l'application, le traitement des tâches telles que les opérations de base de données, les E / S de fichiers et la communication réseau. AngularJS, en revanche, peut être utilisé pour créer la partie côté client de l'application, fournissant une interface utilisateur dynamique et interactive.

Qu'est-ce que le nœud-webkit et comment est-il lié à AngularJS?

Node-Webkit est un outil qui vous permet de créer des applications de bureau à l'aide de technologies Web comme HTML, CSS et JavaScript. Il combine l'exécution Node.js avec le navigateur Web Chromium, vous permettant d'utiliser des modules Node.js directement dans le navigateur. Cela signifie que vous pouvez utiliser AngularJS pour créer l'interface utilisateur pour votre application Node-Webkit, tout comme vous le feriez pour une application Web régulière.

Puis-je créer des applications de bureau en utilisant JavaScript et Node-webkit?

Oui, vous pouvez créer des applications de bureau à l'aide de JavaScript et Node-Webkit. Node-Webkit vous permet d'utiliser des technologies Web pour créer des applications de bureau, ce qui signifie que vous pouvez utiliser JavaScript, ainsi que HTML et CSS, pour créer l'interface utilisateur pour votre application. Vous pouvez également utiliser des modules Node.js directement dans le navigateur, vous donnant accès à des fonctionnalités puissantes comme les E / S de fichiers et la communication réseau.

Quels sont les avantages de l'utilisation de Node.js sur Angularjs, et vice versa?

Le principal avantage de Node.js sur AngularJs est sa capacité à gérer les tâches côté serveur, telles que les opérations de base de données, les E / S de fichiers et la communication réseau. Cela le rend idéal pour créer des applications côté serveur évolutives et efficaces. D'un autre côté, le principal avantage d'AngularJs sur Node.js est sa capacité à créer des interfaces utilisateur dynamiques et interactives, ce qui le rend idéal pour créer ?

Pour commencer avec Node-Webkit, vous devez d'abord le télécharger et l'installer. Une fois que vous avez fait cela, vous pouvez créer un nouveau projet en créant un fichier package.json et un fichier HTML principal. Le fichier package.json est utilisé pour spécifier le fichier HTML principal et d'autres paramètres pour votre application, tandis que le fichier HTML principal est l'endroit où vous écrivez l'interface utilisateur de votre application.

Puis-je utiliser d'autres frameworks JavaScript avec Node-webkit ?

Oui, vous pouvez utiliser d'autres frameworks JavaScript avec Node-Webkit. Node-Webkit vous permet d'utiliser n'importe quel framework JavaScript qui peut s'exécuter dans le navigateur, y compris des frameworks comme React, Vue.js et Ember.js. Cela vous donne beaucoup de flexibilité lorsqu'il s'agit de choisir les bons outils pour votre application.

Quels sont les cas d'utilisation courants pour Node-webkit?

Node-webkit est couramment utilisé pour créer Applications de bureau qui ont besoin d'utiliser les technologies Web. Cela comprend des applications telles que les éditeurs de texte, les lecteurs de musique et les éditeurs de photos. Il est également utilisé pour créer des applications qui doivent interagir avec le système de fichiers ou le réseau, grâce à son intégration avec node.js.

comment Node-Webkit se compare-t-il à d'autres outils pour créer des applications de bureau?

Node-webkit se compare favorablement aux autres outils pour créer des applications de bureau. Son principal avantage est sa capacité à utiliser les technologies Web, ce qui permet aux développeurs Web de passer plus facilement au développement d'applications de bureau. Il s'intègre également à Node.js, ce qui lui donne accès à des fonctionnalités puissantes comme les E / S de fichiers et la communication réseau.

Quels sont les défis auxquels je pourrais être confrontés lors de l'utilisation de node-webkit et angularjs ensemble?

Un défi auquel vous pourriez faire face lorsque vous utilisez Node-webkit et AngularJS est la gestion de la communication entre le côté serveur et le client- parties latérales de votre application. Cela peut être particulièrement délicat si vous n'êtes pas familier avec le développement JavaScript complet. Cependant, avec une planification minutieuse et une bonne utilisation des fonctionnalités de Node.js et AngularJS, vous pouvez surmonter ce défi.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!