Writing A Structural Directive in Angular 2

Or, how I wrote a customized version of ngFor

Posted on by Tero Parviainen

When building Angular 2 applications, we spend most of our time writing components. There are also other kinds of other kinds of directives we can define, but in my experience you end up needing to do that surprisingly rarely.

But recently I did end up in a situation where I needed a custom directive. I was using ngFor to render a collection of items, and I wanted to not keep track of items changing positions inside the collection. Instead I wanted a repeater directive that only adds and removes DOM elements but never actually moves them around to try to keep track of collection reorderings.

Read more →

Metabubbles: Making Generative Art with Angular 2

A tutorial using Angular 2, ES2015+, Babel, and Webpack

Posted on by Tero Parviainen

Most people talk about Angular 2 as a platform for writing business applications. But there's no rule that says this is the only thing it should be used for. If you're in the mood for something fun, how about making some generative visual art?

You see, the same characteristics that make Angular 2 a useful framework for business app development also make it a fun platform for pure experimentation and self-expression through code. In this tutorial we're going to do just that.

So let's have some fun with circles! While we're at it, we're also going to learn a whole lot about what Angular 2 development feels like and how it works with the popular Babel + Webpack tool stack.

Read more →

Refactoring Angular Apps to Component Style

Or, how to modernize your crufty AngularJS codebase one simple step at a time

Posted on by Tero Parviainen

Component-based directives are becoming increasingly popular in the Angular community. One reason for this is that Angular 2 will be all about components and people are preparing their 1.x code for the upgrade. Another reason is that componentization just makes apps easier to work with.

The thing is, even though people are talking about components a lot, most of the existing Angular code in the world is still not component-based. Components didn't become widespread until quite recently, and many of us are working with apps that have several years of history behind them. The foundations for these codebases were laid way before components were added to our collective toolbox.

In this article I present a case for refactoring existing Angular 1.x applications, whether large or small, towards component-based architectures. This is both to improve those apps in general and to prepare them for Angular 2.

I'll describe a catalog of specific refactorings that have been working for me when moving apps towards components. True to the spirit of refactoring, every change is broken down into small systematic steps. That is a requirement for being able to do this without breaking existing functionality, and without setting aside large amounts of time.

Read more →