Should I still use RequireJs with AngularJs?

[Noppanit Charassinvichai]

Obviously I have seen the video AngularJs Best Practices. http://www.youtube.com/watch?v=ZhfUv0spHCY

But I also have seen this comment from Brain Ford which he also works for AngularJs. http://briantford.com/blog/huuuuuge-angular-apps.html. But he said at the bottom of the page that he didn't recommend using RequireJs with AngularJs. So, who should I go for? Personally, I have integrated RequireJs with AngularJs and I like it. 

[Matt Calthrop]

I'm using RequireJS with AngularJS in a sample app I'm building:

https://github.com/mcalthrop/profiles/tree/imp/angular

I have the app working fine, and I like it – to me, it's much cleaner having require doing the loading of JS files than putting all those includes in the main index.html file.

However, I am now trying to install the Karma test runner, and am running into problems (Error: Mismatched anonymous define()).  I know there's a solution (the error message cites http://requirejs.org/docs/errors.html#mismatch), but haven't found it yet.

Matt

[Noppanit Charassinvichai]

I base my structure on this https://github.com/maxdow/angularjs-requirejs-seed and it works fine for me both Karma test and application.

[Grant Rettke]

As you can see there are a lot of good approaches and justifications
for each. I will share ours:

We did not use it for two reasons:
1. The NG guys suggest not to do so.
2. Yeoman doesn't have it wired up out of the box.
3. We are not at the level of JS hackery to "just do it".

So you see, there are 3 reasons when you think about it.

[Matt Styles]

I have the same reservations about it that Grant does.

Also, for most simple projects it isn’t worth doing, particularly if you are scaffolding with Yeoman.  I created my own seed to test out some ideas and build out some simple projects https://github.com/mattstyles/yeoman-angular-express-plus and simply dont need the extra complexity of require.  

Every project is different though and you may have greater need of it but if it isn't adding value then why use it?

[mark prades]

RequireJS is totally useless with angularJS DI Container , has you can open / reopen modules in different files.

Now you might want to use external libraries, but they all work without RequireJS. 

RequireJS never solved any of my problems , and since I still need a build step before going to production ( or use a server-side asset pipeline ) 

RequireJS always got in my way. 

[Matt Calthrop]

After trying for quite a while with RequireJS, I have now removed it, and implemented the async example in the angular-seed project.

Personally, I think it's ugly having all that JS in the index.html file, but it definitely makes the rest of the code much cleaner (don't have to wrap every module in a define() function).

And I've also got my unit testing framework working too.

Code is here if you're interested.

Matt

--
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/fzHwPTg39gQ/unsubscribe.
To unsubscribe from this group and all its topics, 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.
 
 

[Noppanit Charassinvichai]

Personally I really like RequireJs and it's working really well with Play Framework!. Because it's doing all the minification and optimisation. And it's also nice to hear some other opinions as well. Thanks guys.

[Andy Joslin]

I don't think requirejs is worth it.

In production you end up compiling everything into one file anyway and loading it synchronously.

And then you end up having *more* bytes to load because everything still has its define() block around it :-)

ng-boilerplate works really well without require: during development, it loads all your js files seperately for easy debugging and development, and then during production you can 'compile' it down to just load one minified JS file.

[Mohammad Islam]

I also saw Brian's recommendation for not using RequireJS. But, it's just his personal point of view, which is definitely not the view of others in the Angular team. Take a look at 07:39 of this video from official Angular YouTube channel: http://youtu.be/ZhfUv0spHCY?t=7m39s

After comparing a few good Angular Seed, I wrote one myself that has a pretty good directory structure and asynchronous loading fashion on demand. Meaning, you don't have to load all the controllers at page load. With this angular requirejs seed you can load components on demand, when and where it's needed on the fly.

[Thomas Pons]

In real Life when you are 5 or more developers on a project, you need requirejs for a simple reason : if all the developers insert their script manually in the index.html file ... well will not work ...

If you are alone doing your blog ok do what you want you don't need it if you work on a big project with a team ... be pragmatic and take it !

[Pawel Kozlowski]

Well, there are other shades of gray between using requireJS and
manually inserting all the <script> tags into the index.html.
A well crafted build system can concatenate files and produce one file
to be included.

So, I wouldn't say that each "big" project need to use requireJS.
There are examples of "big" projects at Google that don't use
requirejs.

Cheers,
Pawel

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

--
AngularJS book:
http://www.packtpub.com/angularjs-web-application-development/book
Looking for bootstrap-based widget library for AngularJS?
http://angular-ui.github.com/bootstrap/

[Stu Salsbury]

While I suppose there may be large apps at google that use concatenation, I would have thought many of them use closure library for dependency management. I personally would not want the headache of managing the order of concatenation in a big project.... **unless it was based on something that supported dependency injection! ;)**

Jokes aside, I use requirejs for lazy loading and have started to use closure library instead of requirejs for build-time in order to get max compressibility (not the dom stuff though).

[Patrick Ryan]

@Stu, Do you mean the Closure Compiler?  ... base.js etc.  Do you use it with goog.require() at the top of your AngularJS js files?  Doesn't it spit out tons of errors/warnings on Angular code?  We initially went with the whole Closure system but found it too difficult for our purposes. Since then we've converted to building our pure JS library with the Compiler and (thank god) AngularJS for the UI. We just us the library like any other within our Angular UI code to do certain back-end manipulations. This is good for us because the library should be 100% decoupled from Angular. However, we haven't seen a straightforward way to utilize the Closure Compiler on our Angular code. Any suggestions?

