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...

Angular 1.x Redux: Create Reusable Actions with Action Creators

P

Angular 1.x Redux: Test Reducers

P

Angular 1.x Redux: Handle Multiple Models by Combining Reducers

P

Angular 1.x Redux: Handle Asynchronous Operations with Middleware

P

Angular 1.x Redux: Map State and Dispatchers to Redux

P

Angular 1.x Redux: Integrate Redux Devtools

Angular 1.x Redux: Put It All Together

P

Angular 1.x Redux: Avoid State Mutation with Immutable Operations

P

Angular 1.x Redux: Integrate ngRedux

P

Angular 1.x Redux: Subscribe to the Application Store

P

Angular 1.x Redux: Persist State with an Application Store

P

Angular 1.x Redux: Introduction

Angular 1.x Redux: Handle State Mutations with Reducers

P

Communicate State Changes in Angular with an Event Bus

P

Initialize Angular Components with Lifecycle Hooks

P

Test an Angular Component with $componentController

P

Isolate State Mutations in Angular Components

P

Container and Presentation Components Using Angular Component Bindings

P

Build Lightweight Controllers by Binding to Models in Angular

P

Compile an Angular Application Written in ES6

P

Refactor Angular Controller Logic to Services

P

Use Dependency Injection with ES6 and Angular

P

Build an Angular Component Controller Using ES6 Class

P

Structure a Complex Angular Component using Subcomponents

P

Create a Top Level Angular Application Component

P

Introducing Angular 2 Concepts in Angular 1

Create Modals with Ionic

P

Build a Powerful List with Ionic

P

Convert a UI Route into an Angular Directive

P

Build a Sidebar Layout with Ionic

P

Device Interaction in an Ionic App with Cordova Plugins

P

Prepare an Ionic App for Ionic Components and Styling

P

Build, Emulate, and Debug an Ionic App

P

Convert a Web Application into an Ionic App

P

Build and Run an Ionic App from Scratch

Upload and Share an Ionic App

Build and Run an Android Application with Ionic on a Mac

P

Build and Run an iOS App on a Mac

P

Setting Up your Mac with Ionic and Cordova

P

Angular Automation: Gulp Watch

P

Angular Automation: Gulp Config

P

Angular Automation: Gulp Serve

Angular Automation: Gulp Inject

P

Angular Automation: Copy Assets with Gulp

P

Angular Automation: Gulp Tasks

P

Deploy Your Ionic App to a Device

P

Edit Your Ionic Application Code

P

Run Your First Ionic App

Install the Java Developer Kit (JDK) for Ionic

P

Install the Genymotion Android Emulator for Ionic

P
angularjs tutorial about Angular 1.x Redux: Create Reusable Actions with Action Creators

Angular 1.x Redux: Create Reusable Actions with Action Creators

4:45 angularjs PRO

Manually creating action items every time we need to dispatch an action eventually accumulates to a very tedious process. In this lesson, we will learn how to abstract out the creation of action items so that we consolidate their creation into a single place. This not only creates efficiencies in how we express code but also reduces code volume while simultaneously increasing stability.

angularjs tutorial about Angular 1.x Redux: Test Reducers

Angular 1.x Redux: Test Reducers

10:35 angularjs PRO

One of the primary advantages of using redux is that reducers are incredibly easy to test. By nature, they have a clearly defined contract of inputs and outputs, and because they are stateless, they require very little instrumentation to test in isolation.

We will start with a few simple tests for the categories reducer and then move on to testing the CRUD functionality within the bookmarks reducer.

angularjs tutorial about Angular 1.x Redux: Handle Multiple Models by Combining Reducers

Angular 1.x Redux: Handle Multiple Models by Combining Reducers

5:57 angularjs PRO

In this lesson, we are going to learn how to enable our store to work with more than one reducer in an application.

Currently, we have set up our store to work with the categories reducer exclusively, but this leaves us with a real problem, what if we want to keep track of the currently selected category within our store so that we can access that data somewhere else in the app? It is safe to say that most applications consist of many data models interacting together, and we need a way to accommodate this within the single state tree in our application.

