NOTE: This was created long before we had the Angular CLI which is much more recommended to use rather than the methods described here for setting up a development environment and production bundles. While the components and examples in this repository are still valid, you should rather use the upgraded project.
Here's a simple example Angular 2 application with angular2-materials. We've chosen to use JSPM for development setup since transpiling in the browser is convenient when developing, and JSPM is straightforward to configure.
The example also shows how to create an Ahead Of Time production bundle, that ensures fast loading in production.
For development remember to run:
npm install
for installing dependencies.
Use index_dev.html for development
The production bundle is created using Ahead Of Time compilation ( https://angular.io/docs/ts/latest/cookbook/aot-compiler.html ). This way we don't need to include the angular compiler at runtime, neither does the templates need to be compiled as they are translated to javascript instructions that generates the page programatically. This is one of the reasons Angular 2 is both faster and lighter than many alternative frameworks (and also faster and lighter than not using any framework at all).
To build a production bundle (aot-build.min.js) for running in index.html type:
npm run dist
To start a simple web server for testing type:
npm run devserver
This will start a webserver at http://localhost:3000
(remember to go to index_dev.html if you're developing)