Javascript 如何使用angularjs开发firefox插件_Javascript_Jquery_Angularjs_Firefox_Firefox Addon

Javascript 如何使用angularjs开发firefox插件

javascript jquery angularjs firefox firefox-addon

Javascript 如何使用angularjs开发firefox插件,javascript,jquery,angularjs,firefox,firefox-addon,Javascript,Jquery,Angularjs,Firefox,Firefox Addon,我想开发一个firefox插件，它在额外的完整窗口上有所有的控件，我称之为插件窗口目前，ui是基于jquery的，我对angularjs比较熟悉，我希望我的ui是angularjs 我读过一篇关于使用angularjs开发插件的文章我找不到更多的文章或如何操作的文章。我想知道这是否真的可能，我该怎么做。将第三方脚本添加到您的Mozilla插件SDK项目中相当容易。首选设置将与一起使用假设您在基于unix的系统上安装了NodeJS和Mozilla Firefox，您将希望使用JPM创建一个

我想开发一个firefox插件，它在额外的完整窗口上有所有的控件，我称之为插件窗口

目前，ui是基于jquery的，我对angularjs比较熟悉，我希望我的ui是angularjs

我读过一篇关于使用angularjs开发插件的文章

我找不到更多的文章或如何操作的文章。我想知道这是否真的可能，我该怎么做。

将第三方脚本添加到您的Mozilla插件SDK项目中相当容易。首选设置将与一起使用

假设您在基于unix的系统上安装了NodeJS和Mozilla Firefox，您将希望使用JPM创建一个新项目

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

您需要向项目根目录中添加一个

.bowerrc

文件，其中包含以下详细信息。此根配置文件指示bower在何处编译组件

{
  "directory": "data"
}

现在，您可以继续安装第三方JavaScript库，如AngularJS

bower install --save angular

文件结构如下所示：

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

由于您的项目“附加窗口”被假定为一个侧面板，您将需要定义一个面板

在

/index.js

中，以下代码将为您的项目创建一个

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>

运行你的插件
jpm run

现在由您决定如何与脚本wither Through或Addon SDK API进行通信

这可能行得通
内部/index.js
：
var app = angular.module('addonWindow', ['ng']);
app.controller('MainCtrl', ['$scope', function($scope){
   $scope.helloWorld = 'Greetings from AngularJS!';
}]);

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

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

在/data/addon window.js内部
var app = angular.module('addonWindow', ['ng']);
app.controller('MainCtrl', ['$scope', function($scope){
   $scope.helloWorld = 'Greetings from AngularJS!';
}]);

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

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

我希望这个答案有助于你的发展
 你现在过得怎么样？答案有用吗？