AngularJS Fundamentals

52 minutes

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.

Getting Started

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!

pro-course-rss-logo

PRO RSS Feed

Building an Angular App: Eggly Introduction

Building an Angular App: Bootstrapping

Building an Angular App: Controllers

Building an Angular App: Filters

Building an Angular App: Simple States

Building an Angular App: Add a bookmark with ng-submit and ng-model

Building an Angular App: Editing a bookmark with ng-model and a controller

Building an Angular App: Deleting an item from a collection

Building an Angular App: Eggly Review

angularjs tutorial about Building an Angular App: Eggly Introduction

Building an Angular App: Eggly Introduction

1:54 angularjs

In this lesson, we introduce our sample AngularJS application and discuss our objectives for this series.

angularjs tutorial about Building an Angular App: Bootstrapping

Building an Angular App: Bootstrapping

3:48 angularjs

In this lesson, we learn how to take a static HTML page and tap into the power of AngularJS by bootstrapping the framework.

angularjs tutorial about Building an Angular App: Controllers

Building an Angular App: Controllers

7:58 angularjs

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.

angularjs tutorial about Building an Angular App: Filters

Building an Angular App: Filters

6:28 angularjs

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.

angularjs tutorial about Building an Angular App: Simple States

Building an Angular App: Simple States

8:44 angularjs

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.

angularjs tutorial about Building an Angular App: Add a bookmark with ng-submit and ng-model

Building an Angular App: Add a bookmark with ng-submit and ng-model

5:38 angularjs

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.

angularjs tutorial about Building an Angular App: Editing a bookmark with ng-model and a controller

Building an Angular App: Editing a bookmark with ng-model and a controller

9:13 angularjs

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.

angularjs tutorial about Building an Angular App: Deleting an item from a collection

Building an Angular App: Deleting an item from a collection

3:50 angularjs

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.

angularjs tutorial about Building an Angular App: Eggly Review

Building an Angular App: Eggly Review

4:57 angularjs

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

Presented by:

Lukas Ruebbelke

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.

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