angularJS and NodeJS

Watch User Created Playlist (60)

This playlist is user created.

pro-course-rss-logo

PRO RSS Feed

Consistency between ui-router states and Angular directives

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

Lazy Loading modules with ui-router and ocLazyLoad

P

ui-router: Abstract States

P

ui-router: Activating States

ui-router Named Views

P

Introduction to ui-router

AngularJS Architecture: Animate state transitions with ui-router

P

Angular Automation: Installing Gulp Globally and Locally

P

Line and Area Charts with D3

P

Introduction to angular-formly

Create a D3 Chart as an Angular Directive

P

Using ngMockE2E to mock backend data

P

Restarting your node.js app on code change using pm2

angular-formly: Custom Templates

angular-formly: Custom Validation

angular-formly: expressionProperties

angular-formly: templateOptions

angular-formly: Default Values

angular-formly: Default Options

angular-formly: Extending Types

Sequelize: Model Definition Basics

Understand the Node.js process object

Stateful filters with promises in AngularJS

The Module Pattern in Javascript (aka Immediately-Invoked Function Expression aka IIFE)

Angular Automation: Gulp Tasks

P

Export Modules in Node.js

P

Angular Automation: Gulp Inject

P

Hoisting in JavaScript

Angular Automation: Gulp Serve

Create a Basic Server with Express

Define dynamic routes through Express

P

Use Template Engines with Express

P

Serve static files with express

P

Handle Errors with a Redirect in Express

Organize Code by Subpath in Express

P

Use Streams in Express

P

Handle Errors with Express Middleware

P

Integrate MongoDB into your Express App

P

Angular Automation: Gulp Config

P

Angular Automation: Gulp Watch

P

Publish and Share a Node.js Module

P

Installing and Writing a Default Task with Gulp

Gulp and Browserify - Initial Setup

Save and Delete Content in Express with HTTP Verbs

P

Gulp and Browserify - Hooking up Watchify

P

Gulp and Browserify - Adding Live Reload with Browsersync

Gulp and Browserify - Adding Babel & Source Maps

P

Add and Remove EventEmitters in Node.js

P

Responsive D3 charts with the viewBox attribute

P

Trying new versions of Node.js with NVM

P

Use virtual properties with Mongoose and MongoDB

P

When should I use ng-show or ng-if

WebStorm - Customizing the Built-in Terminal

What is JavaScript Function Currying?

Intro to Recursion - Refactoring to a Pure Function

Firebase Data Relationships

P
angularjs tutorial about Consistency between ui-router states and Angular directives

Consistency between ui-router states and Angular directives

4:40 angularjs PRO

ui-router's states and AngularJS directives have much in common. Let's explores the similarities between the two and how these patterns have emerged in Angular. Keeping your states and directives consistent can also help with refactoring as your app grows larger over time.

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 Lazy Loading modules with ui-router and ocLazyLoad

Lazy Loading modules with ui-router and ocLazyLoad

2:40 angularjs PRO

We've looked at lazy loading with ocLazyLoad previously, but what if we are using ui-router and want to lazy load modules when we change states?

angularjs tutorial about ui-router: Abstract States

ui-router: Abstract States

3:17 angularjs PRO

ui-router has the powerful ability to define abstract states, or states that can't be navigated to, but are useful for defining a set of states with shared properties.

angularjs tutorial about ui-router: Activating States

ui-router: Activating States

4:04 angularjs

The ui-router library for AngularJS provides several options for navigating between states in your application. You can navigate via the browser's URL bar, programatically with $state.go, and with the ui-sref directive on your HTML elements.

ui-router Named Views

6:38 angularjs PRO

The ui-router library for AngularJS provides the ability to name views within your application. This is useful for dividing up your application into sections, and changing the content of a section based on the current state.

angularjs tutorial about Introduction to ui-router

Introduction to ui-router

4:35 angularjs

In his debut egghead.io lesson, Joel will show you how to get setup and running with ui-router, an alternative to AngularJS's default routing module.

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

d3 tutorial about Line and Area Charts with D3

Line and Area Charts with D3

6:37 d3 PRO

Create a line chart, then easily convert it to an area chart

angularjs tutorial about Introduction to angular-formly

