RequireJS / AMD Integration with Angular JS

[David Driscoll]

I was watching the meetup video on Angular 1.2 and beyond, and at around 55:00, the question is asked about angularjs and requirejs.  Misko and Brad drop a bomb that RequireJS is going to replace angular.module, are there any more details about how this integration will work?

http://www.youtube.com/watch?v=W13qDdJDHp8&feature=player_detailpage#t=3301s 

[mark prades]

if this is true that's a very bad news. Some of use rely on other AMD systems or none. I hope that is not made mandatory, because people dont want to mess with 2 AMD systems in an app.

[Ryan Zec]

Well hopefully the module system will be one of those systems that will be componentized so that users can either use the existing angular.module() or replace it is the RequieJS version, or at least that is my hope.

On Sun, Jun 30, 2013 at 6:11 AM, mark prades <parais...@gmail.com> wrote:

if this is true that's a very bad news. Some of use rely on other AMD systems or none. I hope that is not made mandatory, because people dont want to mess with 2 AMD systems in an app.

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

[David Driscoll]

I think it won't be a drastic change to how things are currently done, but that's why I'm asking the question, to know what is coming to try and be ahead of the curve.

[Paul Spaulding]

I don't think that's exactly what he said.  If you listen to the video closely, I think he says that they are getting rid of modules "in case you are using Require.js".  I guess that could be interpreted as you originally stated, but I took it to mean that the Angular modules would still be available if you are not using Require.js .

Personally, I'm looking forward to Angular providing better support for Require.js .

[Martin Atkins]

On Saturday, June 29, 2013 4:40:49 PM UTC-7, David Driscoll wrote:

I was watching the meetup video on Angular 1.2 and beyond, and at around 55:00, the question is asked about angularjs and requirejs.  Misko and Brad drop a bomb that RequireJS is going to replace angular.module, are there any more details about how this integration will work?

http://www.youtube.com/watch?v=W13qDdJDHp8&feature=player_detailpage#t=3301s 

I'm also really interested in more details on this, since my project team is currently evaluating whether to use RequireJS or not and knowing the direction that AngularJS is heading in would be really helpful to inform that decision.

From the video it sounded like there's a team of people working on a patch for this integration; I tried to dig up a github repo or pull request or something else that shows the work so far but wasn't able to find anything. It would be great to see some code or even just initial design work on this, and to know which individual or team is working on it so we can see if they could benefit from other contributors/reviewers/whatever.

[Grant Rettke]

On Wed, Jul 3, 2013 at 1:50 PM, Martin Atkins <mat...@saymedia.com> wrote:
> I'm also really interested in more details on this,

Dumb question here, what does the RequireJS module system give you
that NG does not?

[Martin Atkins]

Well I can't speak for anyone else, but we're currently using requirejs to automatically ensure that our separate scripts get loaded in the correct order of dependencies, and in future we'd like to be able to lazy-load parts of our application so that we can separate less-often-used parts of the app from the initial code payload.

Assuming that by NG you meant Angular, my understanding is that Angular currently considers both of those problems out of scope, but RequireJS alongside AngularJS seems to solve the first problem just fine (other solutions are available too, of course.). There are third-party solutions to the second problem, but if there's going to be an official solution to it one day our team would like to put ourselves on a good trajectory to adopt it later without enormous refactoring.

--
You received this message because you are subscribed to a topic in the Google Groups "AngularJS" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/angular/4-otp3gTz5s/unsubscribe.
To unsubscribe from this group and all its topics, send an email to angular+u...@googlegroups.com.

[Misko Hevery]

No, ng-modules are not going away. What we are trying to do is to merge the syntax of requireJS into implicit angular modules.

Keep in mind that requireJS and ng-modules solve two very different things and only have the word module in common.

requireJS is all about loading code. ng-module is about instantiating graphs of objects at runtime.

--

You received this message because you are subscribed to the Google Groups "AngularJS" group.

To unsubscribe from this group and stop receiving emails from it, send an email to angular+u...@googlegroups.com.

[Martin Atkins]

Thanks for the clarification. Is there somewhere we can read more about the current design for aligning these concepts, or see a work-in-progress implementation? I'd love to understand the approach being taken, and maybe even help if I can.

[Misko Hevery]

I think Igor has some this repo for experiments https://github.com/IgorMinar/di.js 

[Jonas Rabbe]

Thanks for the clarification and link Misko. We are currently using angular and require.js, and I'm currently evaluating its usefulness in our current setup (hint, not a lot).

Like most everyone in this group (it seems) we have been trying to use require.js for lazy loading of components as the user navigates the app. Our biggest issue is that angular modules declare their dependencies up front in the requires part of the angular.module call. Unless I have missed specifying this dependency?

