SlideShare a Scribd company logo
AngularJS with RequireJS
in practice
@jowe
Johannes Weber
Mayflower GmbH
AngularJS with RequireJS
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 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
‣ 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
Ad

Recommended

Angularjs - lazy loading techniques
Angularjs - lazy loading techniques
Nir Kaufman
 
Angular Lazy Loading and Resolve (Route Resolver)
Angular Lazy Loading and Resolve (Route Resolver)
Squash Apps Pvt Ltd
 
AngularJS - Architecture decisions in a large project 
AngularJS - Architecture decisions in a large project 
Elad Hirsch
 
AngularJS application architecture
AngularJS application architecture
Gabriele Falace
 
Workshop 16: EmberJS Parte I
Workshop 16: EmberJS Parte I
Visual Engineering
 
AngularJS Basics
AngularJS Basics
Ravi Mone
 
AngularJS 101 - Everything you need to know to get started
AngularJS 101 - Everything you need to know to get started
Stéphane Bégaudeau
 
AngularJS - What is it & Why is it awesome ? (with demos)
AngularJS - What is it & Why is it awesome ? (with demos)
Gary Arora
 
AngularJS Best Practices
AngularJS Best Practices
Betclic Everest Group Tech Team
 
Angular js tutorial slides
Angular js tutorial slides
samhelman
 
AngularJS Introduction
AngularJS Introduction
Carlos Morales
 
AngularJS introduction
AngularJS introduction
Tania Gonzales
 
Modern Web Application Development Workflow - EclipseCon Europe 2014
Modern Web Application Development Workflow - EclipseCon Europe 2014
Stéphane Bégaudeau
 
Workshop 9: BackboneJS y patrones MVC
Workshop 9: BackboneJS y patrones MVC
Visual Engineering
 
Angularjs architecture
Angularjs architecture
Michael He
 
Introduction to Angular js 2.0
Introduction to Angular js 2.0
Nagaraju Sangam
 
Why angular js Framework
Why angular js Framework
Sakthi Bro
 
The Art of AngularJS - DeRailed 2014
The Art of AngularJS - DeRailed 2014
Matt Raible
 
Introduction to Angularjs
Introduction to Angularjs
Manish Shekhawat
 
ReactJS vs AngularJS - Head to Head comparison
ReactJS vs AngularJS - Head to Head comparison
500Tech
 
AngularJS Basics and Best Practices - CC FE &UX
AngularJS Basics and Best Practices - CC FE &UX
JWORKS powered by Ordina
 
Advanced Tips & Tricks for using Angular JS
Advanced Tips & Tricks for using Angular JS
Simon Guest
 
Introduction to VueJS & Vuex
Introduction to VueJS & Vuex
Bernd Alter
 
Integrating React.js Into a PHP Application
Integrating React.js Into a PHP Application
Andrew Rota
 
Workshop 2: JavaScript Design Patterns
Workshop 2: JavaScript Design Patterns
Visual Engineering
 
Node, express & sails
Node, express & sails
Brian Shannon
 
Introduction to single page application with angular js
Introduction to single page application with angular js
Mindfire Solutions
 
5 angularjs features
5 angularjs features
Alexey (Mr_Mig) Migutsky
 
Single Page Applications with AngularJS 2.0
Single Page Applications with AngularJS 2.0
Sumanth Chinthagunta
 
2010-08-26-mongodb-step-by-step-by-hexnova
2010-08-26-mongodb-step-by-step-by-hexnova
ccdaisy
 

More Related Content

What's hot (20)

AngularJS Best Practices
AngularJS Best Practices
Betclic Everest Group Tech Team
 
Angular js tutorial slides
Angular js tutorial slides
samhelman
 
AngularJS Introduction
AngularJS Introduction
Carlos Morales
 
AngularJS introduction
AngularJS introduction
Tania Gonzales
 
Modern Web Application Development Workflow - EclipseCon Europe 2014
Modern Web Application Development Workflow - EclipseCon Europe 2014
Stéphane Bégaudeau
 
Workshop 9: BackboneJS y patrones MVC
Workshop 9: BackboneJS y patrones MVC
Visual Engineering
 
Angularjs architecture
Angularjs architecture
Michael He
 
Introduction to Angular js 2.0
Introduction to Angular js 2.0
Nagaraju Sangam
 
Why angular js Framework
Why angular js Framework
Sakthi Bro
 