When we initialize our app store, wouldn't it be convenient if we could take all of our reducers and combine them into one big reducer that our store knows how to work with? Well, this is exactly what the combine reducer method does in Redux. It allows us to combine reducers together and then access them as a named property on our application store.

We currently have a category reducer just hanging out here doing nothing because we have been focusing entirely on the categories reducer. We are going to combine the two reducers so that we can use the current category data within our bookmarks component.

angularjs tutorial about Angular 1.x Redux: Handle Asynchronous Operations with Middleware

Angular 1.x Redux: Handle Asynchronous Operations with Middleware

9:34 angularjs PRO

Invariably the question that comes up when talking about Redux is how does one handle asynchronous operations in redux. For instance, how do we hand off an operation to redux that requires a remote call to the server? Where exactly does the async part get handled?

Redux has this concept of middleware that allows us to insert custom logic in the space between dispatching an action, and the moment it reaches the reducer. In this lesson, we are going to set up a few async operations and then use redux thunk middleware to make sure that everything makes it into the reducer properly.

The main key to thunk middleware is that it allows us to return a function instead of an action. This function can encapsulate the async operation and dispatches the appropriate action when the operation is completed.

angularjs tutorial about Angular 1.x Redux: Map State and Dispatchers to Redux

Angular 1.x Redux: Map State and Dispatchers to Redux

8:45 angularjs PRO

In this lesson, we are going to learn how to map our Angular component directly to our application store using the connect method on ngRedux.

In Angular, it is a common technique to bind a controller property directly to the model so that our controllers remain lightweight and operate more as a pass through mechanism than anything else.

Using the connect method, we can accomplish the same effect by not only binding properties directly to the application store, but also binding our controller to our action creators. This allows us to drastically simplify our controllers as we are able to delete a bunch of local controller methods as they become unnecessary because of our mappings.

angularjs tutorial about Angular 1.x Redux: Integrate Redux Devtools

Angular 1.x Redux: Integrate Redux Devtools

8:52 angularjs

In this lesson, we are going to learn how to integrate Redux Devtools into our Angular application.

Redux Devtools is a live-editing time travel environment for Redux. Devtools boasts a list of awesome features but my two favorite ones are that we can inspect every state and action as it happens and we can go back in time by “cancelling” actions.

This is going to be an interesting lesson because, in order for this to work, we are going to need to make something that was written for React work in Angular. For the most part, everything will play side by side with one small trick that we will pull off at the end to force an Angular digest cycle when React manipulates the application store.

angularjs tutorial about Angular 1.x Redux: Put It All Together

Angular 1.x Redux: Put It All Together

14:10 angularjs PRO

In this lesson, we are going are going to apply everything that we have learned by building out our bookmarks component to be powered by Redux. This will help reinforce all the techniques we have covered by seeing them built out in a single, contiguous lesson.

We will walk through the steps necessary to phase out the bookmarks model with a Redux implementation that includes building and integrating the equivalent reducers and action creators to integrate into our application.

angularjs tutorial about Angular 1.x Redux: Avoid State Mutation with Immutable Operations

Angular 1.x Redux: Avoid State Mutation with Immutable Operations

9:46 angularjs PRO

One of the biggest mental shifts that developers have to take when embracing redux is shifting from mutable operations to immutable operations. The problem with mutable operations is that they create side effects that involve anything else that is referencing the thing that is being mutated.

With immutable operations within a reducer, a new object is returned for every operation – completely bypassing the possibility that an existing reference is going to be compromised. It is then up to the consumer to decide how they want to get the new data and what to do with it.

In this lesson, we are going to flesh out the CRUD functionality of our bookmarks reducer, doing it first using mutable operations and then refactoring it to use immutable operations.

angularjs tutorial about Angular 1.x Redux: Integrate ngRedux

