Building an Angular App: Eggly Review

Lukas Ruebbelke: [00:00] 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.

[00:13] 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.

[00:52] 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.

[01:21] 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'.

[01:51] 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.

[02:28] 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.

[02:53] 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.

[03:26] 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.

[03:59] 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.

[04:22] 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.

[04:41] 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.