[Stu Salsbury]

Regarding closure library/compiler -- I use separate files for the the angular module declaration and the app, and of course for each component.  

The module declarer just sets up the angular module with dependencies and provides the module -- that's it.   goog.provide('stu.module') if you will.

The components each require the module declarer and "call themselves" on the module.  goog.require('stu.module'); goog.provide('stu.serviceA');  (of course, there's no need to declare interdependencies between compiled components because we have Angular dependency injection to handle it -- however, to support unit testing on a component by component basis I set up the goog dependencies any way.)

The app requires the components and potentially executes config stuff on dependencies.   goog.require ('stu.app'); goog.require('stu.serviceA'); 

goog.provide('stu') is the entry point.  It has goog.require('app') and "naked" script to do any config that the compiled library needs to do on dependencies, and closure compiler wraps it in a self executing anonymous function for me.

 

Additional config and run are outside of closure compiler.

Does this make any sense?  Or are you having trouble with the internals?  What kinds of errors do you get? 

Incidentally, and getting somewhat back to the topic of this thread... this is the the exact same structure that I have used in the past with pure RequireJS -- from a provide/require standpoint, they can really do the same things, though it's nice in closure library not to have as much concern about the directory structure and single-provided-object-per-file restriction that requirejs has.

For app-specific config and run, I do switch to RequireJS because I use it for lazy loading as warranted with my lazy loading component (http://github.com/stu-salsbury/angular-couch-potato -- incidentally I'm planning to move my OSS angular stuff to a GCC architecture).

Closure Compiler has a flag angluar_pass which is supposed to support injection via a jsdoc comment, but when I use it I get compile errors that say "report this" -- which I haven't yet done.

My biggest headache with this so far has been testing, but I think I'm over the hump and actually thinking about writing some grunt tools to make the process I've worked out more easily repeatable by me and potentially others.

I agree with decoupling what you can from angular, btw.  I'm approaching it with the question, "would I be writing similar code if I was using Ember (or some other framework)?"  If so, write it in a namespace that doesn't know about angular and write it generically enough that it doesn't need to know.  For instance, model objects -- generic.  If I can do it generically with lodash, I do.  But I'd personally let angular do $http stuff (to name an example) as the "host" of my non-angular library/libraries.  It's easy enough to pass them services that they can use to call back into angular when they need something without them having to know that it's angular doing the work.

P.S.  I wish the angular team would at least generate externs with the build, even if it never builds with advanced compilation turned on.  Getting it exposed as raw goog.provide/require files will probably always remain a pipe dream.  Getting it written around lodash is probably just about as likely :)

P.P.S.  I feel an actual sense of dread about the fragmentation and ongoing divergence within the Javascript community with respect to dependency management and inheritance, and I don't think the FUD around Dart and ECMAScript Harmony is helping anyone figure out how to do things.

Who left their soapbox sitting here where anyone can just stand on it? ;)

 

--
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/fzHwPTg39gQ/unsubscribe.
To unsubscribe from this group and all its topics, send an email to angular+u...@googlegroups.com.

[Daman Singh]

I ve tried to develop a Proof of Concept using Angular Js with Require js using ASP.net MVC.

Please visit the link below

http://angualrjsrequirejsaspmvc.blogspot.com/2013/08/angular-js-with-require-js-front-end.html

[Daman Singh]

http://angualrjsrequirejsaspmvc.blogspot.com/2013/08/angular-js-with-require-js-front-end.html

On Tuesday, June 25, 2013 7:46:09 PM UTC+5:30, Noppanit Charassinvichai wrote:

[Markku Hinkka]

Hi,

I've been working lately on an idea of creating a prototype/proof of concept application for a large-scale application built on top of AngularJS and RequireJS. Due to RequireJS being used, it is quite trivial to combine, uglify and minimize the sources using RequireJS Optimizer (included into the project).

In addition to RequireJS and AngularJS, the prototype includes Twitter's Bootstrap as a responsive UI component library and angular-gettext for implementing i18n support for the application (two different languages provided in the prototype itself).

As other project features, LESS stylesheet language support was also implemented as well as simple mock-up of an authentication mechanism.

Testing support was implemented using Karma (unit tests) and Protractor (e2e-tests) for both of which a couple of example tests have been implemented. The project build itself is managed using Grunt. Optional Microsoft Visual Studio solution and project files are also provided since I've been using that as my development IDE.

So far I've been very happy with the selected tools. The only issue for me at the moment being the fact that you can't use RequireJS module dependencies to set dependencies between AngularJS modules. Instead, you have to separately define AngularJS module dependencies in Angular's own way. I think that is a small price to pay though for the gains you get since you don't really have to keep track of which files to load and when, even for non-angular files. You just write the dependencies and let RequireJS manage the loading.

...and of course there is also this: http://www.youtube.com/watch?v=W13qDdJDHp8&feature=player_detailpage#t=3301s

The prototype itself has already served me as a seed for a couple of smaller projects.

If interested, check the prototype project pages in github: https://github.com/mhinkka/angular-playground or check the live demo in: https://mhinkka.github.io/angular-playground/

[Mikayel]

I have added Closure Compiler to angularjs and requirejs seed https://github.com/mikayel/angular-requirejs-closure-compiler-seed
It will be relay grate to have AMD built-in AngularJS.

[刘阳]

I have no idea, but I was working on customize Kibana  and its integrated  RequireJs and AngularJs. 

在 2013年6月25日星期二UTC+8下午10时16分09秒，Noppanit Charassinvichai写道：