Angular 1.x Redux: Integrate ngRedux

4:40 angularjs PRO

Up to this point, we have created an effective, yet rudimentary, implementation of Redux by manually creating an application store, reducers and action creators. We have already made significant progress in simplifying state management within our application, but we have in fact only touched the surface of what Redux has to offer.

In this lesson, we are going to introduce ngRedux into our application and let it handle the rest of the heavy lifting as we work through this series. ngRedux is a project that provides angular bindings to redux to streamline integrating it into our application.

angularjs tutorial about Angular 1.x Redux: Subscribe to the Application Store

Angular 1.x Redux: Subscribe to the Application Store

5:59 angularjs PRO

In this lesson, we are going to extend our application store with a subscribe method so that we do not have to manually query our application store every time we dispatch an action.

In our categories controller, we are dispatching a GET_CATEGORIES action every time we want to update the categories collection within our application store. For this change to be propagated back into our controller, we need to call store.getState.

Depending on how many times we are calling store.dispatch, this could get very cumbersome. We will extend our application by adding a subscribe method so that state changes are automatically pushed into our controller.

angularjs tutorial about Angular 1.x Redux: Persist State with an Application Store

Angular 1.x Redux: Persist State with an Application Store

5:45 angularjs PRO

In this lesson, we are going to learn how to build an application store so that we can have a single place to store our application state. Reducers are great for updating state because they are stateless, but they are very bad at preserving state, which is vital when you need to reference state in more than one place.

We will build out a simple application store that will be responsible for keeping track of our categories collection that our categories controller can consume.

angularjs tutorial about Angular 1.x Redux: Introduction

Angular 1.x Redux: Introduction

2:03 angularjs

Welcome to the series where we are going to learn how to integrate Redux into an existing Angular application.

One of the most challenging aspects of programming is state management. The complexity involved with managing state exponentially increases with each moving piece that we introduce. For every piece of shared, mutable state that we have in our application, there is an opportunity for unintended behavior. For instance, let us say that we have a collection that is shared between two controllers; how do we modify it from one controller with absolute certainty that it isn't going to adversely affect the other?

This is where Redux comes riding in on a white horse and saves the day! By applying Redux to our application, we consolidate all of our states into a single JavaScript object called a store that can only be modified by dispatching an action. To further simplify things, state mutations within our store are handled by pure, stateless functions called reducers.

Redux was initially created for React, but it is in fact, a really solid programming pattern that we can easily apply to our Angular applications. The beauty of Redux is its simplicity in so much that someone could create an implementation of Redux in less than 10 minutes. This is exactly what we will do in the first couple lessons as we build out our reducers, actions and application store by hand before we introduce ng-redux to handle the rest of our abstractions.

We will also learn how to combine reducers, introduce middleware for async operations, map state directly to our actions, test reducers and even hook up Redux devtools. By the end of the series, you will have the tools in your hands to tame state management within your angular application while reducing the overall complexity thanks to the simplicity of Redux.

angularjs tutorial about Angular 1.x Redux: Handle State Mutations with Reducers

Angular 1.x Redux: Handle State Mutations with Reducers

9:52 angularjs PRO

In this lesson, we are are going to learn how to abstract out state mutations into a reducer. In our current Eggly application, all of the state and business logic for our categories is handled within the categories model. We are going to refactor our code to entirely eliminate the need for our categories model by building out a couple of reducers and seeing how we can interact with them directly.
The key thing to notice as we build out our reducers is that a reducer itself is completely stateless because it receives current state every single time it needs to calculate and return the new state. With a clearly defined contract of inputs and outputs, this makes testing reducers really easy which is one of the huge benefits of using this approach.

angularjs tutorial about Communicate State Changes in Angular with an Event Bus

Communicate State Changes in Angular with an Event Bus

2:49 angularjs PRO

In Angular 2, we use observables to push new data to our components. In Angular 1, we occasionally need to notify a component that a collection has changed so that we can perform an operation at the component level.

