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

P

templateUrl

P

$templateCache

P

The config function

P

Resolve

P

Route Life Cycle

P

Directive for Route Handling

P

resolve $routeChangeError

P

animation basics

P

Animating with JavaScript

P

Animating the Angular Way

P

angular.copy

P

No Custom Markup

P

Design Patterns: Mixin

P

AngularJS $http service

P

Design Pattern: Simple Mediator

P

transformResponse

P

Chained Promises in Angular

P

transformRequest

P

Accessing Data in HTML

P

Using $resource for Data Models

Build a Debug Directive

P

Accessing Services from Console

P

File Uploads

P

Model Caching

P

Compile Pre and Post Link

P

Add Caching to the Model Base Class

P

Create a Scope Decorator

P

Advanced Filtering with the Filter Filter

P

Get Started with Firebase and AngularFire

P

Updating Real-Time Data with Firebase Forge

P

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

P

CodeSchool Refactor - Reusable Directives Part 1/2

P

CodeSchool Refactor - Flexible Directives Part 2/2

P

$apply vs $digest

P

Using the Angular scope $destroy event and method.

P

The basics of $scope.$watch

P
angularjs tutorial about Building Zippy

Building Zippy

7:55 angularjs PRO

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

templateUrl

3:45 angularjs PRO

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 PRO

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

angularjs tutorial about The config function

The config function

2:55 angularjs PRO

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.

angularjs tutorial about Resolve

Resolve

2:05 angularjs PRO

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.

angularjs tutorial about Route Life Cycle

Route Life Cycle

4:24 angularjs PRO

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 PRO

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

resolve $routeChangeError

5:09 angularjs PRO

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

angularjs tutorial about animation basics

animation basics

3:52 angularjs PRO

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.

angularjs tutorial about Animating with JavaScript

Animating with JavaScript

3:45 angularjs PRO

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

angularjs tutorial about Animating the Angular Way

Animating the Angular Way

5:53 angularjs PRO

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 PRO

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 PRO

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 tutorial about AngularJS $http service

AngularJS $http service

4:05 angularjs PRO

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.

angularjs tutorial about transformResponse

transformResponse

4:01 angularjs PRO

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.

angularjs tutorial about Chained Promises in Angular

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

angularjs tutorial about Using $resource for Data Models

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 PRO

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 PRO

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

angularjs tutorial about Model Caching

Model Caching

4:34 angularjs PRO

Build a simple caching mechanism for your AngularJS data models.

angularjs tutorial about Compile Pre and Post Link

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.

angularjs tutorial about Add Caching to the Model Base Class

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 PRO

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 PRO

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 PRO

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 PRO

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 PRO

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 PRO

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 PRO

$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 PRO

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?