Is it possible to inject a module into another at a later time? If so, do you have any hints to where we could start investigating?

And of course, if there is anything we can help with testing out in our setup just let me know. Our app basically consists of a number of interdependent angular apps with a play backend.

Thanks,

// Jonas Rabbe

[Misko Hevery]

Like most everyone in this group (it seems) we have been trying to use require.js for lazy loading of components as the user navigates the app. Our biggest issue is that angular modules declare their dependencies up front in the requires part of the angular.module call. Unless I have missed specifying this dependency?

not useful because of next point.

 

Is it possible to inject a module into another at a later time? If so, do you have any hints to where we could start investigating?

We are well aware of this deficiency. To fix this we need  hierarchical injection working. If you feel very passionate about making it work we can talk, but it is a lot of work.

[Nico Rehwaldt]

Hey guys, 

I was working for a while on the RequireJS+AngularJS integration problem and came up with a little project called ngDefine (https://github.com/Nikku/requirejs-angular-define). 

The idea is kind of similar to what Igor worked on in https://github.com/IgorMinar/di.js: A wrapper function (I called it ngDefine) integrates AngularJS and RequireJS. 

Not sure if this will be rendered obsolete by upcoming changes in AngularJS. For the moment however, it allows you to use AngularJS and RequireJS in a sane way.

Cheers, 

Nico

[Stu Salsbury]

Nico, your work looks exciting now that I hear it supports compilation/minification. Anyone interested in lazy loading angular components with requirejs, the flip side of compilation, can check out https://github.com/afterglowtech/angular-couchPotato/ for one solution. See the samples for poor man's/busy man's documentation.

[Samuel Ytterbrink]

has any thing happen since last post in this thread?

[Schuler Manuel]

any news?

[Daniel Tabuenca]

There's been some talk on the dev mailing list about future plans to make everything completely modular, and be able to load modules dynamically.

[Marcos Lin]

The latest on this topic is that lazy loading of AngularJS module is only going to happen in 2.0 release as per post from Brad:

https://plus.google.com/u/0/+BradGreen/posts/ae4b2tmNQvu

In the meantime, check out angularAMD that I created to solve my need to integrate AngularJS and RequireJS:

http://marcoslin.github.io/angularAMD/

[ThomasBurleson]

@All - 

Check out the GitHub Respository angularjs-Quizzler. 

That application has full real-world example of using RequireJS injection and dependency management with AngularJS injection.

Also check out my blog article: Dependency Injection using RequireJS and AngularJS

For those wanting to use RequireJS, I think Quizzler and my blog will answer many questions. 

I love using RequireJS with AngularJS and I hope this is helpful to everyone. 

- Thomas Burleson

[Robert Jones]

This looks very promising. Just an FYI, your github example project refers to a lib directory that doesn't exist in the repo.

[Jonas Rabbe]

Thank you for sharing the information you have gathered. I'll try and document our combination of RequireJS and AngularJS for a real world application at radius.com over the holidays.

--

[Stu Salsbury]

I have something at https://github.com/stu-salsbury/angular-couch-potato as well -- can't recall if I posted it to this thread before.

But the reason I'm writing is to challenge all of us who have done something like this to take an additional step which I don't think we have yet done....

Let's figure out how to dump lazily loaded components and get them back again when needed.  The use case is essentially that of a CMS or other system that could potentially have many, many components, perhaps coming from places that weren't even envisioned when the system is launched -- letting a framework load **and unload** components when needed and when no longer needed.

We can null out the Angular components easily enough, but RequireJS doesn't really support this -- you can null out a module, but it, AFAIK, will still think of the module as being loaded.  So some ideas:

1) patch RequireJS to support dumping its definition of a module in such a way that it truly forgets that it already got a definition for it

2) work around it somehow by playing with RequireJS paths so that it at least *thinks* it's downloading a new module

Anyone up for it?

[Danny Eck]

I'm just starting to evaluate integration with RequireJS and I'm concerned the benefits may not outweigh the cost. I want to speak in as general terms as possible here, because that's what I haven't (to my satisfaction at least) been able to scrounge from the interwebs.