For example, when we are editing or creating a bookmark, and we navigate to a new category, we are left in this awkward state of an incomplete edit.

We need to be notified when a new category is selected at the bookmark level so that we can reset the current bookmark. Even though we do not have the convenience of an observable to emit state changes to us, we can still spin up an event bus to let us know when we need to hit reset.

angularjs tutorial about Initialize Angular Components with Lifecycle Hooks

Initialize Angular Components with Lifecycle Hooks

3:35 angularjs PRO

Angular exposes key events within a component's lifecycle so that we can apply our own custom logic. In this lesson, we will learn how to leverage component lifecycle hooks to adhere to best practices of keeping our initialization logic out of our constructor.

angularjs tutorial about Test an Angular Component with $componentController

Test an Angular Component with $componentController

3:56 angularjs PRO

Traditionally you had to create DOM elements to test a directive but by shifting our focus to components, writing unit tests got a lot easier using $componentController within ngMocks. We can now test our component's controller with an easy to use API that does not require us to spin up any DOM elements to do so. In this lesson, we will see how our ES6 tests are transpiled, learn how to test a component using $componentController and talk about how to simulate lifecycle hooks.

angularjs tutorial about Isolate State Mutations in Angular Components

Isolate State Mutations in Angular Components

8:06 angularjs PRO

Managing state is one of the hardest things to do in any application. Angular 2 tackles this problem by making it easy to implement a reactive, uni-directional data flow that favor immutable operations. We are moving in the right direction in Angular 1 by moving our state and logic to models but invariably this raises a question. If we are moving to an immutable world, how do you manage mutable operations like forms in Angular? In this lesson, we are going to learn a surprisingly simple technique to isolate state mutations within a component using component lifecycle hooks.

angularjs tutorial about  Container and Presentation Components Using Angular Component Bindings

Container and Presentation Components Using Angular Component Bindings

6:09 angularjs PRO

Angular 2 introduces the concept of inputs and outputs as a mechanism for components to communicate. The most significant advantage of this is that we can create presentation components that are void of any imperative logic as they rely entirely on their parent container component. We will learn how to create inputs and outputs in Angular 1 using isolated scope and the component binding syntax.

angularjs tutorial about Build Lightweight Controllers by Binding to Models in Angular

Build Lightweight Controllers by Binding to Models in Angular

10:02 angularjs PRO

In Angular, our controllers should be small and focused on the view that it is controlling. We accomplish this by moving as much logic and state as we can into models. Angular 2 introduced observables and async pipes which make it easy to manage state and communicate that directly to our templates.

We can start to point our Angular 1 applications in that direction by binding to our models directly from within our controllers. In this lesson, we will see a simple example of this technique and a slightly more advanced case where we lose the lexical reference to the this keyword.

angularjs tutorial about Compile an Angular Application Written in ES6

Compile an Angular Application Written in ES6

5:31 angularjs PRO

Angular 2 leverages new language features in ES6 and TypeScript so that we can organize and express our ideas better. By writing our Angular 1.x application in ES6, we can create a surprising resemblance to an Angular 2 application. To do this, we need to set up Webpack and Gulp to convert our code into something the browser can safely understand. In this lesson, we will learn how to configure Webpack to process our source code and then hook it into Gulp as part of our build system.

angularjs tutorial about Refactor Angular Controller Logic to Services

Refactor Angular Controller Logic to Services

3:28 angularjs PRO

In Angular, we want to keep our controllers lightweight and specific to the view that it is controlling. To accomplish this, we are going to refactor our categories collection into a CategoriesModel. A recurring theme in Angular 2 is that everything is "just a class". When we create our controllers and services in an Angular 2 style, they are also "just a class". We will see this in action as we convert our controller almost verbatim into a service.

angularjs tutorial about Use Dependency Injection with ES6 and Angular

Use Dependency Injection with ES6 and Angular

3:09 angularjs PRO

