AngularJS with RequireJS
Upcoming SlideShare
Loading in...5

AngularJS with RequireJS



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:



Views auf SlideShare
Views einbetten


Gefällt mir

1 Einbettung 13 13



Details hochladen

Uploaded via as Adobe PDF


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

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Ihre Nachricht erscheint hier
Kommentar posten
Kommentar bearbeiten

AngularJS with RequireJS AngularJS with RequireJS Presentation Transcript

  • 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 app structure
  • Is RequireJS really needed? ‣ Simple & small apps ‣ The whole code in one file ‣ Load all packages manually <script src=“…“></script What about large apps…
  • … like apps with more classes?
  • 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 invoked when all defines() have completed ‣ config() 
 configure source paths, shims and aliases
  • define([dep1], function(dep1) {}) All your files are wrapped in a define() define() must return a Object which is cached in a registry
  • 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
  • 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 dependency injection mechanism.“
 (construction and ng module dependency)
  • 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
  • Organize the app
  • Example: Modules main.js & index.js
  • Controller Example
  • Example: Controller
  • Example on Github ‣
  • 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)
  • 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
  • Lazy load approaches ‣ ‣ ‣
  • @jowe Let’s talk! Johannes Weber