The Art of AngularJS - DeRailed 2014
The Art of AngularJS - DeRailed 2014
Matt Raible
 
Introduction to Angularjs
Introduction to Angularjs
Manish Shekhawat
 
ReactJS vs AngularJS - Head to Head comparison
ReactJS vs AngularJS - Head to Head comparison
500Tech
 
AngularJS Basics and Best Practices - CC FE &UX
AngularJS Basics and Best Practices - CC FE &UX
JWORKS powered by Ordina
 
Advanced Tips & Tricks for using Angular JS
Advanced Tips & Tricks for using Angular JS
Simon Guest
 
Introduction to VueJS & Vuex
Introduction to VueJS & Vuex
Bernd Alter
 
Integrating React.js Into a PHP Application
Integrating React.js Into a PHP Application
Andrew Rota
 
Workshop 2: JavaScript Design Patterns
Workshop 2: JavaScript Design Patterns
Visual Engineering
 
Node, express & sails
Node, express & sails
Brian Shannon
 
Introduction to single page application with angular js
Introduction to single page application with angular js
Mindfire Solutions
 
5 angularjs features
5 angularjs features
Alexey (Mr_Mig) Migutsky
 
Angular js tutorial slides
Angular js tutorial slides
samhelman
 
AngularJS Introduction
AngularJS Introduction
Carlos Morales
 
AngularJS introduction
AngularJS introduction
Tania Gonzales
 
Modern Web Application Development Workflow - EclipseCon Europe 2014
Modern Web Application Development Workflow - EclipseCon Europe 2014
Stéphane Bégaudeau
 
Workshop 9: BackboneJS y patrones MVC
Workshop 9: BackboneJS y patrones MVC
Visual Engineering
 
Angularjs architecture
Angularjs architecture
Michael He
 
Introduction to Angular js 2.0
Introduction to Angular js 2.0
Nagaraju Sangam
 
Why angular js Framework
Why angular js Framework
Sakthi Bro
 
The Art of AngularJS - DeRailed 2014
The Art of AngularJS - DeRailed 2014
Matt Raible
 
ReactJS vs AngularJS - Head to Head comparison
ReactJS vs AngularJS - Head to Head comparison
500Tech
 
AngularJS Basics and Best Practices - CC FE &UX
AngularJS Basics and Best Practices - CC FE &UX
JWORKS powered by Ordina
 
Advanced Tips & Tricks for using Angular JS
Advanced Tips & Tricks for using Angular JS
Simon Guest
 
Introduction to VueJS & Vuex
Introduction to VueJS & Vuex
Bernd Alter
 
Integrating React.js Into a PHP Application
Integrating React.js Into a PHP Application
Andrew Rota
 
Workshop 2: JavaScript Design Patterns
Workshop 2: JavaScript Design Patterns
Visual Engineering
 
Node, express & sails
Node, express & sails
Brian Shannon
 
Introduction to single page application with angular js
Introduction to single page application with angular js
Mindfire Solutions
 

Viewers also liked (11)

Single Page Applications with AngularJS 2.0
Single Page Applications with AngularJS 2.0
Sumanth Chinthagunta
 
2010-08-26-mongodb-step-by-step-by-hexnova
2010-08-26-mongodb-step-by-step-by-hexnova
ccdaisy
 
CONCEPT OF DISPARITIES AMONG WOMEN
CONCEPT OF DISPARITIES AMONG WOMEN
Pooja Patil
 
Handlebars.js
Handlebars.js
Ivano Malavolta
 
Hexagonal architecture - message-oriented software design (PHP Benelux 2016)
Hexagonal architecture - message-oriented software design (PHP Benelux 2016)
Matthias Noback
 
Measuring the Performance of Single Page Applications
Measuring the Performance of Single Page Applications
Nicholas Jansma
 
Single-Page Application Design Principles 101
Single-Page Application Design Principles 101
Jollen Chen
 
RequireJS & Handlebars
RequireJS & Handlebars
Ivano Malavolta
 
Get Hip with JHipster: Spring Boot + AngularJS + Bootstrap - DOSUG February 2016
Get Hip with JHipster: Spring Boot + AngularJS + Bootstrap - DOSUG February 2016
Matt Raible
 
JS FAST Prototyping with AngularJS & RequireJS
JS FAST Prototyping with AngularJS & RequireJS
Yuriy Silvestrov
 