Introduction to angular-formly

5:43 angularjs

angular-formly is a terrific abstraction on top of forms in Angular. This short introduction shows you how to get started with angular-formly.

angularjs tutorial about Create a D3 Chart as an Angular Directive

Create a D3 Chart as an Angular Directive

8:55 angularjs PRO

Integrating D3 with Angular can be very simple. In this lesson, you will learn basic integration as well as how to create D3 charts that can be packaged as AngularJS directives.

angularjs tutorial about Using ngMockE2E to mock backend data

Using ngMockE2E to mock backend data

4:02 angularjs PRO

Mocking backend responses is extremely simple with angular-mocks.js and the ngMockE2E module. This lesson will show you how to include and use the module, ensuring you can stay productive on the front end even if your back end is broken, slow, or doesn't even exist yet.

node tutorial about Restarting your node.js app on code change using pm2

Restarting your node.js app on code change using pm2

3:04 node

In this video, learn how to automatically restart your node.js app using pm2 when the code for your app changes. You will also learn how to exclude files and directories from restarting your app (such as static assets, css, images, etc.).

angularjs tutorial about angular-formly: Custom Templates

angular-formly: Custom Templates

5:05 angularjs

The type functionality of the angular-formly library is powerful. In this lesson, see how you can use it to create custom templates for your field configurations and see what is available in the scope of each of your fields.

angularjs tutorial about angular-formly: Custom Validation

angular-formly: Custom Validation

3:14 angularjs

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.

angularjs tutorial about angular-formly: expressionProperties

angular-formly: expressionProperties

4:27 angularjs

angular-formly provides a very simple API to dynamically change properties of your field (like disabled, hidden, and required) using the powerful expressionProperties property on your field.

angularjs tutorial about angular-formly: templateOptions

angular-formly: templateOptions

3:01 angularjs

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 ng-model like required, maxlength, and even ng-click. It also works great with expressionProperties.

angularjs tutorial about angular-formly: Default Values

angular-formly: Default Values

0:52 angularjs

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.

angularjs tutorial about angular-formly: Default Options

angular-formly: Default Options

2:48 angularjs

angular-formly allows you to keep your forms as DRY as possible. The optionsTypes property is one way of composing your field configurations to keep your forms light-weight and DRY.

angularjs tutorial about angular-formly: Extending Types

angular-formly: Extending Types

2:17 angularjs

Extending types is one of the ways that makes angular-formly help you keep your Angular forms DRY. When use responsibly, they can make it much easier to manage common types, allowing you to add a bit of functionality to a common type.

node tutorial about Sequelize: Model Definition Basics

Sequelize: Model Definition Basics

2:37 node

Sequelize is an Object Relational Mapper (ORM), which simplifies interacting with relational databases by abstracting away the need to use SQL directly. This lesson introduces defining models with Sequelize in Node.js.

You will need the Postgres database for this lesson! For Mac users, postgressapp makes this easy.

node tutorial about Understand the Node.js process object

Understand the Node.js process object

6:26 node

In this lesson, we introduce the process object, part of the node.js global namespace. The process object is extremely useful for identifying information about the runtime environment of your node app such as the version of node, the arguments passed to the node executable, the current working directory, and the nextTick function. All of these are discussed and illustrated with examples in this lesson.

angularjs tutorial about Stateful filters with promises in AngularJS

Stateful filters with promises in AngularJS

4:44 angularjs

This lesson illustrates how to use promises inside Angular filters

js tutorial about The Module Pattern in Javascript (aka Immediately-Invoked Function Expression aka IIFE)

The Module Pattern in Javascript (aka Immediately-Invoked Function Expression aka IIFE)

5:05 js

Javascript modules are a design pattern that allow you to encapsulate your code into smaller self managing pieces. They help you separate your code, protect your variables, and provide an easy way to expose only the parts of your component that you want to be exposed.

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.

node tutorial about Export Modules in Node.js

Export Modules in Node.js

5:50 node PRO

In this lesson, you will learn the difference between the exports statement and module.exports. Two examples are demonstrated, each accomplishing the same task but one using export statements and one using module.exports. You will also learn the basic thumb rule to identify which is appropriate for your current needs.

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.

