如何使用angularjs开发firefox插件答案

【问题标题】：How to develop firefox addon using angularjs如何使用angularjs开发firefox插件
【发布时间】：2014-07-07 09:34:47
【问题描述】：

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

目前 ui 是基于 jquery 的，我更喜欢使用 angularjs，并且希望我的 ui 使用 angularjs。

我已经阅读了关于使用 angularjs 开发插件的article。

Angular firefox addon.

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

【问题讨论】：

你在这方面相处得如何？答案有帮助吗？

标签： javascript jquery angularjs firefox firefox-addon

【解决方案1】：

将第三方脚本添加到您的 Mozilla Addon SDK 项目中相当容易。首选设置是使用 JPM 和 bower。

假设您在基于 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 中，以下代码将为您的项目创建一个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 或 Addon SDK port API 与您的脚本进行通信。

这可能有效。

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

我希望这个答案可以帮助您发展。

【讨论】：