It would be helpful if the example showed how to pull and wire webjars that you need t

It should just be something like: <a href="https://github.com/knockingspirit/paws/blob

You now need to make sure you load the RequireJS config from <code class="notranslate"

Wiring additional web jars as Angular dependencies. about angular-seed-play HOT 14 CLOSED

typesafehub commented on June 20, 2024

Wiring additional web jars as Angular dependencies.

from angular-seed-play.

Comments (14)

jamesward commented on June 20, 2024

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

from angular-seed-play.

kastork commented on June 20, 2024

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.

from angular-seed-play.

jamesward commented on June 20, 2024

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?

from angular-seed-play.

kastork commented on June 20, 2024

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.

from angular-seed-play.

jamesward commented on June 20, 2024

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.

from angular-seed-play.

kastork commented on June 20, 2024

I'll give it a try, thanks.

from angular-seed-play.

kastork commented on June 20, 2024

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

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

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

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

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.

from angular-seed-play.

jamesward commented on June 20, 2024

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.

from angular-seed-play.

kastork commented on June 20, 2024

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

cd angular-play-seed
play clean
Edit build.sbt: "org.webjars" % "angular-ui-router" % "0.2.8-1"
play update
play run
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 ) {
// ...

from angular-seed-play.

jamesward commented on June 20, 2024

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.

from angular-seed-play.

kastork commented on June 20, 2024

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>

from angular-seed-play.

jamesward commented on June 20, 2024

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!

from angular-seed-play.

kastork commented on June 20, 2024

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... :(

from angular-seed-play.

jamesward commented on June 20, 2024

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

from angular-seed-play.

Wiring additional web jars as Angular dependencies. about angular-seed-play HOT 14 CLOSED

Comments (14)

Related Issues (9)

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent