Question

我真的很喜欢Angular。

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

当然，后者更容易。我只是添加我的Angular代码和violla。它只是有效。前者是我遇到麻烦的 - 使用Angular的网站。

由于以下原因，本地创建的简单设置失败：

警告：尝试不止一次加载角度。

关于如何克服这个问题的任何建议？

Answer 1

这听起来几乎就像你想要创建一个可以在NPM上注册的角度模块。

就您引用的错误而言，您可能想要调整您的＃34;加载程序＆＃34;脚本。我创建了一些公共npm模块，这些模块也使用这种格式和webpack来创建脚本。这就是我的＃34;装载机＆＃34;脚本看起来像。它允许脚本标记，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
}));

故障：

您定义了一个以this调用的IIEF，并将您的模块函数（factory）作为参数提供。
逻辑检查全局命名空间中是否已存在angular（如果CommonJS支持可用。
如果angular存在，请使用它（以便它不被定义两次），并将angular传递给您的模块定义（factory）
如果不是CommonJS，请查看AMD
如果不是AMD，请加载到root作为全局（可用作脚本标记）

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

Answer 2

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

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 是一个易于加载到脚本标签或其他jspm消费者网站的ES5模块库。

是否有可能构建一个自包含的Angular插件嵌入其他角度站点？

2 个答案:

故障：