AngularJS Noob to Master: the intermediate playlist

Got the basics down? Here's a playlist the builds on top of those AngularJS basics

Watch User Created Playlist (42)

This playlist is user created.

pro-course-rss-logo

PRO RSS Feed

Building Zippy

templateUrl

$templateCache

The config function

Resolve

Route Life Cycle

Directive for Route Handling

resolve $routeChangeError

animation basics

Animating with JavaScript

Animating the Angular Way

angular.copy

No Custom Markup

Design Patterns: Mixin

P

AngularJS $http service

Design Pattern: Simple Mediator

P

transformResponse

Chained Promises in Angular

P

transformRequest

P

Accessing Data in HTML

P

Using $resource for Data Models

Build a Debug Directive

Accessing Services from Console

P

File Uploads

Model Caching

P

Compile Pre and Post Link

P

Add Caching to the Model Base Class

P

Create a Scope Decorator

Advanced Filtering with the Filter Filter

P

Get Started with Firebase and AngularFire

Updating Real-Time Data with Firebase Forge

Firebase Event Handling

P

Firebase Basic Authentication Part 1

P

Firebase Basic Authentication Part 2

P

Mixing in Validatable

P

Validations Class

P

Errorable Mixin

CodeSchool Refactor - Reusable Directives Part 1/2

CodeSchool Refactor - Flexible Directives Part 2/2

$apply vs $digest

Using the Angular scope $destroy event and method.

P

The basics of $scope.$watch

Building Zippy

7:55 angularjs

Building a demo AngularJS directive named Zippy using ng-model, ng-click and transclusion (no controller)

templateUrl

3:45 angularjs

If you want to keep your template code in a separate html file, you can use the templateUrl property to tell Angular where to find it.

$templateCache

3:07 angularjs

An alternative to inject an AngularJS template by using $templateCache, using .get() and .put() methods

The config function

2:55 angularjs

This episode explains the config phase of an AngularJS application and how is it special in regards to $routeProvider (routing configuration) and providers in general.

Resolve

2:05 angularjs

This video shows how the AngularJS 'resolve' feature can be used during the config phase before your controller has been instantiated. This gives you the opportunity to ensure everything has been setup properly that your controller depends on, thus allowing your controller to execute safely based on its assumptions.

Route Life Cycle

4:24 angularjs

In this lesson the the route life cycle, John steps through the AngularJS Route life cycle using the routeChangeStart and routeChangeSuccess events. By inspecting the current and previous objects, we can see Angular's awareness of the previous route and controller as well as the current or targeted route and controller. Through the use of the resolve property, the routeChangeSuccess event will be delayed until the promise has been completed.

Directive for Route Handling

3:02 angularjs

Use AngularJS $rootScope within a directive to detect route change errors and display it to the user.

resolve $routeChangeError

5:09 angularjs

We can intercept a route change error and direct the user to an appropriate page.

animation basics

3:52 angularjs

Angular 1.2 introduces new animation functionality. This episode looks at the very basics of getting the animation module loaded and using it to create your first simple animation with CSS.

Animating with JavaScript

3:45 angularjs

In this lesson John looks at how to integrate the popular TweenMax library with ngAnimate to get animation effects in an AngularJS application.

Animating the Angular Way

5:53 angularjs

In this episode John uses TweenMax to add animations to AngularJS. Instead of manipulating DOM directly in a controller, we will use an AngularJS directive to abstract that view logic cleanly using $animate.

angular.copy

3:09 angularjs

In this episode John takes a look at angular.copy and how you can use it for non-destructive form editing. Instead of binding to a value directly, we make a deep copy of that object and bind to the copy for presentation. Updates to the data are then "saved" to the original object to persist changes.

No Custom Markup

1:39 angularjs

Extending the semantics of HTML is one of the core features of AngularJS, however, you can use AngularJS without any custom markup.

Design Patterns: Mixin

4:50 angularjs PRO

AngularJS supports "mixins" with angular.extend, but this approach has some drawbacks. In this video Brett takes a look at a more robust approach to mixins inspired by the Ruby programming language.

AngularJS $http service

4:05 angularjs

In this lesson, John covers the use of AngularJS's $http service for making requests and handling responses from external web services

Design Pattern: Simple Mediator

1:23 angularjs PRO

In this video Brett shows us how to create a simple mediator for cleanly separating concerns within your application. This is the first in a series that will build a robust, fully tested mediator for events in your AngularJS application.

transformResponse

4:01 angularjs

In his debut lesson, Trevor test drives the transformation of a response from an external REST service using the the transformResponse option of AngularJS's $http service.