In this lesson, we are going to talk about dependency injection in an Angular application in ES6. There is a gotcha that I want to point out that most people will run into especially if they have not spent a lot of time using a classical language. We will start with a contrived example and then anchor it back into our application when we modify our CategoriesModel to use the $q service to return a promise.

angularjs tutorial about Build an Angular Component Controller Using ES6 Class

Build an Angular Component Controller Using ES6 Class

3:58 angularjs PRO

The simplest version of a component in Angular 2 is nothing more than a container for a template. When we need to introduce imperative logic into our component, we do that via an ES6 class. We accomplish the exact same thing in Angular 1.x by using an ES6 class to serve as a controller for a component. In this lesson, we will examine an Angular 2 component to establish the pattern and then illustrate the similarity as we build out our own controller in ES6.

angularjs tutorial about Structure a Complex Angular Component using Subcomponents

Structure a Complex Angular Component using Subcomponents

5:13 angularjs PRO

An Angular 2 cornerstone is component driven architecture and how we divide up our features into self-contained components and then fit them together. In this lesson, we will cover the basic structure of a component in an Angular 2 style as we build one from the ground up. Equally important, we will see how to integrate it into our application by adding it to our root component.

angularjs tutorial about Create a Top Level Angular Application Component

Create a Top Level Angular Application Component

4:31 angularjs PRO

The entry point for any Angular 2 is a single, top-level component that all other components branch off of. We will apply this pattern to our Angular 1.x applications by creating our first component using the .component syntax and adding it to our application to serve as our root component.

angularjs tutorial about Introducing Angular 2 Concepts in Angular 1

Introducing Angular 2 Concepts in Angular 1

2:42 angularjs

In this introductory lesson, we will discuss how the architectural concepts of Angular 2 can be applied to AngularJS 1.x. We will also take a brief tour of the concepts that we will be covering in this series as well as how the code is structured per lesson.

angularjs tutorial about Create Modals with Ionic

Create Modals with Ionic

14:11 angularjs PRO

In this lesson, we learn how to build modals in Ionic. We use the ion-modal-view directive to wrap our “create” and “edit” forms with modal goodness, as well as use the ion-header-bar directive to put a nice bar at the top of our forms. Finally, we use the $ionicModal service to give life to our modals by integrating them with our controllers.

angularjs tutorial about Build a Powerful List with Ionic

Build a Powerful List with Ionic

12:38 angularjs PRO

In this lesson, we are going to dig into Ionic lists and make use of some awesome list features that Ionic gives us for free. We are going to learn how to use the following Ionic directives:

  • ion-nav-buttons - Use nav buttons to set the buttons on your ionNavBar.
  • ion-list - The List is a widely used interface element in almost any mobile app, and can include content ranging from basic text all the way to buttons, toggles, icons, and thumbnails.
  • ion-item- Used to create items inside of an ionList.
  • ion-delete-button - A child of ionItem, this element allows a developer to show/hide a delete button within an ionItem with ease.
  • ion-reorder-button - A child of ionItem, this element allows a developer to reorder an ionItem within a list easily.
angularjs tutorial about Convert a UI Route into an Angular Directive

Convert a UI Route into an Angular Directive

2:49 angularjs PRO

In this lesson, we are going to turn two forms into Angular directives in preparation for turning them into Ionic modals. This isn’t a complicated step, but it puts us in a better place for creating the modals.

angularjs tutorial about Build a Sidebar Layout with Ionic

Build a Sidebar Layout with Ionic

8:49 angularjs PRO

