A Guide To Transclusion in AngularJS

Posted on by Tero Parviainen

I've always had a problem with transclusion. Though I've used it from time to time, using it always felt uncomfortable. I was never really sure what exactly the API was doing, or more importantly, what exactly I was supposed to do when using it.

Based on what I've heard, I'm not alone in this. Transclusion is one of those things people often mention when they talk about their difficulties with Angular.

What is it that makes this a difficult topic then? Conceptually we're not talking about anything hugely complicated - it's essentially just moving some DOM elements around. I think the bigger problems are tangential:

  • The API is tricky, with its higher-order functions and "magic arguments".
  • Parts of the API are deprecated, and it can be hard to figure out which parts.
  • The documentation uses lots of big words ("a transclude linking function pre-bound to the correct transclusion scope").
  • There are actually two separate features provided by the same API: Regular transclusion and element transclusion.

It wasn't until writing the transclusion chapter for my book that I felt I had fully grasped this topic. While the book covers the internals of the API, this article is an attempt to write the user guide I wish I'd had before. I want to describe what you can do with transclusion and how you can do it.

Read more →


Change And Its Detection In JavaScript Frameworks

Posted on by Tero Parviainen

In 2015 there is no shortage of options when it comes to JavaScript frameworks. Between Angular, Ember, React, Backbone, and their numerous competitors, there's plenty to choose from.

One can compare these frameworks in various ways, but I think one of the most interesting differences between them is the way they manage state. In particular, it is useful to think about what these frameworks do when state changes over time. What tools do they give you to reflect that change in your user interface?

Managing the synchronization of app state and the user interface has long been a major source of complexity in UI development, and by now we have several different approaches to dealing with it. This article explores a few of them: Ember's data binding, Angular's dirty checking, React's virtual DOM, and its relationship to immutable data structures.

Read more →



Why I Think Angular 2 Will Still Be Angular

Posted on by Tero Parviainen

Since the announcements of all the Angular 2.0 changes last week, the Internets have been hot with people voicing their concerns and criticisms over what the Angular team is doing. Many of these criticisms are perfectly valid, but there's also plenty of hyperbole and even some straight-up misinformation being spread around.

There's one particular meme making the rounds that I feel like addressing. That is the idea that Angular 2.0 is going to be a completely new framework that shouldn't even be called Angular. That somehow, all of the concepts and ideas behind Angular 1.x are going to just go away and that there's going to be no upgrade path.

Read more →


How I've Improved My Angular Apps by Banning ng-controller

Posted on by Tero Parviainen

The "Angular 2.0 Core" talk by Igor Minar and Tobias Bosch was an ng-europe highlight for me. What they basically did was announce a mass slaughter of Angular 1.x features and API cruft, worthy of a Game of Thrones wedding.

One of my favourite moments was when they announced the removal of controllers. This is because I've recently come to a realization that using standalone controllers, as with ng-controller, rarely leads to an optimal design.

Read more →