是否可以构建一个独立的 Angular 插件以嵌入到其他 angular 站点中？

Question

我很喜欢Angular。

话虽如此，我想在 Angular 中创建一个插件 ，它可以托管在其他网站上 - 无论他们使用什么框架。这些框架可以是Angular，也可能是其他的。

当然，后者更容易。我只是添加我的 Angular 代码和中提琴。它只是工作。前者是我遇到的麻烦 - 使用 Angular.
的网站
由于以下原因，在本地创建的简单设置失败：

WARNING: Tried to load angular more than once.

关于如何解决这个问题有什么建议吗？

Answer 1

听起来您几乎想要创建一个可以在 NPM 上注册的 angular 模块。

就您提到的错误而言，您可能需要调整 "loader" 脚本。我创建了一些 public npm 模块，它们使用这种格式，也使用 webpack 来创建脚本。这就是我的 "loader" 脚本的样子。它允许脚本标签、commonJS 和 AMD 模块加载。

import mooAccordionDirective from './mooAccordion.js';
import mooRepeatTranscludeModule from 'moo-utility-repeat-transclude';

(function (root, factory) {
    if (typeof module !== 'undefined' && module.exports) {
        // CommonJS
        if (typeof angular === 'undefined') {
            var angular = require('angular');
            factory(angular);
            module.exports = 'mooAngularAccordion';
        } else {
            factory(angular);
            module.exports = 'mooAngularAccordion';
        }
    } else if (typeof define === 'function' && define.amd) {
        // AMD
        define(['angular'], factory);
    } else {
        // Global Variables
        factory(root.angular);
    }
}(this, function (angular) {
  'use strict';
  // create your angular module and do stuff
  var moduleName = 'mooAngular.accordion';
  var mod = angular.module(moduleName, ['mooAngular.utilityRepeatTransclude']);

  mooAccordionDirective(mod);

  return moduleName; // the name of your module
}));

有关我如何使用 Webpack+AngularJS+ES6 构建整个项目的更多参考，您可以查看 my github page for the moo-angular-accordion 项目。

对于您来说，使用这个脚本应该是这样的：

(function (root, factory) {
    if (typeof module !== 'undefined' && module.exports) {
        // CommonJS also this prevents your error you are getting.
        if (typeof angular === 'undefined') {
            var angular = require('angular');
            factory(angular);
            module.exports = 'myModuleExportString';
        } else {
            factory(angular);
            module.exports = 'myModuleExportString';
        }
    } else if (typeof define === 'function' && define.amd) {
        // AMD
        define(['angular'], factory);
    } else {
        // Global Variables
        factory(root.angular);
    }
}(this, function (angular) {
  'use strict';
  // create your angular module and do stuff
  var moduleName = 'myModule';
  var mod = angular.module(moduleName, ['otherDepModulesIfNeeded']);

  mod.directive(/*... defined here ...*/);

  return moduleName; // the name of your module
}));

细分：

您定义了一个 IIEF，它使用 this 调用，您的模块函数 (factory) 作为参数提供。
逻辑检查 angular 是否已经存在于全局命名空间中（以及 CommonJS 支持是否可用。
如果 angular 存在，使用它（这样它就不会被定义两次），并将 angular 传递给您的模块定义 (factory)
如果不是 CommonJS，检查 AMD
如果不是 AMD，则作为全局加载到根目录（可用作脚本标签）

编辑：您还可以使用 Grunt、Gulp 或您想要捆绑资产的任何构建系统而不是 Webpack，但是上面神奇的脚本使您的模块可以多种格式导出（AMD、Script Tag 、CommonJS 等）。

Answer 2

@Sean Larkin 的回答是正确的，但对于那些使用 jspm 和 typescript 的人来说，这是我在那里所做的。

1) 编写您的 App 模块：

/// <reference path="typings/tsd.d.ts" />

import * as angular from "angular";
import modules from "./Modules"; // a simple exported array

// Create our angular module.
angular.module("module.name", modules);

2) 运行构建捆绑包的命令：

jspm bundle-sfx App - angular app.min.js --globals "{ 'angular': 'angular' }" --minify

3) 现在app.min.js是一个ES5模块库，很容易在脚本标签或其他jspm消费者网站中加载。

是否可以构建一个独立的 Angular 插件以嵌入到其他 angular 站点中？

Is it possible to build a self-contained Angular plugin to be embedded in other angular sites?

npm

angularjs

angular-directive

webpack

细分：