Come sviluppare firefox addon usando angularjs

Voglio sviluppare un addon per Firefox che ha tutti i controlli sulla finestra extra completa che chiamo addon window.Come sviluppare firefox addon usando angularjs

Attualmente l'interfaccia utente è basata su jquery e io mi sento molto più a mio agio in angularjs e vorrei avere il mio ui in angularjs.

Ho letto uno article sullo sviluppo di addon utilizzando angularjs.

Angular firefox addon.

Non sono riuscito a trovare più articoli o un articolo. Mi chiedo se sia effettivamente possibile e come lo faccio.

fonte

2014-07-07 raju

Come stai andando d'accordo? La risposta è stata d'aiuto? – halfcube

L'aggiunta di script di terze parti nel progetto Mozilla Addon SDK è piuttosto semplice. Una configurazione preferita sarebbe quella di utilizzare JPM insieme a bower.

Supponiamo che NodeJS e Mozilla Firefox siano installati su un sistema basato su Unix, vorrete creare un nuovo progetto con JPM.

mkdir my-addon 
cd my-addon 
jpm init 
bower init

Sarà necessario aggiungere un file .bowerrc alla radice del progetto con il seguente particolare. Questo file di configurazione di root indica a Bower dove compilare i componenti.

{ 
    "directory": "data" 
}

Ora è possibile procedere con l'installazione le librerie JavaScript di terze parti come ad esempio AngularJS

bower install --save angular

Il file struttura sarà simile al seguente;

my-addon/ 
    data/ 
      angular/ 
       angular.js 
      addon-window.js 
      addon-window.html 
    index.js 
    bower.json 
    project.json

Come il vostro progetto "finestra addon" si presume essere un pannello laterale, è necessario definire un pannello.

Nel ./index.js il codice seguente creerà un panel per il progetto.

var data = require("sdk/self").data; 
var addonWindow = require("sdk/panel").Panel({ 
    contentURL: data.url("addon-window.html") 
});

all'interno ./data/addon-window.html:

<html ng-app> 
    <head> 
    <title>Addon Window</title> 
    <script src="angular/angular.js"> 
    <script src="addon-window.js"> 
    </head> 
    <body ng-controller="MainCtrl"> 
    {{helloWorld}} 
    </body> 
</html>

all'interno ./data/addon-window.js:

var app = angular.module('addonWindow', ['ng']); 
app.controller('MainCtrl', ['$scope', function($scope){ 
    $scope.helloWorld = 'Greetings from AngularJS!'; 
}]);

per eseguire il componente aggiuntivo;

jpm run

Ora tocca a voi per comunicare con lo script appassire se postMessage o Addon SDK port API.

Questo potrebbe funzionare.

all'interno ./index.js:

var data = require("sdk/self").data; 
var addonWindow = require("sdk/panel").Panel({ 
    contentURL: data.url("addon-window.html") 
}); 
addonWindow.port.emit('greeting', 'Addon SDK');

all'interno ./data/addon-window.js:

var app = angular.module('addonWindow', ['ng']); 
app.controller('MainCtrl', ['$scope', function($scope){ 
    self.port.on('greeting', function (message) { // Addon SDK API 
    $scope.helloWorld = 'Greetings:' + message; 
    $scope.$digest(); 
    }); 
    $scope.helloWorld = 'Greetings from AngularJS!'; 
}]);

Spero che questa risposta che aiuta lo sviluppo.

fonte

2015-03-25 04:28:31 halfcube

Come sviluppare firefox addon usando angularjs

risposta

Problemi correlati