-
Notifications
You must be signed in to change notification settings - Fork 43
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Wiring additional web jars as Angular dependencies. #13
Comments
It's not an Activator template yet but this project might be helpful: https://github.com/knockingspirit/paws |
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. |
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? |
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. |
With the new RequireJS support in WebJars this should just work. For details see: However, some of the WebJars haven't been updated to the new format yet. So if you have problems, let me know. |
I'll give it a try, thanks. |
Okay, I've read the above and experimented some more. Here's what I see...
and also a console 404 message not loading 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. |
The |
Thanks. I think there still must be something I need to do somewhere...
If I understand things correctly, I should see (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,
|
You now need to make sure you load the RequireJS config from |
Okay... Without changing the tutorial's 1 // 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 The generated page continues to include
|
Crap. This was my bad. Sorry for the hassle. I forgot to |
Shiny. 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... :( |
Thanks @kastork! I'd love an PR for this one or a new template. :) |
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.
The text was updated successfully, but these errors were encountered: