Upgrading to Angular 1.6

Learn how to modernize an existing Angular 1.x app by upgrading to Angular 1.6.

Introduction

• Welcome
• What you should know
• Exercise files
• What is modern Angular 1?
• Decide to upgrade an existing app
• Overview of steps ahead
• Upgrade to Angular 1.6

1. Controllers to Directives

• Remove standalone controllers
• Wrap controllers in directives
• Isolate scopes of directives
• Use directives as route targets

2. Use controllerAs

• Benefits of controllerAs syntax
• Convert a controller’s code
• Convert a controller’s template
• $scope.$watch and controllerAs

3. Directives to Components

• Introduction to components
• Building block of components
• Compare directives and components
• Convert a directive

4. Component Lifecycle Hooks

• Perform setup in `$onInit`
• Use `$onChanges` to sync binding changes
• Replace deep watches with `$doCheck`
• Clean up with `$onDestroy`
• `$postLink` and `$element`
• Use `require` to pass dependencies

5. One-Way Data Binding

• One-way binding vs. two-way binding
• Convert two-way binding to one way
• One-way data flow and immutability

6. Testing Components

• Use componentController
• Test $onChanges

Conclusion

• Next steps