In this video, Aviv Ben-Yosef demonstrates how a two-way binding in a component can be converted into a one-way binding, while still maintaining the same functionality.
- [Instructor] Converting a two-way binding…to be one-way, means adding a different channel…of communication to allow a child to update its parent.…Let's see an example.…In our exercise files project,…we have a new dark mode toggle.…Which, not surprisingly, toggles dark mode.…Let's see how it's currently written.…Open DarkModeToggle.js in the exercise files.…Right now, the component reassigns a new value…in the binding whenever a toggle is changed.…The first step in making the change is…to change the binding definition of the component…from being two-way binding using the equals sign,…to one-way using the less than sign.…
At this point in the conversion process,…it is good to look for reassignments in a component.…Most bindings don't usually use two-way reassignment,…and so we just work and this is it.…But in this situation, it is not enough.…In order to allow the child to update,…I will add a function binding to it, onDarkModeToggle.…The component will invoke it…whenever the toggle is being clicked.…
This pattern of providing a component…
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.