codelord.net

Code, Angular, iOS and more by Aviv Ben-Yosef

Angular 1.6 is here: what you need to know

| Comments

Angular 1.6 was released a few weeks ago (and actually 1.6.1 was released a week ago). I’m so happy to see the Angular team keep spending time in making 1.x better and improving it.

As opposed to 1.5, 1.6 doesn’t introduce a lot of new features or changes, which I think is a good thing. I believe most 1.x projects have yet to integrate 1.5’s components properly, and so adding more changes might be overwhelming.

1.6 is more of a clean up release, that, in order to fix bugs and remove deprecations, introduces a handful of breaking changes.

I’ll go over the ones that I’m sure will trip a lot of people up. You can see the full, really long, list here.

Controller pre-assignment of bindings–or $onInit all the things

1.6 changes the default behavior of $compile in that it no longer, by default, initializes a controller’s bindings before $onInit is called (the new lifecycle hook introduced in 1.5, you can read more about it here).

What does that mean? Looking at this example:

1
2
3
4
5
6
7
8
app.component('foo', {
  bindings: {
    baz: '<'
  },
  controller: function() {
    this.baz.something();
  }
});

The above code will no longer work, since we’re accessing the baz binding inside the controller’s constructor function directly.

To change it to work, you should make sure to move all of your controller’s initialization code to be inside the $onInit hook:

1
2
3
4
5
6
7
8
9
10
app.component('foo', {
  bindings: {
    baz: '<'
  },
  controller: function() {
    this.$onInit = () => {
      this.baz.something();
    }
  }
});

Note: I’m using ES6 arrow functions for brevity.

In case you’ve already adopted your code to use $onInit you’re all good. Also, since most style guides, e.g. John Papa’s, have recommended the use of an init() function of sorts in controllers for quite a while, I’m assuming for most projects this is not a big deal. Simply rename your current init() functions to be $onInit methods.

What if you don’t want to go over all controllers right now?

In case you don’t have the time or energy to change all your controllers now, but still want to upgrade to 1.6, you can re-enable the old behavior:

1
2
3
app.config(function($compileProvider) {
  $compileProvider.preAssignBindingsEnabled(true);
});

But keep in mind that this is likely to be removed in a future version of Angular.

$onInit won’t work for standalone controllers

Standalone controllers are controllers that aren’t defined as part of a directive or component. Most commonly, these are controllers used as part of route definitions, or, heaven forbid, ng-controller.

Standalone controllers do not get the lifecycle hooks, and don’t have bindings anyway, so just make sure not to accidentally try and update them too in your migration frenzy. It won’t work.

$http.success and $http.error are finally gone

I’m really hoping not a lot of people are still using these relics of older Angular days, but I keep coming across projects that use it here and there (I believe old blog posts all over the web are at fault, most people aren’t aware of the difference when just starting).

I’ve written about why you shouldn’t be using them almost 2 years ago, and they’ve since been deprecated.

Well, 1.6 has finally killed them. If you’re still using them for some reason, here’s a great excuse to spend 20 minutes and use proper promises everywhere.

Upgrade and enjoy!

“Maintaining AngularJS feels like Cobol 🤷…”

You want to do AngularJS the right way.
Yet every blog post you see makes it look like your codebase is obsolete. Components? Lifecycle hooks? Controllers are dead?

It would be great to work on a modern codebase again, but who has weeks for a rewrite?
Well, you can get your app back in shape, without pushing back all your deadlines! Imagine, upgrading smoothly along your regular tasks, no longer deep in legacy.

Subscribe and get my free email course with steps for upgrading your AngularJS app to the latest 1.6 safely and without a rewrite.

Get the modernization email course!

Comments