js tutorial about Hoisting in JavaScript

Hoisting in JavaScript

3:39 js

In this lesson, we'll walk through variable, function declaration, and function expression hoisting.

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.

node tutorial about Create a Basic Server with Express

Create a Basic Server with Express

4:24 node

In this lesson we will initialize our Express application using npm init.

After loading express through npm we will look at a couple basic functions Express exposes to us such as .get and .send. This will allow basic interaction via the url.

We will also see how using a package like nodemon can allow for rapid iteration when developing an application.

node tutorial about Define dynamic routes through Express

Define dynamic routes through Express

4:30 node PRO

Routing is a fundamental aspect of Express. This lesson demonstrates how to define dynamic routes and access route parameters in your code.

node tutorial about Use Template Engines with Express

Use Template Engines with Express

3:20 node PRO

Template engines allow you to define your UIs in a declarative manner while maintaining a dynamic, data driven presentation layer. This lesson will demonstrate how to use template engines that have built-in support for Express as well as engines without explicit Express support.

node tutorial about Serve static files with express

Serve static files with express

3:20 node PRO

Sometimes you just need to serve existing files. In this lesson we'll examine how to use functionality built into Express to do just that.

node tutorial about Handle Errors with a Redirect in Express

Handle Errors with a Redirect in Express

6:48 node

Take your routing skills to the next level and learn to recover from errors, initiate downloads, and go beyond simple request and response. When we get a route that does not match we don't want the page to just error out. With .redirect we can send the user to an error page and display a helpful message.

We will go on to see how to download a file with .download and track behavior with get.all.

node tutorial about Organize Code by Subpath in Express

Organize Code by Subpath in Express

3:59 node PRO

As your application grows, it's easy to end up with a long list of route handlers and helper functions. In this lesson we'll look at strategies for keeping things organized and manageable.

We will move individual subpaths into their own file by using .router to create an instance of the Express router.

node tutorial about Use Streams in Express

Use Streams in Express

6:59 node PRO

Streams are a big part of Node's famous non-blocking I/O, and Express lets you take full advantage of them. This lesson demonstrates how to integrate streams into your server to improve performance and simplify your code.

We will look at .creatReadStream, .createWriteStream, and .pipe to read and write from streams.

node tutorial about Handle Errors with Express Middleware

Handle Errors with Express Middleware

5:28 node PRO

Middleware is what Express apps are made of. While the term may be unfamiliar, the techniques and concepts aren't. This lesson will round out your understanding of the various types of middleware and how to use them.

node tutorial about Integrate MongoDB into your Express App

Integrate MongoDB into your Express App

9:09 node PRO

This lesson will walk you through replacing the app's file system reliance with a live MongoDB database. We'll also use a popular ORM library to manage our database operations.

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

node tutorial about Publish and Share a Node.js Module

Publish and Share a Node.js Module

4:30 node PRO

Sharing code and extending functionality in node.js is often done with modules. In this lesson, you will learn how to use npm init to scaffold a new module, verify proper installation, and identify the components needed to publish your module to public and private registries.

js tutorial about Installing and Writing a Default Task with Gulp

Installing and Writing a Default Task with Gulp

1:39 js

A brief introduction to using GulpJS in your JavaScript application and creating your first Gulp task.

js tutorial about Gulp and Browserify - Initial Setup

Gulp and Browserify - Initial Setup

2:21 js

Let's look at the basics of setting up Gulp and Browserify. Creating a Gulp task from scratch, we'll cover how to utilise the Browserify API to generate a single bundle.js file, catch and log any errors that occur in the compilation process, transform the stream into a format that can be consumed by gulp.dest and finish by writing the bundle to a dist directory.

node tutorial about Save and Delete Content in Express with HTTP Verbs

Save and Delete Content in Express with HTTP Verbs

7:04 node PRO

In this lesson you will learn how to support data modification by handling HTTP verbs besides GET. We will look at how to edit, save, and delete content with .put and .delete.

js tutorial about Gulp and Browserify - Hooking up Watchify

Gulp and Browserify - Hooking up Watchify

3:31 js PRO

