In this video, Aviv Ben-Yosef demonstrates how the $onChanges lifecycle hooks works. Learn how to get rid of $scope.$watch using this new capability in Angular.
- [Instructor] The $onChanges lifecycle hook…allows a component to be alerted…whenever its bindings are changed by the parent.…It triggers whenever the parent…reassigns a different value to a binding.…You should not reassign bindings as a child anyway,…which is why this is all this lifecycle hook manages.…On changes will not be called…in cases the component itself reassigns the value…or in cases some internal property of a binding is changed.…It is not a deep watch.…
Other than that,…on changes is very much like $scope.$watch for bindings.…Let us take a look at this new component.…Open todo.js in the exercise files.…The controller is using watch…to listen for when the to do object changes…and reevaluate the formatted name.…Since this binding is only changed by the parent…this is a great candidate to be replaced with on changes.…First, I add a new on changes method.…
This hook receives a single argument that changes object.…If to do changes,…the changes object will have a to do property.…I check for it, and if it is found,…
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
Skill Level Intermediate
AngularJS 1: Building a Data-Driven Appwith Ray Villalobos2h 15m Intermediate
1. Controllers to Directives
2. Use controllerAs
Convert a controller’s code1m 57s
3. Directives to Components
4. Component Lifecycle Hooks
5. One-Way Data Binding
6. Testing Components
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.Cancel
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.