onehungrymind
Using Angular 2 Patterns in Angular 1.x Apps

Updated 8 months ago

Using Angular 2 Patterns in Angular 1.x Apps

It was an alarming experience for most Angular 1 developers the first time they saw Angular 2. In fact, pretty much everything changed. We were faced with learning a new language, new syntax, new tooling, etc. and it was overwhelming. The 5-minute quick start was more like a 25-minute quick start that included a 20-minute scenic tour into a ton of new stuff seemingly unrelated to Angular.

As I began to learn Angular 2, a funny thing happened. My entire worldview on Angular 1 began to shift towards a cleaner, more elegant approach as I began to apply the concepts that were self-evident in Angular 2. I just wanted to write Angular 1 apps like an Angular 2 application because it felt "right."

The Ethos of Angular 2

Eventually, I found it necessary to make the distinction between "the architecture" and "the implementation" of Angular 2 when talking about Angular in general. I could immediately benefit from the ethos of Angular 2 without having to secure the right business opportunity or even executive buy-in. I have had a lot of earnest conversations with teams who were eager to start using Angular 2 but just could not see a realistic way forward. My answer is always the same. Start writing Angular 2 immediately even if it is only in your Angular 1 applications.

Ethos

the distinctive character, spirit, and attitudes of a people, culture, era, etc

The best practices that emerged from Angular 1 had been made the default in Angular 2. Significant portions of the framework were left on the cutting floor as the Angular team decided for letting vanilla JavaScript and HTML do the hard work. Angular 2 has jumped leap years ahead concerning how we organize our applications and equally important is how we communicate between those pieces.

The Goal

The best part of this brave new world is that a lot of the architectural principles have been back-ported into Angular 1, and we can start using them right now. We are going to work through a series of easy to follow, practical techniques that you can apply to your existing Angular 1 applications in an iterative and pragmatic manner.

Writing an Angular 1 application in an Angular 2 style invariably gets us a lot further down the road in terms of migration but we should not limit ourselves to just that context. Writing an Angular 1 application in an Angular 2 styles means that we are writing better Angular 1 apps. Much better.

The Course

If you like this guide, check out my course Using Angular 2 Patterns in Angular 1.x Apps on egghead.io where I apply every concept in this guide to a real project.

The Code

The companion code for this guide can be found at https://github.com/simpulton/eggly-es6.