Fast prototyping apps using AngularJS, RequireJS and Twitter Bootstrap
Fast prototyping apps using AngularJS, RequireJS and Twitter Bootstrap
Yuriy Silvestrov
 
Single Page Applications with AngularJS 2.0
Single Page Applications with AngularJS 2.0
Sumanth Chinthagunta
 
2010-08-26-mongodb-step-by-step-by-hexnova
2010-08-26-mongodb-step-by-step-by-hexnova
ccdaisy
 
CONCEPT OF DISPARITIES AMONG WOMEN
CONCEPT OF DISPARITIES AMONG WOMEN
Pooja Patil
 
Hexagonal architecture - message-oriented software design (PHP Benelux 2016)
Hexagonal architecture - message-oriented software design (PHP Benelux 2016)
Matthias Noback
 
Measuring the Performance of Single Page Applications
Measuring the Performance of Single Page Applications
Nicholas Jansma
 
Single-Page Application Design Principles 101
Single-Page Application Design Principles 101
Jollen Chen
 
Get Hip with JHipster: Spring Boot + AngularJS + Bootstrap - DOSUG February 2016
Get Hip with JHipster: Spring Boot + AngularJS + Bootstrap - DOSUG February 2016
Matt Raible
 
JS FAST Prototyping with AngularJS & RequireJS
JS FAST Prototyping with AngularJS & RequireJS
Yuriy Silvestrov
 
Fast prototyping apps using AngularJS, RequireJS and Twitter Bootstrap
Fast prototyping apps using AngularJS, RequireJS and Twitter Bootstrap
Yuriy Silvestrov
 
Ad

Similar to AngularJS with RequireJS (20)

AngularJS Project Setup step-by- step guide - RapidValue Solutions
AngularJS Project Setup step-by- step guide - RapidValue Solutions
RapidValue
 
Play Support in Cloud Foundry
Play Support in Cloud Foundry
rajdeep
 
Scripting Oracle Develop 2007
Scripting Oracle Develop 2007
Tugdual Grall
 
RequireJS
RequireJS
Tim Doherty
 
Spring boot introduction
Spring boot introduction
Rasheed Waraich
 
Angular - Chapter 1 - Introduction
Angular - Chapter 1 - Introduction
WebStackAcademy
 
Gradle
Gradle
Andrii Khaisin
 
Javascript ui for rest services
Javascript ui for rest services
Ioan Eugen Stan
 
Single Page JavaScript WebApps... A Gradle Story
Single Page JavaScript WebApps... A Gradle Story
Kon Soulianidis
 
Cannibalising The Google App Engine
Cannibalising The Google App Engine
catherinewall
 
Basics of Vue.js 2019
Basics of Vue.js 2019
Paul Bele
 
Modular Test-driven SPAs with Spring and AngularJS
Modular Test-driven SPAs with Spring and AngularJS
Gunnar Hillert
 
Dog food conference creating modular webparts with require js in sharepoint
Dog food conference creating modular webparts with require js in sharepoint
fahey252
 
GWT training session 1
GWT training session 1
SNEHAL MASNE
 
Treinamento frontend
Treinamento frontend
Adrian Caetano
 
Introduction To Code Igniter
Introduction To Code Igniter
Amzad Hossain
 
React Native
React Native
Craig Jolicoeur
 
20170321 docker with Visual Studio 2017
20170321 docker with Visual Studio 2017
Takayoshi Tanaka
 
Beginning MEAN Stack
Beginning MEAN Stack
Rob Davarnia
 
Google Cloud Platform
Google Cloud Platform
Francesco Marchitelli
 
AngularJS Project Setup step-by- step guide - RapidValue Solutions
AngularJS Project Setup step-by- step guide - RapidValue Solutions
RapidValue
 
Play Support in Cloud Foundry
Play Support in Cloud Foundry
rajdeep
 
Scripting Oracle Develop 2007
Scripting Oracle Develop 2007
Tugdual Grall
 
Spring boot introduction
Spring boot introduction
Rasheed Waraich
 
Angular - Chapter 1 - Introduction
Angular - Chapter 1 - Introduction
WebStackAcademy
 
Javascript ui for rest services
Javascript ui for rest services
Ioan Eugen Stan
 
Single Page JavaScript WebApps... A Gradle Story
Single Page JavaScript WebApps... A Gradle Story
Kon Soulianidis
 
Cannibalising The Google App Engine
Cannibalising The Google App Engine
catherinewall
 
