Wiring additional web jars as Angular dependencies.

[kastork]

It would be helpful if the example showed how to pull and wire webjars that you need to inject into Angular. For example, the angular-ui router, or angular-ui bootstrap.

[jamesward]

It's not an Activator template yet but this project might be helpful: https://github.com/knockingspirit/paws

[kastork]

Interesting project. But I can't find any use of a third party angular module being injected into the angular app from another web jar. All the ones being injected there come with the angular web jar (though I do see other web jars - I just don't see that they are being injected into the angular app module. Or else I'm missing something fundamental, and would appreciate a little explanation.

[jamesward]

It should just be something like: https://github.com/knockingspirit/paws/blob/master/modules/common/app/assets/common/javascripts/app.coffee#L5

Is that the kind of thing you are trying to do? Are you using RequireJS to load these other modules?

[kastork]

Everything there comes from one webjar, except for the user module, which is a local script. How would you use, for example, https://github.com/webjars/angular-ui-router ? Which is a different webjar, but needs to be put in the the requirejs dependencies in such a way that you can subsequently inject it into angular.

This requirejs stuff is new to me, so perhaps this should be obvious and I'm just missing it.

[jamesward]

With the new RequireJS support in WebJars this should just work. For details see:
http://www.jamesward.com/2014/02/19/official-support-for-requirejs-in-webjars

However, some of the WebJars haven't been updated to the new format yet. So if you have problems, let me know.

[kastork]

I'll give it a try, thanks.

[kastork]

Okay, I've read the above and experimented some more. Here's what I see...

1. Get this project fired up with Activator.
2. In build.sbt, add the line

      "org.webjars" % "angular-ui-router" % "0.2.8"

1. Modify the require line in app.js to read:

