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
(source: https://github.com/johnpapa/kis-requirejs-demo)

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

Routing example (ui-router)

Models example (restangular)

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


Made with Slides.com