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
Let's talk about the importance of having a good file structure and how it is is very much like good code in that it is self documenting and friendly to extension. We will introduce the file structure that will serve as the foundation for the rest of the series as we refactor Eggly.
Let's look at sub-modules as a mechanism for organizing our code into logical containers that we can then compose into our main application. Leveraging sub-modules is a powerful way to add in new functionality and features into an application while minimizing the impact that it has on the existing code base.
We will look at ui-router and learn how we can use it to define unique states with Eggly. This will allow us to leverage the power of a state machine in our AngularJS application, which goes beyond code management and into managing the states that exist within the code.
note the route doesn't actually fire unless you navigate to index.html#/ instead of index.html (see comments)
Let's learn how to pass information from one state to another within Eggly. We learn how to define a state so that it has parameters in its definition and then read those parameters using the $stateParams service.
Now that we have ui-router states in our Angular application, we can discuss the three ways to activate a state within ui-router. We will programmatically activate a state using
$state.go and capture user interactions with the
Let's continue to refactor Eggly by introducing a valuable concept known as model promotion. We will start to extract the categories and bookmarks collections from the MainCtrl and promote them to their respective models. We will then learn how to consume those models at the controller level to populate the view.
Now let's learn how use the $http service to make requests to remote servers. In our case, we will load the data from JSON files and then make them available in our controllers. We will see a few techniques that I frequently use to make working with $http data a lot more convenient.
Learn how to manually control how asynchronous requests are handled with the use of promises. Because $http is built to work with promises, we saw a foreshadow of them in the previous lesson. We will take this a step further but seeing how to manually create a promise and then resolve or reject it as we see fit.
In this lesson, we continue to dig into ui-router while doing some significant refactoring to our Eggly application.
We will start out by removing MainCtrl entirely from the application as we start to move functionality to more appropriate places with the application. We will build out the edit and create sub-modules to include the states and controllers for editing and creating a bookmark. With our states defined, will leverage them to manage our view instead of the ng-if statements we were previously using. We tie it all together by using CategoriesModel to track the current category and provide functionality to the BookmarksListCtrl.
We cover a lot of material in this lesson as we start to apply the concepts covered previously to finalize functionality in the application.
In this lesson, we will complete the functionality to create a bookmark. We start by adding a createBookmark method on the BookmarksModel and then making it available to the CreateBookmarksCtrl. From there, we flesh out the CreateBookmarksCtrl and refactor the template to use the new "Controller as" syntax.
In this lesson, we are going to complete the functionality for editing a bookmark. We will start by augmenting the BookmarksModel and then updating the controller and view to utilize the new functionality. We will also update the BookmarksModel.getBookmarks to cache the bookmarks so that we are not overwriting our updates on every call.
In this lesson, we are going to complete the functionality for deleting a bookmark. Deleting a bookmark is significantly easier than creating or editing a bookmark with the essence being a single method in the BookmarksModel that we make available to the controller and view.
Creating your own services in AngularJS can be confusing. What are the differences between an AngularJS module's Service, Provider and Factory functions? This lesson shows how Angular's service function is just a constructor function.
AngularJS validation can be tough, but angular-formly makes it extremely simple with a single validation API that enables basic and advanced field validation. You can specify a string expression, function that returns true/false, or a function that returns a promise which is resolved/rejected.
angular-formly templateOptions bring a great deal of power and flexibility to your forms with angular without sacrificing simplicity in your templates. The templateOptions property allows you to specify some attributes that would normally exist on your
maxlength, and even
ng-click. It also works great with
angular-formly allows you to default the values of fields for your angular forms using the
defaultValue property. To default the value of a field, you can either initialize the
model with the default value, or use this
defaultValue property on the field configuration.