Chained Promises in Angular

7:07 angularjs PRO

Promises are a fantastic tool in AngularJS. Many times, as you start to chain them together, they become ugly and unwieldy. In this lesson, Thomas will show you an approach for breaking your chained promises down into a flat, clean, readable structure.

transformRequest

6:16 angularjs PRO

In this lesson Trevor will show you how to transform your requests using AngularJS's $http service's transformRequest option and TDD. This allows you to keep your applications domain clean when integrating with third party APIs.

Accessing Data in HTML

8:05 angularjs PRO

In this lesson, John will take you from bad practices to good practices, as he explores how to bring data into your HTML templates with AngularJS. You'll go from attaching data directly to the $rootScope in your Angular module run block (bad!) all the way through using promises to asynchronously assign data to your controller and access it with "controller-as" syntax (much better!).

Using $resource for Data Models

5:29 angularjs

AngularJS's $resource service allows you to create convenience methods for dealing with typical RESTful APIs. In this video, Brett will show you the basics of using $resource, as well as talking about some of the drawbacks with using this service for your data models.

Build a Debug Directive

4:00 angularjs

Explore some interesting techniques with AngularJS directives to create a debug directive using termination, priority, and the $compile service.

Accessing Services from Console

2:39 angularjs PRO

Using the Chrome console, you can access your AngularJS injectable services. This is down and dirty debugging, and can be a lifesaver in troubling times.

File Uploads

7:42 angularjs

The file input type is missing from the ng-model directive, so you need to "roll your own" solution for file uploads with AngularJS.

Model Caching

4:34 angularjs PRO

Build a simple caching mechanism for your AngularJS data models.

Compile Pre and Post Link

1:53 angularjs PRO

The typical function you use when creating a directive is the post link function with the signature function (scope, element, attributes) {}. You can also make use of the pre link function for finer grained control of the initialization of your directive.

Add Caching to the Model Base Class

6:58 angularjs PRO

In the previous lessons we created a base class and looked at a caching mechanism for our models. In this lesson we will expand on that concept by test driving the addition of caching to our model base class, as well as some initial core functionality. This is advanced subject matter, and will require study of the code as well as watching the video.

Create a Scope Decorator

4:30 angularjs

Using Aspect Oriented Programming (AOP) techniques, you can easily decorate AngularJS controller methods to add additional behaviors. This can be useful for handling analytics and other common concerns in a typical application.

Advanced Filtering with the Filter Filter

8:51 angularjs PRO

We've all seen the Filter Filter demos/tutorials. You probably aren't harnessing its full potential. This lesson will dive deep into the Filter Filter, and how we can use it more effectively.

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.

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 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 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 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 Mixing in Validatable

Mixing in Validatable

12:07 angularjs PRO

Now that the validation component has progressed, we can start mixing it in for usage.

This video is a part of a series, you'll want to watch the earlier lessons before this one.

angularjs tutorial about Validations Class

Validations Class

2:16 angularjs PRO

Now we bring the validations together with a Validations class.

angularjs tutorial about Errorable Mixin

Errorable Mixin

11:08 angularjs

Now that we have validations, we will want to be able to provide the user feedback on the errors in models. This is useful for forms, and is a critical part of the validation process.

This lesson is part of a series!

angularjs tutorial about CodeSchool Refactor - Reusable Directives Part 1/2

CodeSchool Refactor - Reusable Directives Part 1/2

5:47 angularjs

In collaboration with CodeSchool, John refactors pieces of the CodeSchool Angular app into a more reusable directives.

angularjs tutorial about CodeSchool Refactor - Flexible Directives Part 2/2

CodeSchool Refactor - Flexible Directives Part 2/2

14:25 angularjs

In collaboration with CodeSchool, John takes the reusable directives from the previous video and works them into more flexible and easy to use directives.

angularjs tutorial about $apply vs $digest

$apply vs $digest

2:25 angularjs

$apply and $digest are both methods on AngularJS scopes that allow you to manually trigger the updates to bound properties on your scopes.

angularjs tutorial about Using the Angular scope $destroy event and method.

Using the Angular scope $destroy event and method.

4:25 angularjs PRO

With Angular scopes, you have access to a $destroy event that can be used to watch $scope events. This is used for cleanup, and gives you a final opportunity to access any data on a scope. Scopes also have a (rarely used) $destroy method that allows you to manually destroy a scope.

angularjs tutorial about The basics of $scope.$watch

The basics of $scope.$watch

6:32 angularjs

With AngularJS's $scope.$watch, you are able to monitor scope values for changes. This can be useful for validation of user input, as an example.

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