• Gefällt mir
AngularJS with RequireJS
Nächste SlideShare
Wird geladen in ...5
×

AngularJS with RequireJS

  • 1,279 Views
Hochgeladen am

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

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/

Mehr in: Software , Technologie
  • Full Name Full Name Comment goes here.
    Sind Sie sicher, dass Sie...
    Ihre Nachricht erscheint hier
    Hinterlassen Sie den ersten Kommentar
Keine Downloads

Views

Gesamtviews
1,279
Bei Slideshare
0
Aus Einbettungen
0
Anzahl an Einbettungen
3

Aktionen

Geteilt
Downloads
23
Kommentare
0
Gefällt mir
3

Einbettungen 0

No embeds

Inhalte melden

Als unangemessen gemeldet Als unangemessen melden
Als unangemessen melden

Wählen Sie Ihren Grund, warum Sie diese Präsentation als unangemessen melden.

Löschen
    No notes for slide

Transcript

  • 1. AngularJS with RequireJS in practice @jowe Johannes Weber Mayflower GmbH
  • 2. Preview Take-aways ‣ AngularJS injects instances ‣ RequireJS injects classes ‣ Keep testing in mind when organizing your app structure
  • 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. … like apps with more classes? http://andrewgelman.com/2009/06/30/visualizing_tab/
  • 5. Schrift in weiß oder grau. Darauf achten, dass Text auf Motiv lesbar bleibt. Thema It’s time for… $ bower install requirejs
  • 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. define([dep1], function(dep1) {}) All your files are wrapped in a define() define() must return a Object which is cached in a registry
  • 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. require.config() RequireJS configuration (path to sources, caching, etc.) Configuration or aliases and shims
  • 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. 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. Organize the app
  • 13. Example: Modules main.js & index.js
  • 14. Controller Example
  • 15. Example: Controller
  • 16. Example on Github ‣ https://github.com/feibeck/StarshipMayflower
  • 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. 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. 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. @jowe Let’s talk! Johannes Weber