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?

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

https://github.com/tnajdek/angular-requirejs-seed

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

‣ Plugins available for

‣ grunt (grunt-requirejs)

‣ gulp(gulp-requirejs)

‣ broccoli (broccoli-requirejs)

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

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/

@jowe

Let’s talk!

Johannes Weber