Wie entwickelt man Firefox Addon mit angularjs

Ich möchte ein Firefox-Addon entwickeln, die alle Steuerelemente auf extra komplette Fenster hat, die ich Addon-Fenster nenne.Wie entwickelt man Firefox Addon mit angularjs

Momentan basiert die UI auf JQuery und ich bin viel komfortabler in angularjs und möchte meine UI in angularjs haben.

Ich habe eine article auf Entwicklung von Addon mit angularjs gelesen.

Angular firefox addon.

Ich konnte nicht mehr Artikel oder einen Artikel finden. Ich frage mich, ob es tatsächlich möglich ist und wie ich es mache.

Quelle

2014-07-07 raju

Wie kommen Sie damit aus? Hat die Antwort geholfen? – halfcube

Hinzufügen von Drittanbieter-Skript in Ihrem Mozilla Addon SDK-Projekt ist ziemlich einfach. Eine bevorzugte Konfiguration wäre die Verwendung von JPM zusammen mit bower.

Nehmen wir an, Sie haben NodeJS und Mozilla Firefox auf einem Unix-basierten System installiert, Sie möchten ein neues Projekt mit JPM erstellen.

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

Sie müssen eine .bowerrc-Datei zum Projekt root mit dem folgenden Detail hinzuzufügen. Diese Stammkonfigurationsdatei weist Bower an, wo die Komponenten kompiliert werden sollen.

{ 
    "directory": "data" 
}

Sie können nun mit Drittanbieter-JavaScript-Bibliotheken wie AngularJS

bower install --save angular

Die Dateistruktur installieren wird die wie folgt aussehen;

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

Als Ihr Projekt „Add-on-Fenster“ angenommen wird, einen Seitenteil zu sein, müssen Sie eine Platte definieren.

In ./index.js wird der folgende Code ein panel für Ihr Projekt erstellen.

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

innen ./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>

innen ./data/addon-window.js:

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

Ihr Add-on zu laufen;

jpm run

es jetzt Sie mit Ihrem Skript Widerrist obwohl postMessage oder Addon SDK port API zu kommunizieren.

Dies funktioniert möglicherweise.

innen ./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');

innen ./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!'; 
}]);

hoffe, dass ich diese Antwort Ihnen Entwicklung hilft.

Quelle

2015-03-25 04:28:31 halfcube

Wie entwickelt man Firefox Addon mit angularjs

Antwort

Verwandte Themen