In this lesson, we learn how to build a sidebar layout using only Ionic directives. Ionic provides some powerful functionality with very few semantics. Here are all the directives we will learn about:
- ion-side-menus - A container element for side menu(s) and the main visible content.
- ion-side-menu-content - A container for the main visible content, sibling to one or more ionSideMenu directives.
- ion-side-menu - A container for a side menu, sibling to an ionSideMenuContent directive.
- ion-nav-view - Used to render templates in your application. Each template
is part of a state. States are usually mapped to a url, and are defined programatically
using angular-ui-router (see their docs for reference).
- ion-view - A container for view content and any navigational and header bar information. Used as a child of ionNavView.
- ion-nav-bar - If we have an ionNavView directive, we can also create an
ionNavBar, which will create a topbar that updates as the application state changes.
- ion-nav-buttons - Use nav buttons to set the buttons on your ionNavBar
from within an ionView.
- ion-content- Provides an easy to use content area that can be configured
to use Ionic’s custom Scroll View, or the built in overflow scrolling of the browser.
- ion-list - The List is a widely used interface element in almost any mobile app, and can include
content ranging from basic text all the way to buttons, toggles, icons, and thumbnails.
- ion-item - Used to create items inside of an ionList.

angularjs tutorial about Device Interaction in an Ionic App with Cordova Plugins

Device Interaction in an Ionic App with Cordova Plugins

4:59 angularjs PRO

In this lesson, we are going to learn how to interact with native components through Cordova plugins. We will walk through how to add a Cordova plugin to our application and use it to interact with our native device. In this case, we are going to install a plugin that will allow us to open URLs in a mobile browser from within our Ionic app.

  • item
  • item
angularjs tutorial about Prepare an Ionic App for Ionic Components and Styling

Prepare an Ionic App for Ionic Components and Styling

2:12 angularjs PRO

In this lesson, we are going to include the necessary assets for the functionality and styles of the Ionic directives we will include in our app.

angularjs tutorial about Build, Emulate, and Debug an Ionic App

Build, Emulate, and Debug an Ionic App

2:53 angularjs PRO

In this lesson, we are going to build an Ionic app for the iOS platform, and then emulate iOS on our computer. We are going to cover some important command-line options when emulating an Ionic application. We will then see how these options play a critical role in debugging our applications.

angularjs tutorial about Convert a Web Application into an Ionic App

Convert a Web Application into an Ionic App

2:24 angularjs PRO

In this lesson, we are going to demonstrate how easy it is to copy existing Angular code into an Ionic app. It is literally as simple as removing unnecessary code from the Ionic app and pasting in the guts of our Angular application. Along the way, we will update some dependencies and discover a gotcha for including assets from a CDN.

angularjs tutorial about Build and Run an Ionic App from Scratch

Build and Run an Ionic App from Scratch

1:49 angularjs

In this lesson, we learn how to install Ionic and Cordova. We then build an app from scratch using the Ionic CLI and a blank starter template.

angularjs tutorial about Upload and Share an Ionic App

Upload and Share an Ionic App

2:53 angularjs

In this lesson, we are going to take an Ionic App and upload it to our Ionic account. Then we are going to download the app (via another app called Ionic View) and view it on our phone.

angularjs tutorial about Build and Run an Android Application with Ionic on a Mac

Build and Run an Android Application with Ionic on a Mac

8:15 angularjs PRO

In this lesson, we are going to install Android and some other Android dependencies onto our Mac. Then we are going to install VirtualBox and Genymotion and use them to run our Ionic app on our Mac.

angularjs tutorial about Build and Run an iOS App on a Mac

Build and Run an iOS App on a Mac

3:49 angularjs PRO

In this lesson, we learn how to run an app on our Mac. We are going to download Xcode, which includes an iOS simulator. Once we have Xcode, it is a matter of a couple commands in our terminal to run and view our app on our mac.

angularjs tutorial about Setting Up your Mac with Ionic and Cordova

Setting Up your Mac with Ionic and Cordova

3:11 angularjs PRO

In this lesson, we install Node.js (with Node Package Manager) as well as 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. We then create an Ionic app in just a few more commands.

angularjs tutorial about Angular Automation: Gulp Watch

Angular Automation: Gulp Watch

5:02 angularjs PRO

In this lesson, we are going to learn how to use gulp.watch to detect local file changes and execute additional Gulp tasks. To illustrate this concept, we are also going to hook up gulp-jshint to automation lint our JavaScript as we make changes to our code.

