Skip to content

AMD modules

Vladislav Tankov edited this page Mar 12, 2017 · 2 revisions

AMD modules are used in client code. Thanks to AMD modules we solved problems with cyclic dependencies, global variables names coincidence and others of that kind.

Modules in Typescript

Modules in Typescript are executed within their own scope, not in the global scope. Also, modules are declarative, dependencies between them are specified in terms of imports and exports.

Modules import one another using a module loader. At runtime, the module loader is responsible for locating and executing all dependencies of a module before executing it. We use requireJs as a module loader.

For Typescript there is no difference between different types of modules. You always use Typescript syntax for modules and compiler will take rest. Target type of modules declared in gruntFile.js. We use AMD modules for better interoperability between WMP code and code of JS libraries.

More on this subject: Typescript modules.

RequireJs

RequireJs is a JavaScript module loader optimized for in-browser use.

RequireJs loads all code relative to a baseUrl, which should be declared in its config. All modules names are resolved as paths to files relative to baseUrl.

Require.js is declared using <script> attribute and data-main parameter, which points to require.js config file.

More on this subject: Requre.js API.

Angular

Angular framework is not very friendly to modules. To make angular work with AMD modules we use startup require.js configuration. That startup configuration manually loads all angular controllers and bootstrap angular application only when everything is loaded.

Also, joint global variable declared using startup configuration