In this video, Aviv Ben-Yosef describes the difference between modern Angular and older Angular 1.x versions. Learn how Anglular has improved over various updates.
- [Instructor] Today, Angular is written very different from a couple of years ago, which makes it safe to say that most existing codebases will benefit from an upgrade. Angular 1.0 was released at the end of 2012. At the time, it was quite different than anything else. The magic of two-way binding, coupled with unprecedented productivity gains for getting things up and running, made it truly remarkable. But, as Angular aged and the community evolved, there were growing pains.
Angular was so lax about pointing out the way to do things, that every team did things differently. Some would use controllers everywhere, while others put everything in directives. No one really knew the difference between services and factories and which should be used. Essentially, every tutorial, blog post, or guide you'd come across contained advice that was impractical for big, real-world applications. Code maintainability got harder quickly as an app got bigger, especially if the team wasn't careful to continuously take care of the growing scope soup.
Shoving all the models actions and logic in $scope objects coupled with the prototypical inheritance made things get out of hand fast. And as the core Angular team learned what was wrong, they improved on it. Things that were the norm in Angular 1.0 were frowned upon in 1.2, obsoleted in by 1.4, and are now considered completely bad practice. Directives were initially considered a tool for creating reusable components only.
The concept has changed completely now that directives or components are the basic building block of modern apps. Controllers evolved to become an integral part of components instead of having their own stand-alone responsibilities. We also realized that some of the most touted Angular capabilities are actually quite lousy performance wise. Modern Angular is more opinionated and mature. Built on the components paradigm, it provides more structure and reduces the number of choices you have to make.
It guides us in writing code that's more performant. Angular components are essentially just syntactic sugar, but it's just what we needed. As opposed to previously supplying no guidance, Angular now comes with the right defaults for most cases. Components make code more maintainable when it comes to the composition of a big app since they enforce isolated scopes and explicit boundaries. Equipped with new one-way bindings, and back ordered lifecycle hooks from Angular 2 components also rid us of scope soup and provide good defaults as to where should things go.
Modern Angular is also future compatible. By saying future compatible, I mean two different aspects. First, since components push us to use controller as syntax, it means that all controls will be quite easy to transform into ES6 or TypeScript classes later on. Moreover, writing code in the form of components aligns Angular 1.6 with other popular frameworks, and specifically, provides a very straightforward route to later convert components to Angular 2 should you reach that point.
Basically, modern Angular is the way you would have written your app had you started today. It is more structured, easier to maintain, and better overall.
Aviv Ben-Yosef kicks off the course by explaining what's different in Angular 1.6, as well the different motives for upgrading. Next, he walks through how to safely upgrade an existing app. He covers going from controllers to directives, as well as component lifecycle hooks. He also goes into the architectural changes in Angular, such as one-way data flow and immutability. To wrap up, he discusses how to properly test components.
- Deciding to upgrade an existing app
- Upgrading to Angular 1.6
- Removing standalone controllers
- Using directives as route targets
- Converting a controller's code
- Converting a controller's template
- Comparing directives and components
- Converting a directive
- Reviewing the concept of one-way binding