angularjs tutorial about Angular Automation: Gulp Config

Angular Automation: Gulp Config

3:35 angularjs PRO

In this lesson, we are going to learn how to create a config file to store common values so that we can reuse them multiple times in our gulpfile.js. As our gulpfile.js grows in complexity, we may find that we are introducing complex and multiple file path references. By creating a gulp.config.js file, we can simplify these references and make it easier to refactor and extend in the future.

angularjs tutorial about Angular Automation: Gulp Serve

Angular Automation: Gulp Serve

2:49 angularjs

In this lesson, we are going to learn how to automatically serve our project via an HTTP server using gulp-serve. Being able to serve our project from an HTTP server allows us to bypass a myriad of development issues such as loading remote source files.

angularjs tutorial about Angular Automation: Gulp Inject

Angular Automation: Gulp Inject

5:10 angularjs PRO

In this lesson, we are going to learn how to use the gulp-inject plugin to sanely and efficiently manage our file references with our HTML. Manually declaring JavaScript references will quickly get out of hand as your application grows in size and complexity. The gulp-inject plugin solves this problem by taking a stream of files, converting them into string references and then injecting those references into your HTML via annotations.

angularjs tutorial about Angular Automation: Copy Assets with Gulp

Angular Automation: Copy Assets with Gulp

5:13 angularjs PRO

In this lesson, we are going to learn how to copy assets from one place to another using Gulp. This is important as you start to prepare your source files to be deployed into production. We will learn how to implement gulp.src, gulp.pipe and gulp.dest as well as the del plugin as we copy our files from the source directory into a build directory.

angularjs tutorial about Angular Automation: Gulp Tasks

Angular Automation: Gulp Tasks

3:45 angularjs PRO

In this lesson, we will learn how tasks work in Gulp. We will talk about how to define a task and what each parameter in the definition does. We will see how task dependencies work and talk about how to handle asynchronous issues using run-sequence.

angularjs tutorial about Deploy Your Ionic App to a Device

Deploy Your Ionic App to a Device

3:15 angularjs PRO

This lesson has two parts: 1) uploading our app to an Ionic account and 2), downloading the Ionic View app to your phone. Once this lesson is done, we will be able to view our app in our Ionic account dashboard and manage settings for it. We will also be able to share our app with anyone who downloads the Ionic View app, so they don’t have to build and run our app themselves.

angularjs tutorial about Edit Your Ionic Application Code

Edit Your Ionic Application Code

1:45 angularjs PRO

In this lesson, we quickly demonstrate how to edit our code and re-run our app. The pertinent piece of the puzzle is knowing where the code for the HTML/Javascript/CSS is. Once we know where that is, editing it and running the app is a cinch!

angularjs tutorial about Run Your First Ionic App

Run Your First Ionic App

2:06 angularjs

In this lesson, we learn how to run an app on our PC using Genymotion. Genymotion provides a simple UI that enables us to create and run virtual devices with a couple clicks. Once our virtual device is running, it is just a matter of a couple commands in the command prompt and we can view and test our app on our PC.

angularjs tutorial about Install the Java Developer Kit (JDK) for Ionic

Install the Java Developer Kit (JDK) for Ionic

2:27 angularjs PRO

In this lesson, we install the Java Developer Kit (JDK). The JDK contains the Java Runtime Environment (JRE) and all the tools necessary to compile Java applications. This is necessary to compile and run Java, which in turn is necessary to run android.

angularjs tutorial about Install the Genymotion Android Emulator for Ionic

Install the Genymotion Android Emulator for Ionic

2:08 angularjs PRO

In this lesson, we install Genymotion, which allows us to create virtual Android devices on our PC. We could use the Android emulators provided by the Android SDK, but on Windows this proves to be problematic. Most Android developers that operate on a PC opt for using Genymotion, not only because it’s faster, but because it provides easy access to testing different native functions of Android devices, such as the camera, microphone, accelerometer, etc.

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