- [Instructor] In this movie,…I'm going to show you how to update a DOM tree using AngularJS.…So here in this example page,…I'm using the shoppinglist.html file,…I have a list of items I want to buy at the store.…So, what I want to do,…is I should be able to click each of these items here.…So when I click on the Egg or the Cheese or the Bread,…it should look like you see in number one, here.…It's going to cross out, that's been purchased, and so on.…And not only that, I should be able to also add new item…to the list as well.…
So if I say Butter, I click Add,…and that's going to add it to the list.…And then finally,…I want to delete these items from the list.…Okay, so, let's go to Brackets and see how that's done.…So here in Brackets, I opened this shopping list file.…I already included the AngularJS library,…as well as a custom script here.…So the first thing I want to do,…is you want to bootstrap this to Angular.…To do that is, right here at the top of the html tag,…I'm going to issue this ng-app command.…
And this is going to be myShoppingApp, that's the module.…
Author
Released
8/14/2017- What is the DOM?
- Working with properties, objects, and methods
- Traversing the DOM tree
- Manipulating elements with JavaScript
- Adding, appending, and deleting nodes with JavaScript
- Selecting content in the DOM with jQuery
- Updating the DOM tree with jQuery or AngularJS
- Making live updates for content
- Understanding React's virtual DOM approach
Skill Level Intermediate
Duration
Views
Related Courses
-
JavaScript: Enhancing the DOM
with Ray Villalobos2h 3m Intermediate -
jQuery Essential Training
with Joe Marini3h 37m Beginner
-
Introduction
-
Welcome1m
-
What you should know6m 9s
-
Using the exercise files1m 42s
-
-
1. The DOM Tree
-
Developer tools7m 12s
-
What is the DOM?5m 18s
-
The DOM tree5m 59s
-
The Node interface10m 50s
-
The Document object12m 8s
-
The Document methods10m 27s
-
Element objects10m 24s
-
Modifying text in the DOM9m 16s
-
Event objects11m 54s
-
Window object6m 56s
-
CSS properties and the DOM13m 50s
-
Traversing the DOM tree10m 18s
-
-
2. Manipulate the DOM with JavaScript
-
Updating content in place4m 16s
-
3. jQuery and the DOM
-
jQuery application structure15m 12s
-
Selecting content in the DOM10m 9s
-
-
4. AngularJS and the DOM
-
Angular application structure12m 15s
-
Updating the DOM tree10m 25s
-
From the DOM to directives11m 56s
-
-
5. The React Virtual DOM
-
React application structure10m 50s
-
Encapsulating code in components20m 43s
-
Live updates for content15m 57s
-
-
Conclusion
-
Next steps42s
-
- 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.
CancelTake 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.
Share this video
Embed this video
Video: Updating the DOM tree