TR

The Blog of Tyler Russell

An Ng2 Timezone Picker - Part 2.3: The TimeZonePicker Component

Now that we have our basic project scaffolding in place, it’s time for us to get started writing our components.

So let’s open up our root component, the TimeZonePicker component (located in the timezonepicker.ts file). So the first thing to remember is that with Angular2, we are writing TypeScript. Lucky for us, the basics of TypeScript look pretty similiar to ES6 (or ES2015, or whatever it’s called now). So let’s start off by defining a class.

An Ng2 Timezone Picker - Part 2.2: Scaffolding

In this post, we’ll get the scaffolding of our project setup.

Our timezone picker will consist of four different components/directives.

  1. App – the entry point into our Angular2 application
  2. TimeZonePicker – the root component for our time zone picker
  3. TimeZoneMap – the component that renders our SVG map
  4. TimeZone – the directive that maps SVG elements to classes with attributes

An Ng2 Timezone Picker - Part 2.1: The Environment

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.

An Angular2 Timezone Picker - Part 2: Exploring the World (of Ng2)

Important Notice:

This article was originally posted on April 21, 2015. However, it quickly became irrelevant with major core changes to the Angular2 framework.

Now that the Angular2 codebase has calmed significantly, this article has been rewritten to reflect the current state of things.

Posts for the time-deprived

In the process of rewriting this blog post, I decided to try a new blogging style. Instead of my standard lengthy multi-page posts, I’m going to try and write smaller bite-sized posts that are easier to consume in small chunks. In that spirit, you can find each of the subparts of this post listed below.

Subparts will be added to this list as they are written.

  1. Setting Up Our Ng2 Environment
  2. Project Scaffolding
  3. The TimeZonePicker Component

The AngularJs Promise Anti-Pattern That Makes Me Cry

TLDR

  • Try to wrap any promise work in services. Rarely should controllers do anything but consume promises.
  • Expose promises as return values of service calls instead of forcing callbacks as parameters. This allows for multiple callbacks. (and much simpler code)
  • Setup callbacks as behaviors instead of global “success” or “failure”. This allows for much easier chaining if necessary

A Blog

I’ve never really had a good online personal presence. I had a couple of blogs in college and high school, but most of the subject matter revolved around weird life events. Hardly what I’d call a “professional” presence. Now, working at Domo, I work with a ton of amazing people. Most of them have pretty substantial credibility. They inspired me to get my presence known and out there.

This blog will serve as a dumping point for my day-to-day adventures, as well as fun tidbits I learn or discovery along the way.

I hope you enjoy the ride.

—T