Beginning with a single Gulp task capable of generating a one-time Browserify bundle, we enable file-watching and incremental rebuilds by incorporating Watchify. We add a second task watch & refactor our initial code to enable the bulk of it to be re-used. We’ll look at exactly how to ‘wire’ these tools together and how the relationship between Watchify & Browserify can manifest into a seriously efficient workflow.

js tutorial about Gulp and Browserify - Adding Live Reload with Browsersync

Gulp and Browserify - Adding Live Reload with Browsersync

3:08 js

Building upon the watch task that we begin this lesson with, we’ll look at how to create a local development server using the app directory as the web root. By using Browsersync to achieve this, we can also instruct all connected browsers to automatically reload each time our bundle is re-generated. Browsersync has a public .stream() method that is designed exactly for this purpose.

js tutorial about Gulp and Browserify - Adding Babel & Source Maps

Gulp and Browserify - Adding Babel & Source Maps

4:30 js PRO

What is already a nice workflow using Gulp, Browserify, Watchify & Browsersync to enable auto rebuilds & live browser reloading can be further improved by adding Babelify. A simple wrapper around the popular transpiler Babel, Babelify can ‘transform’ source files as they pass through our stream to enable certain Javascript features not yet available in the Browser or Node. We end the lesson by looking at how to generate & extract sourcemaps using exorcist.

node tutorial about Add and Remove EventEmitters in Node.js

Add and Remove EventEmitters in Node.js

6:00 node PRO

In this lesson, you will learn what an EventEmitter is and how it works. We start with a simple example creating an instance of the EventEmitter class, then expand on it by building listeners and emitting events to trigger them. You will learn how to view listeners in the global emitter object, as well as how to remove them and understand what the EventEmitter memory leak message means. We wrap everything up by examining the http server class to illustrate how node.js uses EventEmitters in many places for core features.

d3 tutorial about Responsive D3 charts with the viewBox attribute

Responsive D3 charts with the viewBox attribute

11:15 d3 PRO

Ensuring your charts are responsive is essential if you want them to work regardless of the user's device and screen size. In this lesson we'll learn how the viewBox attribute of SVG elements works, and apply that knowledge to make a future-proof D3 chart.

node tutorial about Trying new versions of Node.js with NVM

Trying new versions of Node.js with NVM

4:26 node PRO

It's possible to install and run multiple versions of Node.js using a project called NVM. In this lesson we'll walk though the installation, how to try out Node.js version 4.0.0 & even how to configure Webstorm to use any nvm-installed version. Note: NVM works on Mac OSX and Linux only. For a Windows version (with the same commands) see https://github.com/coreybutler/nvm-windows or https://github.com/hakobera/nvmw

node tutorial about Use virtual properties with Mongoose and MongoDB

Use virtual properties with Mongoose and MongoDB

8:59 node PRO

Virtual properties are a great way to add some semantics to your data layer and abstract any shortcomings of the underlying schema. This lesson demonstrates virtual getters and setters in Mongoose, and how to integrate their use in your Express server.

angularjs tutorial about When should I use ng-show or ng-if

When should I use ng-show or ng-if

5:34 angularjs

Walkthrough the main differences between the ng-show and ng-if directives

otherjs tutorial about WebStorm - Customizing the Built-in Terminal

WebStorm - Customizing the Built-in Terminal

3:29 otherjs

WebStorm has a convenient built-in terminal which you can launch with a simple keyboard shortcut and customize to your heart's content. This video shows how to set up the terminal to launch Cygwin (a very popular Windows shell alternative), but the concepts hold true for launching zsh, fish, or any shell of your choice.

js tutorial about What is JavaScript Function Currying?

What is JavaScript Function Currying?

5:34 js

Currying is a core concept of functional programming and a useful tool for any developer's toolbelt. In this lesson, John walks through the definition of currying and its practical usage.

js tutorial about Intro to Recursion - Refactoring to a Pure Function

Intro to Recursion - Refactoring to a Pure Function

3:37 js

Our previous solution used forEach and a globally available array that could be mutated from inside our function. We can improve upon this and create a function that is easier to maintain & test by swapping our forEach loop for reduce. By removing the global array and instead making getTasks return a value directly we end up with a pure function.

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.

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