First things first, we are going to get our Angular2 project environment setup. Feel free to use your favorite IDE or text editor for this series. I’ll be using Webstorm because I’m a fake developer that doesn’t understand VIM key bindings.
The starting point for our our timezone picker is going to be the angular2-seed project found in the official angular repository. I’m a big fan of reusing what’s there. Plus, this saves us from rewriting a bunch of boilerplate.
Getting the seed setup
Once you have node.js installed, just clone the angular2-seed repository and run
npm install to get setup. If needed, use the steps below.
1 2 3 4 5 6 7 8 9 10 11
The angular2-seed project provides us with a good starting point for our timezonepicker. It comes preconfigured with the following technologies:
- Angular2 for building awesome web stuff
- Webpack for module bundling
- Associated Node packages
If you aren’t familiar with Webpack or Typescript, don’t fret too much. A deep knowledge of Webpack will not be needed for this series. However, it’s becoming quite prevelant in the JS community, so you should probably dedicate some time to it in the future.
If you’ve never used TypeScript before, you’re not alone. We won’t use most of the language features in this series. And the ones we do, I’ll try and explain. However, if you see something that looks unfamiliar, go ahead and head over to the TypeScript site to see what’s up.
Running the project
package.json file also has the
npm start command configured to run the webpack-dev-server on port 8080. So once you’ve got everything setup, run
npm start and open your browser to localhost:8080. We’re ready to get coding!