AMD

and

Lazy Loading


*

with

(*Asynchronous Module Definition)
 

About Me

Front-end developer
&
@
filiptc @ gmail.com
Philip Thomas Casado
filiptc



 

Contents

  1. AMD
  2. Intro to RequireJS
  3. AngularJS + RequireJS
  4. AngularJS with lazy loading
  5. Future of AngularJS AMD (bonus)
 

AMD

"The Asynchronous Module Definition (AMD) API specifies a mechanism for defining modules such that the module and its dependencies can be asynchronously loaded."
(Group for AMD JS Module API)
It "can be used during development to keep JavaScript files encapsulated in many different files."
(AMD - Wikipedia)
 

AMD

define(id?, dependencies?, factory);

AMD





curl.js

RequireJS 

<script data-main="/src/main" src="/vendor/require.js" />
define(name?, deps?, factory);
require(config?, deps, success, error);

RequireJS

No AMD:

index.html

REQUIREJS

No AMD:
(source: https://github.com/johnpapa/kis-requirejs-demo)
alerter.js

main.js

dataservice.js

REQUIREJS

With AMD (RequireJS):
(source: https://github.com/johnpapa/kis-requirejs-demo)
index.html

REQUIREJS

With AMD (RequireJS):
(source: https://github.com/johnpapa/kis-requirejs-demo)
alerter.js
dataservice.js
main.js


AngularJS + RequireJS





Bootstrap example

main.js

 

Bootstrap Example

app.js

ROUTING (UI-ROUTER)

routes.js

Models (Restangular)

 
restangular/configure.js

/.../common/collections.js
/config/models/collections.js


AMD & 'Lazy Loading'

By Philip J. Thomas Casado

Made with Slides.com

AMD & 'Lazy Loading'

  • 1,201

More from Philip J. Thomas Casado