Basics of Vue.js 2019
Basics of Vue.js 2019
Paul Bele
 
Modular Test-driven SPAs with Spring and AngularJS
Modular Test-driven SPAs with Spring and AngularJS
Gunnar Hillert
 
Dog food conference creating modular webparts with require js in sharepoint
Dog food conference creating modular webparts with require js in sharepoint
fahey252
 
GWT training session 1
GWT training session 1
SNEHAL MASNE
 
Introduction To Code Igniter
Introduction To Code Igniter
Amzad Hossain
 
20170321 docker with Visual Studio 2017
20170321 docker with Visual Studio 2017
Takayoshi Tanaka
 
Beginning MEAN Stack
Beginning MEAN Stack
Rob Davarnia
 
Ad

More from Johannes Weber (20)

Progressive Web Apps - Intro & Learnings
Progressive Web Apps - Intro & Learnings
Johannes Weber
 
Progressive Web Apps
Progressive Web Apps
Johannes Weber
 
Formular handling in AngularJS
Formular handling in AngularJS
Johannes Weber
 
AngularJS Munich Meetup #7 - Intro
AngularJS Munich Meetup #7 - Intro
Johannes Weber
 
#perfmatters - Optimizing the Critical Rendering Path
#perfmatters - Optimizing the Critical Rendering Path
Johannes Weber
 
LeanJS - Lean startup with JavaScript
LeanJS - Lean startup with JavaScript
Johannes Weber
 
The evolution of Angular 2 @ AngularJS Munich Meetup #5
The evolution of Angular 2 @ AngularJS Munich Meetup #5
Johannes Weber
 
A Story about AngularJS modularization development
A Story about AngularJS modularization development
Johannes Weber
 
Debugging War Stories & Strategies to Survive on RejectJS 2014
Debugging War Stories & Strategies to Survive on RejectJS 2014
Johannes Weber
 
Updated: Fiese Fallstricke, sexy Strategien
Updated: Fiese Fallstricke, sexy Strategien
Johannes Weber
 
Responsive Webdesign: Fiese Fallstricke und sexy Strategien
Responsive Webdesign: Fiese Fallstricke und sexy Strategien
Johannes Weber
 
Facebook, Google, Youtube & co
Facebook, Google, Youtube & co
Johannes Weber
 
User centered design - Personas
User centered design - Personas
Johannes Weber
 
Usability Test Inlandsüberweisung
Usability Test Inlandsüberweisung
Johannes Weber
 
Paper: Steuerung öffentlicher Screens
Paper: Steuerung öffentlicher Screens
Johannes Weber
 
Steuerung öffentlicher Screens
Steuerung öffentlicher Screens
Johannes Weber
 
Customer Centered Design
Customer Centered Design
Johannes Weber
 
Hardware Usability Testing
Hardware Usability Testing
Johannes Weber
 
Projektmanagement & Innovation
Projektmanagement & Innovation
Johannes Weber
 
Progressive Web Apps - Intro & Learnings
Progressive Web Apps - Intro & Learnings
Johannes Weber
 
Formular handling in AngularJS
Formular handling in AngularJS
Johannes Weber
 
AngularJS Munich Meetup #7 - Intro
AngularJS Munich Meetup #7 - Intro
Johannes Weber
 
#perfmatters - Optimizing the Critical Rendering Path
#perfmatters - Optimizing the Critical Rendering Path
Johannes Weber
 
LeanJS - Lean startup with JavaScript
LeanJS - Lean startup with JavaScript
Johannes Weber
 
The evolution of Angular 2 @ AngularJS Munich Meetup #5
The evolution of Angular 2 @ AngularJS Munich Meetup #5
Johannes Weber
 
A Story about AngularJS modularization development
A Story about AngularJS modularization development
Johannes Weber
 
Debugging War Stories & Strategies to Survive on RejectJS 2014
Debugging War Stories & Strategies to Survive on RejectJS 2014
Johannes Weber
 
Updated: Fiese Fallstricke, sexy Strategien
Updated: Fiese Fallstricke, sexy Strategien
Johannes Weber
 
Responsive Webdesign: Fiese Fallstricke und sexy Strategien
Responsive Webdesign: Fiese Fallstricke und sexy Strategien
Johannes Weber
 
Facebook, Google, Youtube & co
Facebook, Google, Youtube & co
Johannes Weber
 
