AngularJS is an incredibly powerful framework but sometimes it can be confusing and frustrating trying to figure out how all of these amazing features actually fit together. In this series, you will learn how to build a non-trivial AngularJS application from the ground up through a series of small, digestible lessons.
As we build out our sample application, Eggly, you will quickly start to identify useful techniques that you can apply to your own projects. The videos series is broken out into three series so that you can start at whatever level is most appropriate for you.
In this first series, we are going to focus on the absolute essentials for getting an AngularJS application up and running. We will start with a static HTML page and learn how to bootstrap an AngularJS application and add in functionality using AngularJS views and controllers. When we complete this section, you will have a functioning Eggly application where you can create, update and delete bookmarks and filter them based on the selected bookmark category.
Don't miss Part 2: Application Architecture!
We are going to take the static HTML elements and dynamically display them on the page by setting up an AngularJS controller and hooking it up with AngularJS templating in the view.
The code for this lesson can be found on Github. Note: the tag name corresponds to the lesson.
We are going to learn how to filter our bookmarks based on the selected category. We will learn how to manage the current category in the controller as well as set the current category from the view. As a bonus, we will see how to dynamically apply a class to visually indicate what category is the currently selected category.
The code for this lesson can be found on Github. note: the tags correspond to the lessons.
We are going to learn how to manage simple states within our controller. We are going to learn how to toggle between the editing and creating bookmark states and how to sequence those interactions in the controller.
note: The code for this lesson can be found on Github. The tags correspond to the lessons.
We are going to learn how to create a bookmark by adding it to the bookmarks collection. We will learn how to submit the contents of a form to the controller to be processed by exploring ng-submit and ng-model.
The source for this lesson can be found here on Github. Tags correspond to the lessons.
We are going to learn how to edit an existing bookmark by building on a lot of the same techniques from the previous video. We will also learn how to edit a bookmark and not actually save the change back to the collection until we are ready.
Find the code on Github. Tags correspond to the lesson.
We are going to complete the bookmark management functionality by showing how to delete a bookmark from the bookmarks collection.
The source for this lesson can be found on Github. Tags correspond to the lesson.
Let's review everything that we have learned up this point and discuss what we are going to be learning in the next section.
Be sure to check out Part 2: Application Architecture
Lukas Ruebbelke is a technology enthusiast and author of AngularJS in Action for Manning Publications. His favorite thing to do is get people as excited about new technology as he is. He is the co-organizer of the Arizona Software Community user group and host of multiple developer events in the Phoenix metro area.