angularjs with requirejs
DESCRIPTION
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/TRANSCRIPT
![Page 1: AngularJS with RequireJS](https://reader033.vdocuments.us/reader033/viewer/2022051314/54b6c6f44a79599f728b45ab/html5/thumbnails/1.jpg)
AngularJS with RequireJS in practice
@jowe
Johannes Weber
Mayflower GmbH
![Page 2: AngularJS with RequireJS](https://reader033.vdocuments.us/reader033/viewer/2022051314/54b6c6f44a79599f728b45ab/html5/thumbnails/2.jpg)
![Page 3: AngularJS with RequireJS](https://reader033.vdocuments.us/reader033/viewer/2022051314/54b6c6f44a79599f728b45ab/html5/thumbnails/3.jpg)
Preview Take-aways
‣ AngularJS injects instances
‣ RequireJS injects classes
‣ Keep testing in mind when organizing your app structure
![Page 4: AngularJS with RequireJS](https://reader033.vdocuments.us/reader033/viewer/2022051314/54b6c6f44a79599f728b45ab/html5/thumbnails/4.jpg)
Is RequireJS really needed?
‣ Simple & small apps
‣ The whole code in one file
‣ Load all packages manually <script src=“…“></script
What about large apps…
![Page 5: AngularJS with RequireJS](https://reader033.vdocuments.us/reader033/viewer/2022051314/54b6c6f44a79599f728b45ab/html5/thumbnails/5.jpg)
… like apps with more classes?
http://andrewgelman.com/2009/06/30/visualizing_tab/
![Page 6: AngularJS with RequireJS](https://reader033.vdocuments.us/reader033/viewer/2022051314/54b6c6f44a79599f728b45ab/html5/thumbnails/6.jpg)
Schrift in weiß oder grau. Darauf achten, dass Text auf Motiv lesbar bleibt.
Thema
It’s time for…
$ bower install requirejs
![Page 7: AngularJS with RequireJS](https://reader033.vdocuments.us/reader033/viewer/2022051314/54b6c6f44a79599f728b45ab/html5/thumbnails/7.jpg)
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
![Page 8: AngularJS with RequireJS](https://reader033.vdocuments.us/reader033/viewer/2022051314/54b6c6f44a79599f728b45ab/html5/thumbnails/8.jpg)
define([dep1], function(dep1) {})All your files are wrapped in a define()
define() must return a Object which is cached in a registry
![Page 9: AngularJS with RequireJS](https://reader033.vdocuments.us/reader033/viewer/2022051314/54b6c6f44a79599f728b45ab/html5/thumbnails/9.jpg)
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
![Page 10: AngularJS with RequireJS](https://reader033.vdocuments.us/reader033/viewer/2022051314/54b6c6f44a79599f728b45ab/html5/thumbnails/10.jpg)
require.config()
RequireJS configuration (path to sources, caching, etc.)
Configuration or aliases and shims
![Page 11: AngularJS with RequireJS](https://reader033.vdocuments.us/reader033/viewer/2022051314/54b6c6f44a79599f728b45ab/html5/thumbnails/11.jpg)
„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)
![Page 12: AngularJS with RequireJS](https://reader033.vdocuments.us/reader033/viewer/2022051314/54b6c6f44a79599f728b45ab/html5/thumbnails/12.jpg)
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
![Page 13: AngularJS with RequireJS](https://reader033.vdocuments.us/reader033/viewer/2022051314/54b6c6f44a79599f728b45ab/html5/thumbnails/13.jpg)
Organize the app
![Page 14: AngularJS with RequireJS](https://reader033.vdocuments.us/reader033/viewer/2022051314/54b6c6f44a79599f728b45ab/html5/thumbnails/14.jpg)
Example: Modules main.js & index.js
![Page 15: AngularJS with RequireJS](https://reader033.vdocuments.us/reader033/viewer/2022051314/54b6c6f44a79599f728b45ab/html5/thumbnails/15.jpg)
Controller Example
![Page 16: AngularJS with RequireJS](https://reader033.vdocuments.us/reader033/viewer/2022051314/54b6c6f44a79599f728b45ab/html5/thumbnails/16.jpg)
Example: Controller
![Page 17: AngularJS with RequireJS](https://reader033.vdocuments.us/reader033/viewer/2022051314/54b6c6f44a79599f728b45ab/html5/thumbnails/17.jpg)
Example on Github
‣ https://github.com/feibeck/StarshipMayflower
![Page 18: AngularJS with RequireJS](https://reader033.vdocuments.us/reader033/viewer/2022051314/54b6c6f44a79599f728b45ab/html5/thumbnails/18.jpg)
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)
![Page 19: AngularJS with RequireJS](https://reader033.vdocuments.us/reader033/viewer/2022051314/54b6c6f44a79599f728b45ab/html5/thumbnails/19.jpg)
Challenges on huge apps
‣ AMD is not just JavaScript, also CSS and TemplatesRequireJS provides plugins for that
‣ Growing app size from trivial to complexcould be solved by partitioned modules
‣ On-demand load and unload modulesCurrently very difficult
‣ AngularJS 2.0 - deferred loading with ES6 annonations
![Page 20: AngularJS with RequireJS](https://reader033.vdocuments.us/reader033/viewer/2022051314/54b6c6f44a79599f728b45ab/html5/thumbnails/20.jpg)
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/
![Page 21: AngularJS with RequireJS](https://reader033.vdocuments.us/reader033/viewer/2022051314/54b6c6f44a79599f728b45ab/html5/thumbnails/21.jpg)
@jowe
Let’s talk!
Johannes Weber