Stateful filters with promises in AngularJS

Angular with Webpack - Production Setup

Using Angular with webpack makes the production build a breeze. Simply alter your webpack configuration at runtime based on an environment variable, and you're good to go.

angular-formly: Extending Types

2:17 angularjsPRO

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.

angular-formly: Default Options

2:48 angularjsPRO

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.

angular-formly: Default Values

0:52 angularjsPRO

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.

angular-formly: templateOptions

3:01 angularjsPRO

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.

angular-formly: expressionProperties

4:27 angularjsPRO

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.

angular-formly: Custom Validation

3:14 angularjsPRO

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: Custom Templates

5:05 angularjsPRO

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.

Using ngMockE2E to mock backend data

4:02 angularPRO

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.

Getting started with Angular + JSPM + ES6

3:04 angularjsPRO

JSPM allows you to load any client package from github and npm in any module format. Learn how to use it to create a great workflow with Angular and ES6.

AngularJS $cacheFactory service

5:16 angularjsPRO

Angular's $cacheFactory can be used on its own or to customize the behavior of $http calls. This lesson introduces the API and shows how to integrate $cacheFactory into your project.

Create a D3 Chart as an Angular Directive

8:55 angularjsPRO

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.

Introduction to ngFx for Angular animations

2:04 angularjsPRO

ngFx is an amazing animation library built on top of ngAnimate using Greensock Animation Platform. This quick introduction will have you animating your Angular apps today.

Angular with Webpack - Testing with Karma, Mocha, and Chai

10:22 angularjsPRO

Testing in Angular applications takes a bit of setup. Webpack simplifies things considerably. In this lesson you'll see how to test an Angular application built with Webpack using karma, mocha, and chai.

Angular with Webpack - Requiring CSS & Preprocessors

6:07 angularjsPRO

Making your CSS modular is a difficult thing to do, but using Webpack makes this so much easier. By adding a single line to your Webpack config, you can require you CSS, Stylus, Less, etc. files right from your directives and keep everything together.

Angular with Webpack - ES6 with BabelJS

2:43 angularjsPRO

Use the latest features of ECMAScript using BabelJS with Webpack. Simply add the right loader line in your webpack config and everything just works.

Angular with Webpack - Requiring Templates

2:48 angularjsPRO

With Angular, most of the time you're specifying a templateUrl for your directives and states/routes. This means you need to make sure that you're loading in these templates into the $templateCache for your tests and production. Oh, and don't forget to update all your URLs whenever you move the files around! When you add in Webpack and the raw-loader, you don't need to do this anymore. Simply require the html file and your work is done!

Angular with Webpack - Requiring Directives

3:48 angularjsPRO

With Webpack and CommonJS, the way you register directives, services, etc. with your modules can be a lot more modular. See how to register a directive with an Angular module using Webpack.

Angular with Webpack - Introduction

4:20 angularjs

Webpack is a module bundler for the web. It is incredibly powerful and enables modularity in angular applications. This is the first of several lessons to get you up and going with webpack in Angular applications.

Introduction to angular-formly

5:43 angularjsPRO

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

Angular Automation: Installing Gulp Globally and Locally

4:24 angularjsPRO

In this lesson, we learn how to get up and running with Gulp by initializing our project with npm
initand
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.

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!

New in Angular 1.4 - New bindToController Syntax

1:43 angularjsPRO

Angular 1.4 introduces a new syntax for bindToController. John demonstrates how to use it and what the new options are.

AngularJS Architecture: Review

3:44 angularjsPRO

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 Architecture: Animate state transitions with ui-router

3:46 angularjsPRO

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 Architecture: Delete Bookmark

2:10 angularjsPRO

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 Architecture: Edit Bookmark

12:18 angularjsPRO

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 Architecture: Create Bookmark

6:29 angularjsPRO

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 Architecture: Edit and Create Bookmark States

12:09 angularjsPRO

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.

Using ng-html2js to Convert Templates into JavaScript

3:39 angularjsPRO

ng-html2js takes .html templates and converts them into strings stored in AngularJS's template cache. This allows you to bundle all of your templates into a single JavaScript file for simpler deployment and faster loading. John walks through using ng-html2js in the terminal to show what it does, but to integrate with either gulp or grunt, use the tool specific module.

Catching errors with $exceptionHandler

5:25 angularjsPRO

The AngularJS $exceptionHandler service allows you to catch and handle unanticipated JavaScript errors in a meaningful way.

Taking control of your templates using $templateCache

3:09 angularjsPRO

Learn how Angular stores and retrieves templates, and some tricks for making it more flexible and dynamic.

Consistency between ui-router states and Angular directives

4:40 angularjsPRO

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.

Using ngModelOptions to Update on Blur

2:56 angularjsPRO

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.

New in Angular 1.3 - Performance Boost with debugInfoEnabled

2:01 angularjsPRO

By default, Angular provides a lot of debug information on the DOM that's only necessary for tools like Protractor and Batarang. Angular 1.3 allows you to turn off the debug information to give your app a simple performance boost.

Localize your AngularJS Application with angular-localization

5:28 angularjsPRO

It is best to start your application's localization efforts early in development, even if you only support one language initially. Libraries like angular-localization help make the process of supporting additional languages much easier.

New in Angular 1.3 - bindToController

4:10 angularjsPRO

If you are using the "controller as" syntax, and you should be using the "controller as" syntax, you will want it to be consistent in your Angular state modules as well as your Angular component directives. With the bindToController property on the directive definition object, this is easy to accomplish.

Using Services in Angular Directives

5:19 angularjsPRO

Directives have dependencies too, and you can use dependency injection to provide services for your directives to use.

Hijacking Existing HTML Attributes with Angular Directives

3:55 angularjsPRO

Angular overrides quite a few existing HTML elements and attributes. This can be a useful technique in our own applications. We will build a directive that adds additional functionality to the src property of an <img>

AngularJS Architecture: Control your promises with $q

6:26 angularjsPRO

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 Architecture: Using $http to load JSON data

7:21 angularjsPRO

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 Architecture: Refactor to a data model

5:53 angularjsPRO

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.

Adding custom methods to angular.module

3:31 angularjsPRO

There are situations where you might want to add additional methods to angular.module. This is easy to accomplish, and can be a handy technique.

Use protractor to catch errors in the console

2:23 angularjsPRO

Protractor gives you access to the console log while it is testing. This functionality could be used to verify that no errors are occurring, or other similar things you might want to test.

AngularJS Architecture: Prefer the 'controller as' syntax

5:02 angularjsPRO

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.

New in Angular 1.3: ngModelOptions allows you to set a timezone on your model.

1:19 angularjsPRO

ngModelOptions in angular allows you to set several handy options of your ngModels, including the timezone for dealing with dates and times.

New in Angular 1.3: ng-model-options getters and setters

3:34 angularjsPRO

With ngModelOptions in Angular 1.3 you can turn your model into a getter/setter function to have greater control over your model.

Automated screenshots of your e2e Protractor tests

7:52 angularjsPRO

It can be useful to capture screenshots of your end-to-end functional tests with protractor. Because protractor tests are "just node", it is very straight forward.

AngularJS Architecture: navigating between states with ui-router

5:00 angularjsPRO

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.