require(['angular', './controllers', './directives', './filters', './services', 'angular-route','angular-ui-router'],
  function(angular, controllers ) {
  // etc etc

1. Observe generated javascript in the head of the page now contains a script element for the module. (However, note the path is not a webjar path)

<script type="text/javascript" charset="utf-8" async="" data-requirecontext="_" data-requiremodule="angular-ui-router" src="/js/angular-ui-router.js"></script>

and also a console 404 message not loading angular-ui-router.js

So, I guess I'm missing a step somewhere. It is this step, whatever it is, that would be a helpful thing to describe in the tutorial.

[jamesward]

The angular-ui-router didn't have the right RequireJS support. I've added it and released it as 0.2.8-1. That should fix that.

[kastork]

Thanks. I think there still must be something I need to do somewhere...

1. cd angular-play-seed
2. play clean
3. Edit build.sbt: "org.webjars" % "angular-ui-router" % "0.2.8-1"
4. play update
5. play run
6. Observe in generated page header

<script type="text/javascript" charset="utf-8" async="" data-requirecontext="_" data-requiremodule="angular-ui-router" src="/js/angular-ui-router.js"></script>

If I understand things correctly, I should see src="/webjars/angular-ui-router/0.2.8/angular-ui-router.js"

(That URL does indeed return the script, so the webjar is there)

Is there a define I need to do somewhere, or is there an order requirement in the require list? (my require statement is as it was a few comments back,

require(['angular', './controllers', './directives', './filters', './services', 'angular-route','angular-ui-router'],
  function(angular, controllers ) {
// ...

[jamesward]

You now need to make sure you load the RequireJS config from webjars-locator (which can be done using a helper in Play. See the details on my blog. Let me know if you have any questions.

[kastork]

Okay...

Without changing the tutorial's index.scala.html, which already calls the helper.

1 cd angular-play-seed
2. Edit build.sbt to add: "org.webjars" % "webjars-locator" % "0.12"
3. play clean
4. play run
5. Observe generated webjar locator script in page:

    // this stuff must be done before require.js is loaded
    var webjars = {
    versions: { 'angularjs': '1.2.13', 'angular-ui-router': '0.2.8', 'requirejs': '2.1.10' },
    path: function(webjarid, path) {
        return '/webjars/' + webjarid + '/' + webjars.versions[webjarid] + '/' + path;
    }
};

var require = {
    callback: function() {
        // no-op webjars requirejs plugin loader for backwards compatibility
        define('webjars', function () {
            return { load: function (name, req, onload, config) { onload(); } }
        });

        // all of the webjar configs from their webjars-requirejs.js files

// webjar config for angularjs
var webjarsAngularjsChildren = [
    'angular-animate',
    'angular-cookies',
    'angular-loader',
    'angular-mocks',
    'angular-resource',
    'angular-route',
    'angular-sanitize',
    'angular-scenario',
    'angular-touch',
    'angular-locale_en-in',
    'angular-locale_sk-sk',
    'angular-locale_en-dsrt-us',
    'angular-locale_cs-cz',
    'angular-locale_pt-pt',
    'angular-locale_ml-in',
    'angular-locale_ro-ro',
    'angular-locale_sr',
    'angular-locale_en-ie',
    'angular-locale_hr',
    'angular-locale_ko',
    'angular-locale_sw-tz',
    'angular-locale_de-ch',
    'angular-locale_ja',
    'angular-locale_sq-al',
    'angular-locale_ln',
    'angular-locale_zh-cn',
    'angular-locale_en-zz',
    'angular-locale_en-sg',
    'angular-locale_kn',
    'angular-locale_mr-in',
    'angular-locale_mr',
    'angular-locale_fil-ph',
    'angular-locale_zh-hans',
    'angular-locale_am',
    'angular-locale_he-il',
    'angular-locale_gl',
    'angular-locale_en',
    'angular-locale_en-mh',
    'angular-locale_hi',
    'angular-locale_ro',
    'angular-locale_pt',
    'angular-locale_hu',
    'angular-locale_sl-si',
    'angular-locale_fr-ca',
    'angular-locale_fil',
    'angular-locale_it',
    'angular-locale_fr-bl',
    'angular-locale_fr-gp',
    'angular-locale_ms',
    'angular-locale_sv-se',
    'angular-locale_it-it',
    'angular-locale_sr-latn-rs',
    'angular-locale_ar-eg',
    'angular-locale_en-vi',
    'angular-locale_vi-vn',
    'angular-locale_ja-jp',
    'angular-locale_ta',
    'angular-locale_en-iso',
    'angular-locale_en-gu',
    'angular-locale_eu-es',
    'angular-locale_no',
    'angular-locale_hu-hu',
    'angular-locale_fr-mf',
    'angular-locale_en-um',
    'angular-locale_gl-es',
    'angular-locale_pl',
    'angular-locale_nl-nl',
    'angular-locale_et',
    'angular-locale_de-lu',
    'angular-locale_da',
    'angular-locale_zh',
    'angular-locale_tr-tr',
    'angular-locale_am-et',
    'angular-locale_te-in',
    'angular-locale_hi-in',
    'angular-locale_et-ee',
    'angular-locale_tr',
    'angular-locale_sk',
    'angular-locale_sr-rs',
    'angular-locale_lv',
    'angular-locale_fa-ir',
    'angular-locale_sl',
    'angular-locale_el-gr',
    'angular-locale_bn-bd',
    'angular-locale_lt-lt',
    'angular-locale_sq',
    'angular-locale_fr-mq',
    'angular-locale_ms-my',
    'angular-locale_id',
    'angular-locale_bn',
    'angular-locale_hr-hr',
    'angular-locale_fr-mc',
    'angular-locale_id-id',
    'angular-locale_es',
    'angular-locale_es-es',
    'angular-locale_cs',
    'angular-locale_zh-hans-cn',
    'angular-locale_fr',
    'angular-locale_th-th',
    'angular-locale_te',
    'angular-locale_fa',
    'angular-locale_kn-in',
    'angular-locale_or',
    'angular-locale_pt-br',
    'angular-locale_zh-hk',
    'angular-locale_gu',
    'angular-locale_en-au',
    'angular-locale_is-is',
    'angular-locale_en-gb',
    'angular-locale_ln-cd',
    'angular-locale_mo',
    'angular-locale_sw',
    'angular-locale_tl',
    'angular-locale_mt',
    'angular-locale_vi',
    'angular-locale_de',
    'angular-locale_mt-mt',
    'angular-locale_pl-pl',
    'angular-locale_uk-ua',
    'angular-locale_gsw-ch',
    'angular-locale_ca',
    'angular-locale_tl-ph',
    'angular-locale_da-dk',
    'angular-locale_ca-es',
    'angular-locale_bg-bg',
    'angular-locale_nl',
    'angular-locale_or-in',
    'angular-locale_gu-in',
    'angular-locale_zh-tw',
    'angular-locale_bg',
    'angular-locale_is',
    'angular-locale_eu',
    'angular-locale_el-polyton',
    'angular-locale_fr-re',
    'angular-locale_sr-cyrl-rs',
    'angular-locale_lt',
    'angular-locale_sv',
    'angular-locale_en-za',
    'angular-locale_ur-pk',
    'angular-locale_fi',
    'angular-locale_he',
    'angular-locale_en-mp',
    'angular-locale_ru-ru',
    'angular-locale_de-at',
    'angular-locale_en-as',
    'angular-locale_gsw',
    'angular-locale_ko-kr',
    'angular-locale_de-de',
    'angular-locale_ru',
    'angular-locale_iw',
    'angular-locale_uk',
    'angular-locale_in',
    'angular-locale_en-dsrt',
    'angular-locale_el',
    'angular-locale_en-us',
    'angular-locale_fi-fi',
    'angular-locale_ar',
    'angular-locale_de-be',
    'angular-locale_th',
    'angular-locale_ta-in',
    'angular-locale_ml',
    'angular-locale_lv-lv',
    'angular-locale_ur',
    'angular-locale_fr-fr' ];

var webjarsAngularjsPaths = { "angular": webjars.path("angularjs", "angular") };

var webjarsAngularjsShim = { "angular": {"exports" : "angular"} };

webjarsAngularjsChildren.forEach(function(child) {
    webjarsAngularjsPaths[child] = webjars.path("angularjs", child);
    webjarsAngularjsShim[child] = ["angular", "webjars!angular.js"];
});

requirejs.config({
    paths: webjarsAngularjsPaths,
    shim: webjarsAngularjsShim
});


    }
}

As you can see, the angular-ui-module appears in the webjar list. but, it does not appear in any requires.config() call.

The generated page continues to include

<script type="text/javascript" charset="utf-8" async="" data-requirecontext="_" data-requiremodule="angular-ui-router" src="/js/angular-ui-router.js"></script>

[jamesward]

Crap. This was my bad. Sorry for the hassle. I forgot to git add the webjars-requirejs.js file. :( I'm releasing 0.2.8-2 now that will have this. Then you should be good to go!

[kastork]

Shiny.
Thanks James

To return to the point. I think this tutorial does need an update. I'll try to find some time to make some changes and get you a PR. Or maybe I'll just create a different activator template.

Anyway, back to my day job... :(

[jamesward]

Thanks @kastork! I'd love an PR for this one or a new template. :)