User centered design - Personas
User centered design - Personas
Johannes Weber
 
Usability Test Inlandsüberweisung
Usability Test Inlandsüberweisung
Johannes Weber
 
Paper: Steuerung öffentlicher Screens
Paper: Steuerung öffentlicher Screens
Johannes Weber
 
Steuerung öffentlicher Screens
Steuerung öffentlicher Screens
Johannes Weber
 
Customer Centered Design
Customer Centered Design
Johannes Weber
 
Hardware Usability Testing
Hardware Usability Testing
Johannes Weber
 
Projektmanagement & Innovation
Projektmanagement & Innovation
Johannes Weber
 

Recently uploaded (20)

Azure AI Foundry: The AI app and agent factory
Azure AI Foundry: The AI app and agent factory
Maxim Salnikov
 
On-Device AI: Is It Time to Go All-In, or Do We Still Need the Cloud?
On-Device AI: Is It Time to Go All-In, or Do We Still Need the Cloud?
Hassan Abid
 
Foundations of Marketo Engage - Programs, Campaigns & Beyond - June 2025
Foundations of Marketo Engage - Programs, Campaigns & Beyond - June 2025
BradBedford3
 
Test Case Design Techniques – Practical Examples & Best Practices in Software...
Test Case Design Techniques – Practical Examples & Best Practices in Software...
Muhammad Fahad Bashir
 
IObit Driver Booster Pro 12 Crack Latest Version Download
IObit Driver Booster Pro 12 Crack Latest Version Download
pcprocore
 
Threat Modeling a Batch Job Framework - Teri Radichel - AWS re:Inforce 2025
Threat Modeling a Batch Job Framework - Teri Radichel - AWS re:Inforce 2025
2nd Sight Lab
 
NVIDIA GPU Technologies for AI and High-Performance Computing
NVIDIA GPU Technologies for AI and High-Performance Computing
SandeepKS52
 
Smadav Pro 2025 Rev 15.4 Crack Full Version With Registration Key
Smadav Pro 2025 Rev 15.4 Crack Full Version With Registration Key
joybepari360
 
Key Challenges in Troubleshooting Customer On-Premise Applications
Key Challenges in Troubleshooting Customer On-Premise Applications
Tier1 app
 
Application Modernization with Choreo - The AI-Native Internal Developer Plat...
Application Modernization with Choreo - The AI-Native Internal Developer Plat...
WSO2
 
Download Adobe Illustrator Crack free for Windows 2025?
Download Adobe Illustrator Crack free for Windows 2025?
grete1122g
 
HYBRIDIZATION OF ALKANES AND ALKENES ...
HYBRIDIZATION OF ALKANES AND ALKENES ...
karishmaduhijod1
 
SAP PM Module Level-IV Training Complete.ppt
SAP PM Module Level-IV Training Complete.ppt
MuhammadShaheryar36
 
MOVIE RECOMMENDATION SYSTEM, UDUMULA GOPI REDDY, Y24MC13085.pptx
MOVIE RECOMMENDATION SYSTEM, UDUMULA GOPI REDDY, Y24MC13085.pptx
Maharshi Mallela
 
Microsoft Business-230T01A-ENU-PowerPoint_01.pptx
Microsoft Business-230T01A-ENU-PowerPoint_01.pptx
soulamaabdoulaye128
 
OpenChain Webinar - AboutCode - Practical Compliance in One Stack – Licensing...
OpenChain Webinar - AboutCode - Practical Compliance in One Stack – Licensing...
Shane Coughlan
 
IDM Crack with Internet Download Manager 6.42 Build 41 [Latest 2025]
IDM Crack with Internet Download Manager 6.42 Build 41 [Latest 2025]
pcprocore
 
Milwaukee Marketo User Group June 2025 - Optimize and Enhance Efficiency - Sm...
Milwaukee Marketo User Group June 2025 - Optimize and Enhance Efficiency - Sm...
BradBedford3
 
Streamlining CI/CD with FME Flow: A Practical Guide
Streamlining CI/CD with FME Flow: A Practical Guide
Safe Software
 
arctitecture application system design os dsa
arctitecture application system design os dsa
za241967
 
Azure AI Foundry: The AI app and agent factory
Azure AI Foundry: The AI app and agent factory
Maxim Salnikov
 
On-Device AI: Is It Time to Go All-In, or Do We Still Need the Cloud?
On-Device AI: Is It Time to Go All-In, or Do We Still Need the Cloud?
Hassan Abid
 
