Curl.js and angularJS, wireJS and lazy loading

819 views
Skip to first unread message

Johan Chouquet

unread,
Mar 19, 2014, 9:45:01 AM3/19/14
to cuj...@googlegroups.com
Hi,

I work on a project for a big client, and the client developed a starterkit for UI compatible with the lateste AngularJS and Bootstrap 2.6.
The thing is that, for now, the StarterKit team has no script loader. They only make bundles, with no AMD scripts.
So, what I'm willing to do is :
1. put curl.js / require.js with AngularJS. I don't know exactly how to do that, because Angular has its own script loader I believe. Could you provide me some tips to begin with.

2. if possible, I would like to lazy load some of the assets I have. For that, I wanted to use wire.js. And according to some events (a click on a button for example), start downloading some specs.
How can we do that with curl.js and wire.js ?

For example, I have :
define({
    // Create basic layout, 1st thing to load
    layout: {
        render: {
            template: {
                module: 'text!app/container.html'
            },
            css: {
                module: 'css!app/css/styles.min.css'
            }
        },
        insert: {
            at: {
                $ref: 'dom.first!body'
            }
        }
    },
    // After a click on a button, I want encaiss.html to be loaded, with some more modules, and insert it after the 'div id="gTab1"' DOM element,         // contained in container.html
    encaiss: {
        render: {
            template: {
                module: 'text!app/encaiss.html'
            },
        },
        insert: {
            after: {
                $ref: 'dom!gTab1'
            }
        }
    },
    // After a click on a button, I want valid.html to be loaded, with some more modules, and insert it after the 'div id="gTab2"' DOM element,           // contained in encaiss.html, which is not loaded at the beginning.
    valid: {
        render: {
            template: 'text!app/valid.html'
        },
        insert: {
            after: {
                $ref: 'dom!gTab2'
            }
        }
    },

    plugins: ['wire/dom', 'wire/dom/render']

});


3. I also need to test a lot of stuff automaticaly. So, for that purpose, I wanted to use requireJS and Karma (integrated in AngularJS I believe). Is there a recommanded way of doing that ?


Thanks by advance for your help guys.

Johan

unscriptable

unread,
Mar 20, 2014, 10:11:18 AM3/20/14
to cuj...@googlegroups.com
Hey Johan,

Regarding #1:

IIUC, AngularJS has no script loader.  You must devise a solution for concatenating global scripts using grunt or gulp (or just do it manually).  There are plenty of folks who are using RequireJS with AngularJS, which means that curl.js will also work fine.  You have to wrap your angular things in AMD modules.  

Here's a project[1] that we reviewed recently.  The overall architecture looks awful to my modular-centric eyeballs, but it was a very easy first step to migrate from AngularJS's usual global hackfest "architecture" to something more modern and robust.  (We're planning to work with this team to help steer them gradually toward a more modular and robust architecture.)

Regarding #3:

AngularJS is somewhat tricky to test, I hear.  "You must use Karma."  There are lots of folks who have gotten Karma to work with RequireJS.  A quick google search found something that looks viable[2].  Again, if you can get Karma to work with RequireJS, you can get it to work with curl.js, but you may have to tweak some RequireJS-proprietary code.  

I'll let Brian answer #2.  He'll explain it better than I.

Regards,

-- John

Johan Chouquet

unread,
Mar 21, 2014, 11:54:28 AM3/21/14
to cuj...@googlegroups.com
Hey John,

Thanks for your answer!

For #1 :
As I'm lucky, as it's a totally new application, I'll write some Angular stuff, and then, I'll try to wrap it into AMD modules.
I'll watch the links that you provided, thanks!

For #3 :
1. I'll try to use RequireJs with Karma, just to see how it's done.
2. I'll then try to use Karma with curl.js.
3. And then, I'll try to use curl.js with Intern. Yesterday, I watched a webinar about Intern[1]. It seems awesome, to be able to test just everything.

I'm a bit frustrated because I'm not seeing a lot of curl.js examples on the web compared to RequireJs, although I personally prefer the curlJS syntax to requireJS's, it seems lighter and cleaner to me. Thanks for this amazing work! Just keep it up!

Regards,
Johan

Reply all
Reply to author
Forward
0 new messages