Enter Your Email Address to Watch This Lesson

Your link to unlock this lesson will be sent to this email address.

Unlock this lesson and all 833 of the free egghead.io lessons, plus get Angular 1.x content delivered directly to your inbox!



Existing egghead members will not see this. Sign in.

Just one more step!

Check your inbox for an email from us and click link to unlock your lesson.



Building an Angular App: Eggly Review

4:57 Angular 1.x lesson by

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

Get the Code Now
click to level up

egghead.io comment guidelines

Avatar
egghead.io

Let's review everything that we have learned up this point and discuss what we are going to be learning in the next section.

The source for these lessons can be found on Github. Tags correspond to the lesson.

Avatar
Laci

Please make sure the next time that we can not only hear you through the left audio channel, but through the right, too. Very annoying with headphones.

In reply to egghead.io
Avatar
javier

Where can I find the next set of videos for the eggly app?

In reply to egghead.io
Avatar
Andreas

+1. I'd like to continue with the series asap. It seems that the code is ready, so when can we expect the videos?

In reply to javier
Avatar
Joel

Lukas is working on the next installments. We're looking forward to them too :>

In reply to Andreas
Avatar
Cristiano

Hi Lukas,

And if I wanted to display the form below bookmark, as would be? I tried putting the tag inside the tag, but could not make the edit form open only for the bookmark that was clicked, it opens to all bookmarks with the value of the current bookmark.

Avatar
andrew

Lukas,
I just wanted to say that you've done an AMAZING job at keeping this simple and straightforward.
With every other Angular video series in the history of existence the lecturers start at a level where users are expected to know what the different angular components mean, what they're for and why they're used.
When I was starting out, writing angular code felt like I wasn't even writing JavaScript anymore.
So far your videos have done a really good job at staying in familiar territory while slowly exposing viewers to new concepts, one at a time, which... again... you're the only one.
I wish I had discovered these videos 1.5 years ago- it'd have saved me soooo much pain.
So much pain.

So yeah. Good job. Your videos are where I'm directing angular-n00bs, because starting with controllers and expanding outward is exponentially easier to understand than:
OH YOU WANNA LEARN ANGULAR JUST MOCK THE PROVIDERS, DEPENDENCY INJECT THE FACTORY INTO THE CONTROLLER AND DONT FORGET TO CALL $SCOPE DOT $APPLY -TAKE NOTE OF THE DOLLAR SIGNS- IN YOUR DIRECTIVE SERVICE AND THEN BAM. HAKKUNAH MATTATA YOUR JAVASCRIPT NOW HAS LAZERS.

In reply to egghead.io
Avatar
Jae Sung Kim

it sounds just fine

In reply to Laci

Lukas Ruebbelke: Welcome to another video in the Eggly series. At this point, we have actually covered a lot of ground as it pertains to Eggly functionality.

We started out with a completely static HTML page. From there, we bootstrapped AngularJS. We hooked up the categories and the bookmarks to display based on data provided by the controller and from there, we were able to actually filter the bookmarks based on the category that we selected. Then we hooked up create, read, update, and delete the bookmarks, as well as managing the editing state and the creating state of the bookmark and keeping those in sync.

If you are a beginner to AngularJS and you have followed along thus far, excellent job. I applaud you. We have actually covered quite a bit. In this video, I just wanted to review the code that we've written so far and then talk about the next series of videos that I'm going to be doing in Eggly and what we're actually going to be covering.

In the code, we created an Eggly module. You can see the main controller, we have categories and bookmarks and these are arrays with objects. From here, we are keeping track of the current category. Then we have the ability to create, to update, and delete bookmarks, as well as, we are managing the 'is creating state' and the 'is editing state'.

A lot of ground in the JavaScript, as well as we have hooked up ng-repeat, ng-controller, and also, we, again, using ng-show, we are toggling the create form and the edit form. Then, in the form itself, we are using ng-submit in the 'create a bookmark' or 'update a bookmark'. We are binding it using ng-model to an appropriate object on scope.

We've done really well so far but there's still a lot of room for us to cover. So this series or the videos up to this point, has been geared towards somebody who is new to AngularJS and looking to get their feet wet. Now I want to talk about what we're actually going to cover in the next series of videos.

As you can see, right now, we have actually all of the functionality in this controller, right here. Within about 135 lines of code, we've done quite a bit. This is really not scalable. What would happen if we needed to add in more functionality, how would two people on a team work on the same code without colliding? Putting everything into a single controller is ultimately not scalable.

In the next video series, I am going to one, show you how to actually break your code up and organize it into sub modules, as well as I'm going to show you how to extract your data models out into services so that we have a bookmarks model, a categories model, as well as we were actually calling the server to actually get that data so I'm going to show you how to actually make a server side call and how to do that using promises.

Then how to using a component system architecture, organize your code in a way that actually makes sense that you can continue to extend. For instance, bookmarks, a part of categories. You can see that the bookmarks are actually in the category and then have create, and edit.

We further define that out, as well as the templates that we are using for those individual states, as well as, we are actually going to manage the states of the application using UI router and, more specifically, state provider within UI router.

If you thought the first set of videos were exciting, stick around. The next set is going to be even more awesome, as we're going to get even deeper into the awesome things you can do with AngularJS. I cannot wait to see you on the next series of videos. Stay tuned.

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?