How can MyWebsite ship a javascript package jQuery or AngularJS, that websiteA and websiteB can use, without conflicts?

Question

Say I have a website, MyWebsite, where you can build content for a call-to-action-box that should show on another website, WebsiteA, and on more websites that choose our solution without using an iframe.

How can that box be created using jQuery or AngularJS, without conflicts, without knowing what the customer has in their webpage, they just import our some_script.js set some settings and that's it. Most importantly, we can't mess up the customers side (obviously), nor should whatever tech the customer is using, mess up our superduper box.

I would love to see a working example. This is hard (I think), so please take more time to think before answering if you haven't solved such a problem. Appreciate the help guys!

Answer 1

RequireJS allows you to create consumable JQuery / AngularJS Apps (AMDs) without worrying about version conflicts

Rather than worrying about library noconflict's, RequireJS creates a separate sandbox / variable scope outside the global with an AMD. Within AMD, only included versions are available.

AMD - Asynchronous Module Definitions are self-enclosed applications with their own scope for libraries. Self-Encolsure is like namespacing, complete no-conflict. Refer to WHY WEB MODULES for a detailed explanation for using modules.

An AngularJS example, create an AngularMain.js file:

require.config({
    baseUrl: "js",    
    paths: {
       'angular': '//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min',
       'angularAMD': 'lib/angularAMD.min',
       'ngload': 'lib/ngload.min'
    },
    shim: { 'angularAMD': ['angular'], 'angular-route': ['angular'] },
    deps: ['AngularApp']
});

Now, require.config has indicated that AngularApp.js should also be included (as you'll see, RequireJS usually assumes ".js" extensions), with dependancies on angular.js and angular-route.js

You now define your Angular App and Controllers using a combination of RequireJS and AngularJS syntax in your AngularApp.js file:

define(['angularAMD', 'angular-route'], function (angularAMD) {
    var app = angular.module("webapp", ['ngRoute']);
    app.config(function ($routeProvider) {
        $routeProvider.when("/home", angularAMD.route({
            templateUrl: 'views/home.html', controller: 'HomeCtrl',
            controllerUrl: 'ctrl/home'
        }))
    });
    return angularAMD.bootstrap(app);
});

define(['app'], function (app) {
    app.controller('HomeCtrl', function ($scope) {
        $scope.message = "Message from HomeCtrl"; 
    });
});

Finally: your HTML page requests references you app with a reference to require.js and a data-main attribute indicating app file.

<script data-main="js/AngularMain" src=".../require.js"></script>

Once again: the ".js" file extension is optional

---

• much of this code example borrowed from marcoslin.github.io

• tnajdek has an angular-requirejs-seed Git Hub repo for building angular apps with require pre-configured.

• RequireJS Official Site has a good tutorial on creating a JQuery AMD.