AngularJS with RequireJS
in practice
@jowe
Johannes Weber
Mayflower GmbH
Preview Take-aways
‣ AngularJS injects instances
‣ RequireJS injects classes
‣ Keep testing in mind when organizing your a...
Is RequireJS really needed?
‣ Simple & small apps
‣ The whole code in one file
‣ Load all packages manually <script src=“…...
… like apps with more classes?
http://andrewgelman.com/2009/06/30/visualizing_tab/
Schrift in weiß oder grau. Darauf achten, dass Text auf Motiv
lesbar bleibt.
Thema
It’s time for…
$ bower install requirejs
3 RequireJS APIs which you need to know
‣ define() 

define & register dependencies
‣ require() 

callback function invoke...
define([dep1], function(dep1) {})
All your files are wrapped in a define()
define() must return a Object which is cached i...
require([dep1], function(dep1) {})
Act as initialization or root of the dependency tree
Starts the cascade of dependency c...
require.config()
RequireJS configuration (path to sources, caching, etc.)
Configuration or aliases and shims
„RequireJS is a JavaScript file and
module loader.“

(load and runtime dependency)
„AngularJS comes with a built-in
depend...
Hot to use it with AngularJS?
‣ Use define() around all your code
‣ Use require.config() to set your paths & config
‣ Use ...
Organize the app
Example: Modules main.js & index.js
Controller Example
Example: Controller
Example on Github
‣ https://github.com/feibeck/StarshipMayflower
r.js - the RequireJS Optimizer
‣ Build & deploy RequireJS Apps
‣ Deploy uncompressed
‣ Deploy concatenate & uglified
‣ Plu...
Challenges on huge apps
‣ AMD is not just JavaScript, also CSS and Templates

RequireJS provides plugins for that
‣ Growin...
Lazy load approaches
‣ https://github.com/ifyio/angularjs-lazy-loading-with-requirejs
‣ https://github.com/szhanginrhythm/...
@jowe
Let’s talk!
Johannes Weber
AngularJS with RequireJS
Nächste SlideShare
Wird geladen in ...5
×

AngularJS with RequireJS

3,706

Published on

These are the slides from Johannes Weber's talk which were presented on AngularJS Lightning Talks #2 (2014-06-26) in Munich. More details about the event: http://www.meetup.com/AngularJS-Munich/events/164424472/

Published in: Software, Technologie
0 Kommentare
9 Gefällt mir
Statistiken
Notizen
  • Hinterlassen Sie den ersten Kommentar

Keine Downloads
Views
Gesamtviews
3,706
Bei Slideshare
0
Aus Einbettungen
0
Anzahl an Einbettungen
4
Aktionen
Geteilt
0
Downloads
77
Kommentare
0
Gefällt mir
9
Einbettungen 0
No embeds

No notes for slide

AngularJS with RequireJS

  1. 1. AngularJS with RequireJS in practice @jowe Johannes Weber Mayflower GmbH
  2. 2. Preview Take-aways ‣ AngularJS injects instances ‣ RequireJS injects classes ‣ Keep testing in mind when organizing your app structure
  3. 3. Is RequireJS really needed? ‣ Simple & small apps ‣ The whole code in one file ‣ Load all packages manually <script src=“…“></script What about large apps…
  4. 4. … like apps with more classes? http://andrewgelman.com/2009/06/30/visualizing_tab/
  5. 5. Schrift in weiß oder grau. Darauf achten, dass Text auf Motiv lesbar bleibt. Thema It’s time for… $ bower install requirejs
  6. 6. 3 RequireJS APIs which you need to know ‣ define() 
 define & register dependencies ‣ require() 
 callback function invoked when all defines() have completed ‣ config() 
 configure source paths, shims and aliases
  7. 7. define([dep1], function(dep1) {}) All your files are wrapped in a define() define() must return a Object which is cached in a registry
  8. 8. require([dep1], function(dep1) {}) Act as initialization or root of the dependency tree Starts the cascade of dependency checks and script loading Starts the cascade of define() triggers
  9. 9. require.config() RequireJS configuration (path to sources, caching, etc.) Configuration or aliases and shims
  10. 10. „RequireJS is a JavaScript file and module loader.“
 (load and runtime dependency) „AngularJS comes with a built-in dependency injection mechanism.“
 (construction and ng module dependency)
  11. 11. Hot to use it with AngularJS? ‣ Use define() around all your code ‣ Use require.config() to set your paths & config ‣ Use require() to launch your initialize your App https://github.com/tnajdek/angular-requirejs-seed
  12. 12. Organize the app
  13. 13. Example: Modules main.js & index.js
  14. 14. Controller Example
  15. 15. Example: Controller
  16. 16. Example on Github ‣ https://github.com/feibeck/StarshipMayflower
  17. 17. r.js - the RequireJS Optimizer ‣ Build & deploy RequireJS Apps ‣ Deploy uncompressed ‣ Deploy concatenate & uglified ‣ Plugins available for ‣ grunt (grunt-requirejs) ‣ gulp(gulp-requirejs) ‣ broccoli (broccoli-requirejs)
  18. 18. Challenges on huge apps ‣ AMD is not just JavaScript, also CSS and Templates
 RequireJS provides plugins for that ‣ Growing app size from trivial to complex
 could be solved by partitioned modules ‣ On-demand load and unload modules
 Currently very difficult ‣ AngularJS 2.0 - deferred loading with ES6 annonations
  19. 19. Lazy load approaches ‣ https://github.com/ifyio/angularjs-lazy-loading-with-requirejs ‣ https://github.com/szhanginrhythm/angular-require-lazyload ‣ https://github.com/stu-salsbury/angular-couch-potato/
  20. 20. @jowe Let’s talk! Johannes Weber
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×