Upgrading to Angular 1.6
1h 9mIntermediate2017-04-18
Authors
Aviv Ben-Yosef
Consultant, Trainer
Course details
Do you have an app that you'd like to revamp, but don't have the time to rewrite everything? Or, would you like to prep your app for a future migration to Angular 2? If so, then this course is for you. Learn how to update an existing Angular 1.x app to Angular 1.6. By making this upgrade, you can reap the benefits of using a solid and stable framework without needing to relearn and rewrite your existing app in a newer framework.
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.
Learning objectives
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
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.
Learning objectives
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
Skills covered
AngularFront-End Web DevelopmentWeb DevelopmentOpen Source
Concepts
0. Introduction
- 01 - Welcome
- 02 - What you should know
- 03 - Exercise files
- 04 - What is modern Angular 1
- 05 - Decide to upgrade an existing app
- 06 - Overview of steps ahead
- 07 - Upgrade to Angular 1.6
1. Controllers to Directives
- 08 - Remove standalone controllers
- 09 - Wrap controllers in directives
- 10 - Isolate scopes of directives
- 11 - Use directives as route targets
2. Use controllerAs
- 12 - Benefits of controllerAs syntax
- 13 - Convert a controller s code
- 14 - Convert a controller s template
- 15 - $scope.$watch and controllerAs
3. Directives to Components
- 16 - Introduction to components
- 17 - Building block of components
- 18 - Compare directives and components
- 19 - Convert a directive
4. Component Lifecycle Hooks
- 20 - Perform setup in `$onInit`
- 21 - Use `$onChanges` to sync binding changes
- 22 - Replace deep watches with `$doCheck`
- 23 - Clean up with `$onDestroy`
- 24 - `$postLink` and `$element`
- 25 - Use `require` to pass dependencies
5. One-Way Data Binding
- 26 - One-way binding vs. two-way binding
- 27 - Convert two-way binding to one way
- 28 - One-way data flow and immutability
6. Testing Components
- 29 - Use componentController
- 30 - Test $onChanges
Conclusion
- 31 - Next steps