Foundations of Marketo Engage - Programs, Campaigns & Beyond - June 2025
Foundations of Marketo Engage - Programs, Campaigns & Beyond - June 2025
BradBedford3
 
Test Case Design Techniques – Practical Examples & Best Practices in Software...
Test Case Design Techniques – Practical Examples & Best Practices in Software...
Muhammad Fahad Bashir
 
IObit Driver Booster Pro 12 Crack Latest Version Download
IObit Driver Booster Pro 12 Crack Latest Version Download
pcprocore
 
Threat Modeling a Batch Job Framework - Teri Radichel - AWS re:Inforce 2025
Threat Modeling a Batch Job Framework - Teri Radichel - AWS re:Inforce 2025
2nd Sight Lab
 
NVIDIA GPU Technologies for AI and High-Performance Computing
NVIDIA GPU Technologies for AI and High-Performance Computing
SandeepKS52
 
Smadav Pro 2025 Rev 15.4 Crack Full Version With Registration Key
Smadav Pro 2025 Rev 15.4 Crack Full Version With Registration Key
joybepari360
 
Key Challenges in Troubleshooting Customer On-Premise Applications
Key Challenges in Troubleshooting Customer On-Premise Applications
Tier1 app
 
Application Modernization with Choreo - The AI-Native Internal Developer Plat...
Application Modernization with Choreo - The AI-Native Internal Developer Plat...
WSO2
 
Download Adobe Illustrator Crack free for Windows 2025?
Download Adobe Illustrator Crack free for Windows 2025?
grete1122g
 
HYBRIDIZATION OF ALKANES AND ALKENES ...
HYBRIDIZATION OF ALKANES AND ALKENES ...
karishmaduhijod1
 
SAP PM Module Level-IV Training Complete.ppt
SAP PM Module Level-IV Training Complete.ppt
MuhammadShaheryar36
 
MOVIE RECOMMENDATION SYSTEM, UDUMULA GOPI REDDY, Y24MC13085.pptx
MOVIE RECOMMENDATION SYSTEM, UDUMULA GOPI REDDY, Y24MC13085.pptx
Maharshi Mallela
 
Microsoft Business-230T01A-ENU-PowerPoint_01.pptx
Microsoft Business-230T01A-ENU-PowerPoint_01.pptx
soulamaabdoulaye128
 
OpenChain Webinar - AboutCode - Practical Compliance in One Stack – Licensing...
OpenChain Webinar - AboutCode - Practical Compliance in One Stack – Licensing...
Shane Coughlan
 
IDM Crack with Internet Download Manager 6.42 Build 41 [Latest 2025]
IDM Crack with Internet Download Manager 6.42 Build 41 [Latest 2025]
pcprocore
 
Milwaukee Marketo User Group June 2025 - Optimize and Enhance Efficiency - Sm...
Milwaukee Marketo User Group June 2025 - Optimize and Enhance Efficiency - Sm...
BradBedford3
 
Streamlining CI/CD with FME Flow: A Practical Guide
Streamlining CI/CD with FME Flow: A Practical Guide
Safe Software
 
arctitecture application system design os dsa
arctitecture application system design os dsa
za241967
 

AngularJS with RequireJS

  • 1. AngularJS with RequireJS in practice @jowe Johannes Weber Mayflower GmbH
  • 3. Preview Take-aways ‣ AngularJS injects instances ‣ RequireJS injects classes ‣ Keep testing in mind when organizing your app structure
  • 4. Is RequireJS really needed? ‣ Simple & small apps ‣ The whole code in one file ‣ Load all packages manually <script src=“…“></script What about large apps…
  • 5. … like apps with more classes? http://andrewgelman.com/2009/06/30/visualizing_tab/
  • 6. Schrift in weiß oder grau. Darauf achten, dass Text auf Motiv lesbar bleibt. Thema It’s time for… $ bower install requirejs
  • 7. 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
  • 8. define([dep1], function(dep1) {}) All your files are wrapped in a define() define() must return a Object which is cached in a registry
  • 9. 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
  • 10. require.config() RequireJS configuration (path to sources, caching, etc.) Configuration or aliases and shims
  • 11. „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)
  • 12. 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
  • 17. Example on Github ‣ https://github.com/feibeck/StarshipMayflower
  • 18. 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)
  • 19. 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
  • 20. 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/