AngularJS with RequireJS
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

AngularJS with RequireJS

am

  • 988 Views

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/

Statistiken

Views

Gesamtviews
988
Views auf SlideShare
972
Views einbetten
16

Actions

Gefällt mir
3
Downloads
18
Kommentare
0

2 Einbettungen 16

http://www.slideee.com 15
https://twitter.com 1

Zugänglichkeit

Kategorien

Details hochladen

Uploaded via as Adobe PDF

Benutzerrechte

© Alle Rechte vorbehalten

Report content

Als unangemessen gemeldet Als unangemessen melden
Als unangemessen melden

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

Löschen
  • Full Name Full Name Comment goes here.
    Sind Sie sicher, dass Sie...
    Ihre Nachricht erscheint hier
    Processing...
Kommentar posten
Kommentar bearbeiten

AngularJS with RequireJS Presentation 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