In this video, Aviv Ben-Yosef shows how to convert a route definition from using a standalone controller to an isolated directive, including handling resolved bindings.
- [Instructor] Prior to Angular 1.5,…a common use of standalone controllers…was defining (mumbles),…usually using ng-route, or UI router.…Open the app.js file in the exercise files.…This file contains a route definition…that uses the standalone tasks controller.…Let's turn it into a directive.…The first step in updating it,…would be to wrap it in our directive.…I'll make that directive by simply using…the existing task controller and the template URL…that's currently in the route definition.…
In order to isolate it, I need to wire the tasks…into the controller.…Currently, tasks are injected…using the resolved feature of the router.…Since tasks will be an isolated directive,…it can't use resolved properties directly.…I'll change the newly created directive…to expect the resolved tasks to be provided to it…as a binding.…Now, the directive is isolated.…Next, I need to go back to the route definition.…
This should no longer use the directives template,…or the controller.…But instead, it should simply invoke the new directive.…
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.