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.
the distinctive character, spirit, and attitudes of a people, culture, era, etc
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 companion code for this guide can be found at https://github.com/simpulton/eggly-es6.