Egghead Instructor Lukas Ruebbelke

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.



Unlock all of Lukas's PRO Lessons
click for instant access!

Browse Lukas Ruebbelke's lessons.

showing 94 lessons...

Install Android SDK for Ionic

P

Install Ant for Ionic

P

Creating an Ionic App

P

Ionic Quickstart for Windows: Installing Ionic

P

Installing Node.js and NPM on Windows

Angular Automation: Installing Gulp Globally and Locally

P

Angular Automation: Introduction to Gulp

AngularJS Architecture: Review

P

AngularJS Architecture: Animate state transitions with ui-router

P

AngularJS Architecture: Delete Bookmark

P

AngularJS Architecture: Edit Bookmark

P

AngularJS Architecture: Create Bookmark

P

AngularJS Architecture: Edit and Create Bookmark States

P

Using ngModelOptions to Update on Blur

AngularJS Architecture: Control your promises with $q

P

AngularJS Architecture: Using $http to load JSON data

P

AngularJS Architecture: Refactor to a data model

P

AngularJS Architecture: Prefer the 'controller as' syntax

P

AngularJS Architecture: navigating between states with ui-router

P

AngularJS Architecture: ui-router state params for sharing information

P

AngularJS Architecture: Using ui-router's named views

P

AngularJS Architecture: Basic State with ui-router

P

AngularJS Architecture: Using Sub-Modules

P

AngularJS Architecture: File Structure

P

AngularJS Architecture: Series Introduction

Building an Angular App: Eggly Review

Building an Angular App: Deleting an item from a collection

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

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

Building an Angular App: Simple States

Building an Angular App: Filters

Building an Angular App: Controllers

Building an Angular App: Bootstrapping

Building an Angular App: Eggly Introduction

Greensock TimelineLite Animation Sequences

P

Firebase Data Relationships

P

3d Animations with Greensock TweenLite

Basic Animation with Greensock's TweenMax

P

Firebase Basic Authentication Part 2

P

Firebase Basic Authentication Part 1

P

First Step: Adding Angular to the HTML Page

Firebase Event Handling

P

Updating Real-Time Data with Firebase Forge

Get Started with Firebase and AngularFire

angularjs tutorial about Install Android SDK for Ionic

Install Android SDK for Ionic

4:58 angularjs PRO

In this lesson, we install the Android Software Development Kit (SDK) and the necessary Android API (Application Interface). This is the code base that allows us to run the Android platform on our PC. We also add a couple environment variables and update our PATH environment variable.

angularjs tutorial about Install Ant for Ionic

Install Ant for Ionic

1:39 angularjs PRO

In this lesson, we install Apache Ant and create an environment variable for it. Ant is a tool used primarily to build Java applications and is also necessary to run Android. Ionic uses Ant to aid in driving the processes that will build the native Android app later on.

angularjs tutorial about Creating an Ionic App

Creating an Ionic App

1:18 angularjs PRO

In this lesson, we create our first Ionic app. We use a pre-defined Ionic template to give us some views and data straight out of the gates. This allows us to have a web app up and running in our browser, ready for us to explore, in four simple command prompt commands.

angularjs tutorial about Ionic Quickstart for Windows: Installing Ionic

Ionic Quickstart for Windows: Installing Ionic

0:40 angularjs PRO

In this lesson, we install Ionic. With just a couple command prompt commands, we gain access to the powerful Ionic command-line utility, which in turn installs Apache Cordova to aid in connecting our web apps to our mobile device’s native functionality. After this lesson, we will be able to create and run and app.

node tutorial about Installing Node.js and NPM on Windows

Installing Node.js and NPM on Windows

1:13 node

Welcome to the Ionic Quickstart for Windows video series! In this inaugural lesson, we install Node.js and Node Package Manager (NPM). We need to install Node and NPM because Ionic is, in fact, a Node package.

angularjs tutorial about Angular Automation: Installing Gulp Globally and Locally

Angular Automation: Installing Gulp Globally and Locally

4:24 angularjs PRO

In this lesson, we learn how to get up and running with Gulp by initializing our project with
npm
init
and
then installing the Gulp CLI globally and then installing it locally to our project. We finish the lesson off by creating our first Gulp file and running our first Gulp task.

angularjs tutorial about Angular Automation: Introduction to Gulp

Angular Automation: Introduction to Gulp

4:26 angularjs

Angular projects require automation. Period.

In this series we will take a look at Gulp. Gulp is a task runner. It is the commander of our army of helper robots that take critical, yet totally mundane, tasks and perform them hundreds of times per day so we don't have to. When we sit down to work, we want to enter a single command, and then spend the rest of our day writing code, testing, and basically not thinking about how it is all glued together in the background.

Automation is critical to any project of significant size. We will start with the Eggly Bookmarks application, and develop proper build automation that will include production ready tools that you can start using in your applications today!

angularjs tutorial about AngularJS Architecture: Review

AngularJS Architecture: Review

3:44 angularjs PRO

In this lesson, we review the high level concepts that we covered over the course of this series including file structure, sub-modules, data models, ui-router and animations.

angularjs tutorial about AngularJS Architecture: Animate state transitions with ui-router

AngularJS Architecture: Animate state transitions with ui-router

3:46 angularjs PRO

In this lesson, we are going to learn how easy it is to animate ui-router state changes using ngAnimate and about 10 lines of CSS.

angularjs tutorial about AngularJS Architecture: Delete Bookmark

AngularJS Architecture: Delete Bookmark

2:10 angularjs PRO

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.

angularjs tutorial about AngularJS Architecture: Edit Bookmark