Integrating Require seems like it would have major negative consequences on complexity and testability. Can i still create angular modules by composition of submodules? (All the examples I've seen just have a single main module.) And how do I unit-test all this stuff when its wrapped in define()?

Like i said i'm just getting started researching, but I'm leaning very heavily against using require in my case. I especially don't want to redo build configs, tests, and all that jazz. Am i overestimating the negative impacts here? Thanks.

[Martin Atkins]

I work on an app (unfortunately not open source) that uses RequireJS with Angular primarily as a dependency management system. (i.e. We're not trying to do lazy-loading right now.)

Our app consists of several AngularJS modules that are all rolled up into a single top-level module. We have an AMD module per Angular module and then an AMD module per component of a module. Our bootstrapping code requires the AMD module containing the root module, which in turn depends on the AMD modules for each sub-AngularJS module. Those sub-modules in turn depend on the AMD modules for the services, directives, etc inside.

Once RequireJS has taken care of resolving all of the dependencies, if those AMD modules call angular.module and Module.service (etc), Angular can be used as normal.

When it comes to testing, we have a single non-AMD JS file that uses 'require' to load up the root AMD module *and* the AMD module that contains or reference all of the tests. Once again, once RequireJS is done with its work all of the tests are registered in Jasmine and it just works.

I guess the one "trick" here is that we still use the global 'angular' and 'describe', 'it', 'expect', etc variables from AngularJS and Jasmine, so those remain global even though our app is made of AMD modules. As long as you have some code to kick off the RequireJS process it doesn't really matter that everything's wrapped in define().

Each scenario is different of course, but there are enough distinct parts to our app that I think RequireJS has been a net win for us. Once we got over the hump of figuring out all of the above we've been able to build the app from lots of small parts and let RequireJS take care of managing the dependencies between them, which is a big win over manually handling dependency management via explicit script tags.

--

[Stu Salsbury]

PS.  You can create modules when you use RequireJS, but you don't need to.  In fact, if each file lives independently of any modules, then you can stop worrying about modules altogether.  My couch potato thing obviates the need for your components to care about which modules they land in.  I don't miss modules at all, though I do of course end up with one driving the show.

On Fri, Dec 20, 2013 at 6:00 PM, Stu Salsbury <stu.sa...@gmail.com> wrote:

I find the benefits of having a dependency management system extend to testability because you can figure out which files need to be tested automatically and do on the fly unit tests of changed code as your work if you script it well.  The only thing better than RequireJS that I've used in this regard is Closure Compiler, which gives you the ability to finely tune your dependency system to track changes and their impacts to other components and the tests that run against them.  

More work to get this running, but the payoff is worth it for me.  So on the one hand it can be tricky to get RequireJS running with your tests, but if you're willing to invest in scripting, it can be more testable and give you more control than without it.  You just have to ask yourself if you're willing to invest in your build scripts.

PS.  I use mocha for my testing.  Never tried Jasmine on a Requirejs system but I found it too much trouble to get karma to play nicely with RequireJS.

[Stu Salsbury]

I find the benefits of having a dependency management system extend to testability because you can figure out which files need to be tested automatically and do on the fly unit tests of changed code as your work if you script it well.  The only thing better than RequireJS that I've used in this regard is Closure Compiler, which gives you the ability to finely tune your dependency system to track changes and their impacts to other components and the tests that run against them.  

More work to get this running, but the payoff is worth it for me.  So on the one hand it can be tricky to get RequireJS running with your tests, but if you're willing to invest in scripting, it can be more testable and give you more control than without it.  You just have to ask yourself if you're willing to invest in your build scripts.

PS.  I use mocha for my testing.  Never tried Jasmine on a Requirejs system but I found it too much trouble to get karma to play nicely with RequireJS.

On Fri, Dec 20, 2013 at 5:34 PM, Martin Atkins <mat...@saymedia.com> wrote:

[Olex Lapshyn]

So, right now we can't load modules dynamically, but we can inject some stuff dynamically into exisiting modules.
http://ify.io/lazy-loading-in-angularjs/
And some example plunker applying that principle by @olastan:
http://plnkr.co/edit/tV1aCcBWJDib7OLGcDwd?p=preview
Another angle to address problem. Not as useful as loading whole modules, but can address the problem of dynamically injecting services/controllers/directives etc. without much re-work (basically, you can add some module named 'dynamic-dependencies' and inject all your dynamic stuff in there, so you won't have problem with hardcoding module's name).

[Marcus]

Hi Stu,

Today's discussions are hitting the crux of whatever AngularJS 2.0 should be:

  -- built in RequireJS functionality

  -- CouchPotato lazy-loading on the fly for controllers and even directives

  -- "states" that are dynamic and multiple (on same page), built on the fly

  -- ability to "forget" code when memory gets scarce in a browser

  -- unlimited way to add new features to a web site, but never making these "obese" with a single-load approach at the start

  -- an architecture for many developers working in teams around the world to add new features to a web site

add to this:

  -- secure log-in controls and authentication in order to cater to multi-layers of users -- outsiders just browsing, partners

      touching their data, customers tracking their orders and shipments, internal users running separate factory processes, 

     sales, marketing, finance, personnel, etc.  Security when accessing a part of a system has to be server-side controlled, 

     based on profiles and just-in-time (lazy-load) access to HTML pages as well as DATA sources (read-only, modify, no access).

  -- lazy-load also means having "secret" pages and scripts that cannot load without previous authentication inside the main app.

We run a company that is expanding all the time, and we're trying to convert legacy client/server systems into web apps. We're hoping to develop a single strategy around AngularJS "thinking", so that everyone working inside the project is able to use tools developed with just one standard (anarchy sucks !).  We're also trying to expand our features into customers and partners who will be "touching" parts of our corporate databases.

After seeing how firebase can eliminate layers of database structures, all of this makes even more sense to build additional features. We're looking at just-in-time manufacturing data that can become new "bits" of pages where we can monitor stock in warehouses (in pictures), shipments (on maps), machines (giving a pulse of their states), and even farm equipment with GPS tracking.

I can picture the solution, but I can't figure out how to code all of this, unless we have an enterprise platform that can be dynamically developed with many people involved within a single architecture.  Hopefully AngularJS is that solution.

Marcus

[Marcus]

[Danny Eck]

@stu u totally identified my cause for concern here. Our test setup right now revolves around karma and jasmine *without* any Require stuff. There’s pressure mounting to start using Require for everything and since i'm not all that familiar with it, my first reaction is fear.

A working example of an angular app with the following (ideal) characteristics would be HUGELY helpful:

- multiple user-defined angular modules with inter dependence
- require + karma + jasmine setup
- a basic build routine (grunt)

After seeing it all work together i could at least offer "yes it can be done. We'll start putting the pieces together" instead of "gee whiz... I dunno". Experimenting on my own here probably would not be a good use of time.

I'll have to check out the potato project. Getting more familiar with Require also seems like a good idea. Maybe more teams like mine would be hip to require + angular if there were more articles/demos/resources teaching this kind of thing. Can anyone recommend?

[Jonas]

We have a very similar setup, except we started using require about 6 months ago. The test setup consists of a main.js file specifically for testing, which contains the require configuration. Each test is a require module (ie wrapped in a define), and we inject the dependencies. This includes angular and other libraries. We recently got it working for directives loading templates as needed, which was its own "wonderful" experience.

I'll try and get a few short "how-to" articles up now that I have a few days of breathing room.

// Jonas

[Stu Salsbury]

Danny, if Karma is a must-have there might be reason for concern. Perhaps it was my ignorance or impatience but I never figured out how to make it work with requirejs. It was pretty straightforward in mocha after finding a sample project on github.

[Jonas Rabbe]

Like I mentioned, we are running tests with Jasmine and Karma in our RequireJS based setup. It's definitely doable and not as hard as I figured. The biggest hurdle was setting up `ng-html2js` because we do not have a global `angular` object available.

I just started writing some of these small articles I mentioned before, and will post again once I put something on the blog.

// Jonas

[Jonas Rabbe]

Hi all,

Hope you had a great Christmas (or whatever you celebrate). As promised I wrote the first installment about our RequireJS and AngularJS setup: http://engineering.radius.com/post/71425827156/requirejs-with-angularjs-an-example

I hope to find time before New Years to write a similar post about our testing setup. 

// Jonas

[Jonas Rabbe]

Sorry for the long delay, but the last two months have been spent writing an entirely new app that taught us a bunch more. I have finally gotten around to writing the promise post on Testing AngularJS in a RequireJS environment: http://engineering.radius.com/post/77677879234/testing-angularjs-in-a-requirejs-environment

Hope someone gets some value out of it.

Best regards,

// Jonas

[Douglas Lira]

hi look this:

https://github.com/douglaslira/lazy-load-angularjs

2015-02-16 9:19 GMT-02:00 Sarah D <sdo...@gmail.com>:

Hi Jonas,

First off thank you for your detailed blog posts. Really nice :)

I am using a similar setup to your project but with the latest versions of Angular, Require and Karma and I can not get Karma to use require correctly (not loading files correctly).

Have you upgraded or seen any similar issues more recently?

Thanks,

Sarah

--

You received this message because you are subscribed to the Google Groups "AngularJS" group.

To unsubscribe from this group and stop receiving emails from it, send an email to angular+u...@googlegroups.com.

To post to this group, send email to ang...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular.

For more options, visit https://groups.google.com/d/optout.

--

Atenciosamente,

Douglas Lira
"No que diz respeito ao empenho, ao compromisso, ao esforço, à dedicação, não existe meio termo. Ou você faz a coisa bem feita ou não faz."

[Donald Organ]

I would highly suggest taking a look at:   http://ngmodules.org/tags/adhesivejs