The app's dependencies will be managed using AMD and RequireJS. 3rd party modules like Angular will be installed using Jam. Which will need to to be installed first. Jam itself is a npm artifact so if you don't have Node.js or npm installed you will need to do that before starting.
Note right now the angular artifact jam installs is not configured as a AMD module. You will need to use the global Angular object reference since AMD will not be able to provide the requested module.
Wrapping Angular App in AMD modules
Wrapping an Angular app in AMD modules is pretty straight forward you just need to export the Angular code so that it can be loaded. The biggest change will be with
app.js file since you will not longer be exposing your app as a global var and will have to manually bootstrap Angular telling it to load your app.
I wish Angular had chosen something other than the term "module". Component or object would have made it easier to differentiate between AMD modules which are essentially a way of defining and loading source or code dependencies and Angular modules which are managed objects which can be injected.
Now that the application is wrapped with AMD modules you can replace all of the
<script> tags with a single one that loads RequireJS. Setting
data-main="main" tells RequireJS to load
main.js as the root module.
With the small todo example there is almost a 1:1 ratio between AMD modules and Angular modules. On a larger project you may want to create aggregator AMD modules which combine multiple AMD modules and export them or put multiple Angular modules in a single AMD module.
- The Asynchronous Module Definition (AMD) API specifies a mechanism for defining modules such that the module and its dependencies can be asynchronously loaded.
- MVW framework for web apps.
- Example todo apps for lots of different frameworks.