अपने मोज़िला Addon एसडीके परियोजना में तीसरे पक्ष के स्क्रिप्ट जोड़ा जा रहा है बल्कि आसान है। एक इच्छित सेटअप bower के साथ JPM उपयोग करने के लिए किया जाएगा।
मान लें कि आपके पास यूनिक्स आधारित सिस्टम पर स्थापित नोडजेएस और मोज़िला फ़ायरफ़ॉक्स है, आप जेपीएम के साथ एक नई परियोजना बनाना चाहते हैं।
mkdir my-addon
cd my-addon
jpm init
bower init
आप निम्न विस्तार के साथ परियोजना मार्ग पर एक .bowerrc फ़ाइल जोड़ने की आवश्यकता होगी। यह जड़ विन्यास फाइल बोवर जहां घटकों को संकलित करने के निर्देश देता है।
{
"directory": "data"
}
अब आप इस तरह के AngularJS
bower install --save angular
फ़ाइल संरचना निम्न जैसे लगते हैं के रूप में अपने तीसरे पक्ष के JavaScript लाइब्रेरी स्थापित करने के लिए आगे बढ़ सकते हैं;
my-addon/
data/
angular/
angular.js
addon-window.js
addon-window.html
index.js
bower.json
project.json
अपनी परियोजना "ऐड-ऑन खिड़की" एक साइड पैनल माना जाता है के रूप में, आप एक पैनल को परिभाषित करने की आवश्यकता होगी।
./index.js में निम्न कोड आपके प्रोजेक्ट के लिए panel बनाएगा।
var data = require("sdk/self").data;
var addonWindow = require("sdk/panel").Panel({
contentURL: data.url("addon-window.html")
});
./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>
अंदर ./data/addon-window.js:
var app = angular.module('addonWindow', ['ng']);
app.controller('MainCtrl', ['$scope', function($scope){
$scope.helloWorld = 'Greetings from AngularJS!';
}]);
अपने ऐड-ऑन को चलाने के लिए;
jpm run
अब यह आप पर निर्भर है सूख हालांकि postMessage या युद्ध एसडीके port एपीआई अपनी स्क्रिप्ट के साथ संवाद करने।
यह काम कर सकता है।
./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');
./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!';
}]);
मुझे आशा है कि इस सवाल का जवाब आप विकास में मदद करता है।
आप इसके साथ कैसे हो रहे हैं? क्या जवाब मदद मिली? – halfcube