Out of a desire to learn Angular and building on what I have learned about MeteorJS, my current game is using Angular 2 and Meteor together. It does not get fancy and utilize all of the special features that these frameworks have to offer, but it is a good learning project.

So Popular

If you are new to programming or to web programming, a few years ago Google released an experimental framework called AngularJS that has become quite popular. It has become widespread enough that it is hard to ignore.

Currently, there is a new version of AngularJS that is in the works, simply called Angular 2. This caused a bit of stir since it is fairly different from Angular 1 and those who invested heavily in 1 will have to do a good bit of rewriting to migrate to 2.

Meteor, the Javascript framework I have been learning that builds to mobile devices easily, has been integrated with Angular 1 through the Angular-Meteor Project and integration with Angular 2 is in beta.

Some Angular 2 Basic Concepts

Components

As far as I can tell, Angular is about creating “Components” which I have come to think of as Lego-like pieces that you use to build your website or app.

For example, in the game I am building each section has a list of choices available. So I built a ChoiceList component and simply stick it into the page using an html tag that I assign to it like this:

<div>
This is a story with choices
</div>
<choice-list></choice-list>


And the <choice-list> tag will render the template of the ChoiceList component which gets a list of choices from the database and builds a list of stylized divs that look like buttons.

Data Binding

There is a lot of phrases that get thrown around when dealing with angular and one of them is “2 way data binding”.

This is a short way of saying you can tie an input directly to a component property or variable and when the input changes it immediately updates the property of the component. That is the first direction, from the View to the Controller. But then you can have a separate View element that uses the property that is getting changed, and it is updated automatically whenever the component property is changed.

If you were writing regular javascript you would need to add listeners and events to create this kind of behavior, but in Angular 2 it is simply using a banana in a box “[()]” (yes that is what it’s called).

A practical example of this would be a mortgage calculator that had input fields for a price, a down payment, and a interest rate and calculated a monthly payment. 2 way data binding would let you update the payment automatically anytime one of the 3 input fields changed. It would send the value back to the controller and then update the view accordingly.

With Meteor, we actually get “3 way data binding” because it has reactivity built in and can update the Model layer and have that reactively percolate up to the View and from the View down to the database (Mongo in this case).

Typescript

Angular 2 is trying to use a bunch of features that are coming for Javascript, but have not quite arrived yet. Typescript is one of the current recommended solutions to this.

Developed as an open source project by Microsoft, Typescript is a language that compiles to ES5, the current accepted Javascript standard that most browsers work with. It has really similar syntax to Javascript and is easy to pick up and learn.

Some of the features that I have found useful so far are the ability to check type parameters and to define your own Interfaces which describe what you are looking for in an object. So if you have an interface that looks like:

interface Choice {
page_name: string;
result_page: string;
}

You can use it to set variables to a Choice type so that they will need to be objects with a page_name property that is a string and a result_page property that is a string.

Nothing New

Although most of what I said here has been said better or clearer in other places about Angular 2 and Typescript, writing about it allows me get a better understand what exactly is going on when I write the Typescript to make a new Angular 2 component. I plan on getting into some more specific parts of Angular later on. For now, just a little overview and what I have found interesting.

If you haven’t looked into it yet, try out Angular.