AngularJS Architecture: Edit Bookmark

12:18 angularjs PRO

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.

angularjs tutorial about AngularJS Architecture: Create Bookmark

AngularJS Architecture: Create Bookmark

6:29 angularjs PRO

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.

angularjs tutorial about AngularJS Architecture: Edit and Create Bookmark States

AngularJS Architecture: Edit and Create Bookmark States

12:09 angularjs PRO

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.

angularjs tutorial about Using ngModelOptions to Update on Blur

Using ngModelOptions to Update on Blur

2:56 angularjs

How do you change a text input from updating on every key stroke? With ngModelOptions it is really easy to control what event triggers the model update. In this lesson, we will modify a text input to update on blur instead of key up.

angularjs tutorial about AngularJS Architecture: Control your promises with $q

AngularJS Architecture: Control your promises with $q

6:26 angularjs PRO

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.

angularjs tutorial about AngularJS Architecture: Using $http to load JSON data

AngularJS Architecture: Using $http to load JSON data

7:21 angularjs PRO

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.

angularjs tutorial about AngularJS Architecture: Refactor to a data model

AngularJS Architecture: Refactor to a data model

5:53 angularjs PRO

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.

angularjs tutorial about AngularJS Architecture: Prefer the 'controller as' syntax

AngularJS Architecture: Prefer the 'controller as' syntax

5:02 angularjs PRO

As of Angular 1.2, the use of $scope injectable has been greatly reduced in favor of the "controller as syntax". We are going to take a quick look at cleaning up Eggly to follow this best practice.

angularjs tutorial about AngularJS Architecture: navigating between states with ui-router

AngularJS Architecture: navigating between states with ui-router

5:00 angularjs PRO

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 ui-sref directive.

angularjs tutorial about AngularJS Architecture: ui-router state params for sharing information

AngularJS Architecture: ui-router state params for sharing information

4:53 angularjs PRO

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.

angularjs tutorial about AngularJS Architecture: Using ui-router's named views

AngularJS Architecture: Using ui-router's named views

8:03 angularjs PRO

We'll take a deeper look at ui-router as we introduce named views into Eggly. We will take the basic state that we defined in the previous video and refactor it so that it consists of two unique views within the application.

angularjs tutorial about AngularJS Architecture: Basic State with ui-router

AngularJS Architecture: Basic State with ui-router

5:20 angularjs PRO

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)

angularjs tutorial about AngularJS Architecture: Using Sub-Modules

AngularJS Architecture: Using Sub-Modules

4:22 angularjs PRO

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.

angularjs tutorial about AngularJS Architecture: File Structure

AngularJS Architecture: File Structure

5:51 angularjs PRO

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.

angularjs tutorial about AngularJS Architecture: Series Introduction

AngularJS Architecture: Series Introduction

2:32 angularjs

Ready to start learning about AngularJS Application Architecture? This lesson series is for you. Let's talk about what you will learn.

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

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: 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: 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: 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: 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: 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: 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: 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 Greensock TimelineLite Animation Sequences

Greensock TimelineLite Animation Sequences

10:18 angularjs PRO

TimelineLite is a piece of the Greensock TweenMax library that provides the ability to create sequenced animation with very little code or setup.

angularjs tutorial about Firebase Data Relationships

Firebase Data Relationships

10:33 angularjs PRO

Data has relationships, and Firebase allows you to define those relationships in your AngularJS applications.

angularjs tutorial about 3d Animations with Greensock TweenLite

3d Animations with Greensock TweenLite

6:52 angularjs

AngularJS animations and TweenLite make it really easy to create cool 3d effects in your application.

angularjs tutorial about Basic Animation with Greensock's TweenMax

Basic Animation with Greensock's TweenMax

7:20 angularjs PRO

Greensock is a powerful animation library for JavaScript. It's also fully compatible with AngularJS. This lesson will get you started using Greensock with AngularJS to provide rich animations for your users.

angularjs tutorial about Firebase Basic Authentication Part 2

Firebase Basic Authentication Part 2

3:22 angularjs PRO

Authenticating with Firebase creates a 24 hour session for the user. This allows you to fetch the current session for the user, as well as logout the user and destroy the session.

angularjs tutorial about Firebase Basic Authentication Part 1

Firebase Basic Authentication Part 1

6:09 angularjs PRO

Firebase has several ways to provide authentication for your AngularJS application. In this lesson, Lukas will look at the most basic email/password approach.

angularjs tutorial about First Step: Adding Angular to the HTML Page

First Step: Adding Angular to the HTML Page

2:51 angularjs

The first step to any AngularJS project, is actually adding AngularJS to the page. This lesson will show you adding the Angular script, initializing the app with ng-app, and simple two way binding with ng-model. This is a beginner level lesson.

angularjs tutorial about Firebase Event Handling

Firebase Event Handling

4:25 angularjs PRO

When using Firebase collections in your AngularJS application, you have access to a handy set of events emitted by the collection when changes in your data occur. Be sure to check out the first lesson in this series for the project source code.

angularjs tutorial about Updating Real-Time Data with Firebase Forge

Updating Real-Time Data with Firebase Forge

2:53 angularjs

The Firebase Forge provides a convenient GUI for visualizing and manipulating your data in real-time. Be sure to check out this lesson for getting Firebase setup.

angularjs tutorial about Get Started with Firebase and AngularFire

Get Started with Firebase and AngularFire

6:10 angularjs

Firebase provides a real-time syncing backend for your AngularJS applications in very few lines of code. In this lesson, you'll learn how to get started integrating it into your app.

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