AngularJS Training Videos and Tutorials for Developers


AngularJS Data Modeling Series:
React Fundamentals Series:
Introduction to D3 Series:
151. Search Directive with Rails 7:35
pro
AngularJS tutorial about Search Directive with Rails

Create a search directive with AngularJS and Rails. You'll want to take a look at the related Rails TODO API Part 1 and Rails TODO API Part 2. This is not a Rails how-to, so some knowledge there is expected to get up and running.

150. Debugging with Dev Tools 1:59
AngularJS tutorial about Debugging with Dev Tools

D3 debugging is fully supported within Chrome Dev Tools. This is extremely useful!

149. Firebase Basic Authentication Part 2 3:22
pro
AngularJS tutorial about Firebase Basic Authentication Part 2

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.

148. JavaScript Function Scope and $scope 6:57
pro
AngularJS tutorial about JavaScript Function Scope and $scope

How does AngularJS $scope relate to JavaScript function scope?

147. Firebase Basic Authentication Part 1 6:09
pro
AngularJS tutorial about Firebase Basic Authentication Part 1

Firebase has several ways to provide authentication for your AngularJS application. In this lesson, Lukas will look at the most basic email/password approach.

146. Integrating Components with D3 and AngularJS 9:31
AngularJS tutorial about Integrating Components with D3 and AngularJS

Since React is only interested in the V (view) of MVC, it plays well with other toolkits and frameworks. This includes AngularJS and D3.

145. with-addons: ReactLink 2:58
pro
AngularJS tutorial about with-addons: ReactLink

It can be tedious to type out all the boilerplate needed to get the DOM and states in React to synchronize. Luckily, React provides a version of the toolkit with a selection of available addons. This lesson is going to dig into ReactLink, and how this addon can give you two-way binding.

144. First Step: Adding Angular to the HTML Page 2:51
AngularJS tutorial about First Step: Adding Angular to the HTML Page

The first step to any AngularJS project, is actually adding AngularJS to the page. This lesson will show you adding the Angular script, initializing the app with ng-app, and simple two way binding with ng-model. This is a beginner level lesson.

143. Write Your First Directive 2:46
AngularJS tutorial about Write Your First Directive

Write your very first directive! This lesson will show you how to declare a directive, and start using the "link" function to modify the behavior of an HTML element.

142. Precompile JSX 4:10
pro
AngularJS tutorial about Precompile JSX

The JSX Transformer library is not recommended for production use. Instead, you'll probably want to precompile your JSX into JavaScript.

141. JSX Deep Dive 5:50
AngularJS tutorial about JSX Deep Dive

"JSX transforms from an XML-like syntax into native JavaScript. XML elements and attributes are transformed into function calls and objects, respectively."

Dive deep into JSX, what it is, and what it becomes. Be sure to check out Build a JSX Live Compiler.

140. Using $anchorScroll 2:04
pro
AngularJS tutorial about Using $anchorScroll

John clears up the concept of "anchorScroll", the default behavior of scrolling to anchors, and how to override and implement your own custom behavior.

139. Build a JSX Live Compiler 6:30
pro
AngularJS tutorial about Build a JSX Live Compiler

As a tool for future lessons, we want to have the ability to write JSX and see the output live in the browser. In this lesson we will use React to build our own live JSX compiler.

138. Firebase Event Handling 4:25
pro
AngularJS tutorial about Firebase Event Handling

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.

137. Dynamically Generated Components 3:25
pro
AngularJS tutorial about Dynamically Generated Components

React components can be dynamically generated based on a dataset. This lesson will show you how to do just that.

136. Migrate to Express 4 1:58
AngularJS tutorial about Migrate to Express 4

Express 4 is almost ready for release. The previous lessons looked at Express 3, but will use Express 4 going forward. This lesson will explain some of the main breaking changes.

135. Updating Real-Time Data with Firebase Forge 2:53
AngularJS tutorial about Updating Real-Time Data with Firebase Forge

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.

134. Advanced Function Scope 7:06
pro
AngularJS tutorial about Advanced Function Scope

Function scope and closures in JavaScript can be tricky. This lesson builds on the Function Scope Basics video to dive deeper into JS function scope.

133. Select by ID with Mongoose and Express 2:44
pro
AngularJS tutorial about Select by ID with Mongoose and Express

Mongoose allows you to easily select resources by ID from your MongoDB. This is an important aspect to creating an API.

132. Get Started with Firebase and AngularFire 6:10
AngularJS tutorial about Get Started with Firebase and AngularFire

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.

131. Composable Components 5:34
AngularJS tutorial about Composable Components

To make more composable React components, you can define common APIs for similar component types.

130. First API with Node.js, Express and MongoDB 6:44
AngularJS tutorial about First API with Node.js, Express and MongoDB

Learn how to import data into your MongoDB and then use Express to serve a simple Node.js API.

129. Function Scope Basics 5:45
AngularJS tutorial about Function Scope Basics

This or that? Javascript scoping can be confusing. This lesson covers the very basics of function scoping.

127. Mixins 4:26
pro
AngularJS tutorial about Mixins

Mixins will allow you to apply behaviors to multiple React components.

126. Advanced Filtering with the Filter Filter 8:51
pro
AngularJS tutorial about Advanced Filtering with the Filter Filter

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.

125. Component Lifecycle: Updating 4:08
pro
AngularJS tutorial about Component Lifecycle: Updating

The React component lifecycle will allow you to update your components at runtime. This lesson will explore how to do that.

124. Rails Todo API Part 2 8:25
pro
AngularJS tutorial about Rails Todo API Part 2

Expanding on Part 1, this lesson will look at how to bootstrap AngularJS in a rails application as part of the asset pipeline. With Angular available, you'll see how to communicate with the Rails API using $resource.

123. Rails Todo API Part 1 2:49
AngularJS tutorial about Rails Todo API Part 1

Rails makes an excellent choice for delivering data to AngularJS via REST apis. In this first lesson of a two part series, you'll see how to create a simple API for CRUD operations on TODOs using Rails. This isn't an introduction to Rails, and assumes you know the basics. We highly recommend the excellent Rails Tutorial if you'd like an in depth beginners course in Rails.

122. Component Lifecycle: Mounting Usage 2:56
pro
AngularJS tutorial about Component Lifecycle: Mounting Usage

The previous lesson introduced the React component lifecycle mounting and unmounting. In this lesson you will learn some simple uses for these hooks.

121. Component Lifecycle: Mounting Basics 4:16
pro
AngularJS tutorial about Component Lifecycle: Mounting Basics

React components have a lifecycle, and you are able to access specific phases of that lifecycle. This lesson will introduce mounting and unmounting of your React components.

120. Compile Pre and Post Link 1:53
pro
AngularJS tutorial about Compile Pre and Post Link

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.

119. Scatter Plot 2:39
pro
AngularJS tutorial about Scatter Plot

Up until now we've just looked at bar charts. A handy chart, no doubt, but D3 offers a variety of charts you can work with. In this lesson we'll convert the bar chart into a basic scatter (or bubble) chart.

118. Build Your Own ng-controller Directive 2:20
pro
AngularJS tutorial about Build Your Own ng-controller Directive

Have you ever wanted to write your own ng-controller directive? No?! That probably means you're sane. That said, it is an interesting study to lift the lid on the black box, and understand how your tools work on a more intimate level.

117. transferPropsTo 3:30
pro
AngularJS tutorial about transferPropsTo

the transferPropsTo method lets you easily push properties into your components to easily customize attributes.

116. Add Caching to the Model Base Class 6:58
pro
AngularJS tutorial about Add Caching to the Model Base Class

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.

115. Create a Scope Decorator 4:30
AngularJS tutorial about Create a Scope Decorator

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.

114. Accessing Child Properties 1:46
pro
AngularJS tutorial about Accessing Child Properties

When you're building your React components, you'll probably want to access child properties of the markup.

113. Model Caching 4:34
pro
AngularJS tutorial about Model Caching

Build a simple caching mechanism for your AngularJS data models.

112. File Uploads 7:42
AngularJS tutorial about File Uploads

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

111. Directive with Transcluded Elements 4:46
pro
AngularJS tutorial about Directive with Transcluded Elements

Create a wrapWith directive using advanced transclusion techniques.

110. Create a Model Base Class 3:12
pro
AngularJS tutorial about Create a Model Base Class

You're going to test drive the creation of a robust model layer for an AngularJS application. To get started, we need a solid base class to encapsulate common functionality. In this lesson you'll use Javascript's prototypical inheritance to create the model base class.

109. Using Refs to Access Components 4:40
AngularJS tutorial about Using Refs to Access Components

When you are using React components you need to be able to access specific references to individual components. This is done by defining a ref.

108. Build a Debug Directive 4:00
AngularJS tutorial about Build a Debug Directive

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

107. Owner Ownee Relationship 1:42
AngularJS tutorial about Owner Ownee Relationship

The owner-ownee relationship is used to designate a parent-child relationship with React components as it differs from the DOM relationship.

106. State Basics 1:55
AngularJS tutorial about State Basics

State is used for properties on a component that will change, versus static properties that are passed in. This lesson will introduce you to taking input within your React components.

105. Introduction to Properties 2:36
AngularJS tutorial about Introduction to Properties

This lesson will teach you the basics of setting properties in your React components.

104. The Render Method 1:44
AngularJS tutorial about The Render Method

The render method is where the magic happens in your React components. This lesson will introduce you to this method and its use.

103. HTML with ngSanitize and SCE 3:02
pro
AngularJS tutorial about HTML with ngSanitize and SCE

Safely render arbitrary HTML snippets by using ngSanitize and $sce.

102. Hello World - First Component 1:55
AngularJS tutorial about Hello World - First Component

React is a relative new-comer to the Javascript framework scene, but backed by Facebook it is seeing a lot of traction. This is the first lesson in a series of lessons that take a look at the core fundamentals of UI development with React. Hello world.

101. Accessing Services from Console 2:39
pro
AngularJS tutorial about Accessing Services from Console

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.

100. Margins 1:39
AngularJS tutorial about Margins

This lesson will show you how to add margins to your D3 charts to give them the elbow room they deserve.

99. Accessing Scope from The Console 1:40
pro
AngularJS tutorial about Accessing Scope from The Console

The Chrome Dev Tools console is an amazing tool. In this lesson you'll learn how to use the console to programmatically grab scopes in your AngularJS application.

98. Custom Jasmine Matchers 1:30
pro
AngularJS tutorial about Custom Jasmine Matchers

Custom Jasmine Matchers are a great way to keep your AngularJS Unit Tests clean and tidy. We want to make expectations readable and express the intent of the test. Custom matchers help to accomplish this.

97. Using $resource for Data Models 5:29
AngularJS tutorial about Using $resource for Data Models

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.

96. Quantitative Scales 3:59
pro
AngularJS tutorial about Quantitative Scales

In D3 quantitative scales allow you do easily divide aspects of your chart evenly based on the dataset. In this lesson, Ben will continue to show you the variety of scaling options available in D3.

95. Application Wiring: JQuery vs AngularJS 5:08
AngularJS tutorial about Application Wiring: JQuery vs AngularJS

You can build single page applications with JQuery and/or AngularJS. In this lesson, John will look at some of the fundamental differences between the two approaches.

94. Testing With Protractor Page Objects 3:28
pro
AngularJS tutorial about Testing With Protractor Page Objects

Protractor Page Objects are a recommended for testing your AngularJS applications. Page Objects abstract the interaction between the browser and your functional tests, resulting in much cleaner tests.

93. $interval 1:36
pro
AngularJS tutorial about $interval

$interval provides an excellent service for timed operations in your AngularJS apps. It has the advantage over setInterval in "normal" Javascript in that it is aware of Angular's view cycles, as well as being mockable for unit tests. Additionally, it returns a promise and provides a lot of flexibility.

92. Tips & Tricks 7:16
AngularJS tutorial about Tips & Tricks

John Lindquist is a WebStorm wizard. In this lesson, he'll show you some of the tips & tricks he uses to squeeze maximum productivity out of his tool of choice.

91. Inject Jasmine Spies With $provide 1:49
pro
AngularJS tutorial about Inject Jasmine Spies With $provide

One of the beautiful things about dependency injection in your AngularJS apps is the ability to replace dependencies in your unit tests. In this lesson Trevor looks at how to configure Jasmine spies as injectable replacements for dependencies for testing.

90. $q.all 2:35
AngularJS tutorial about $q.all

Orchestrating the handling of multiple promises in AngularJS is simple if you take advantage of $q.all. Using $q.all will take your promises, wait until they have all resolved and return the result of all the promises as an ordered array.

89. Test Simple Binding With Protractor 2:24
pro
AngularJS tutorial about Test Simple Binding With Protractor

Protractor is built to interact with AngularJS applications. In this lesson, we will take a look at how Protractor interacts with the application using its element and finder functions.

88. Color Scales 3:39
pro
AngularJS tutorial about Color Scales

In this addition to Ben's series of lessons on D3, you'll explore the use of color scales in your D3 charts.

87. Accessing Data in HTML 8:05
pro
AngularJS tutorial about Accessing Data in HTML

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

86. Testing Controllers With Dependencies 3:40
pro
AngularJS tutorial about Testing Controllers With Dependencies

In this lesson Trevor looks at testing AngularJS controllers with scope inheritance with Jasmine and test spies.

85. Getting Started With Protractor 3:25
AngularJS tutorial about Getting Started With Protractor

Protractor is an end-to-end testing library for AngularJS. This video lesson will walk through getting Protractor installed and writing your first test.

84. ui-router Named Views 6:38
pro
AngularJS tutorial about ui-router Named Views

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.

83. transformRequest 6:16
pro
AngularJS tutorial about transformRequest

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.

82. rangeBands 5:30
AngularJS tutorial about rangeBands

Expanding on the concepts of dynamic scaling in D3, in this lesson Ben discusses the use of rangeBands to horizontally scale your D3 charts.

81. $provide.decorator 1:41
AngularJS tutorial about $provide.decorator

In this lesson Brett will show you how to use $provide.decorator to cleanly add functionality to AngularJS services and keep your concerns wonderfully separated.

80. Chained Promises 7:07
AngularJS tutorial about Chained Promises

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.

79. transformResponse 4:01
AngularJS tutorial about transformResponse

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.

78. Multitask 1:49
AngularJS tutorial about Multitask

Grunt Multitask allows you to write complex tasks that run multiple targets. In this lesson, John will show you how to use Multitask in your GruntJS builds.

77. External Config 3:51
pro
AngularJS tutorial about External Config

In this lesson John will show you how to create a simple external config file for your GruntJS build.

76. d3.max 3:11
pro
AngularJS tutorial about d3.max

In this lesson Ben shows you how to use d3.max to normalize your dataset visually within the specific bounds of a variable domain.

75. Uglify 1:41
pro
AngularJS tutorial about Uglify

In this lesson John will show you how to start using Grunt Uglify to compress your javascript for production deployment.

74. Scaling Basics 4:21
pro
AngularJS tutorial about Scaling Basics

In this lesson Ben shows you the basics of dynamically scaling your charts in D3. Scaling is a deep concept, so this is the first video in a series that will cover this topic.

73. Design Pattern: Simple Mediator 1:23
pro
AngularJS tutorial about Design Pattern: Simple Mediator

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.

72. $http 4:05
AngularJS tutorial about $http

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

71. Basics of SVG 6:03
pro
AngularJS tutorial about Basics of SVG

In this lesson, Ben guides you through converting your D3 bar chart from HTML elements into SVG.

70. Template 3:45
pro
AngularJS tutorial about Template

GruntJS allows you to use underscore/erb style templates to reduce repetition and create variables. This is commonly used to point at build folders and files within your application's structure.

69. Watch 3:03
pro
AngularJS tutorial about Watch

In this lesson John will show you how to get started with grunt-contrib-watch. Watch is an essential component of any Grunt build, and you will find yourself using it in almost every project.

68. Design Patterns: Mixin 4:50
pro
AngularJS tutorial about Design Patterns: Mixin

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.

67. Introduction to RequireJS 4:48
AngularJS tutorial about Introduction to RequireJS

RequireJS provides a clean way to load and manage dependencies for your Javascript applications. This video examines the first steps towards using RequireJS.

66. Get Started With D3 2:44
AngularJS tutorial about Get Started With D3

This is the first video in a series on D3 from Ben Clinkinbeard. D3 can be... dense, but Ben breaks down the bare essentials and will guide you to D3 mastery.

65. Introduction to Grunt 3:58
AngularJS tutorial about Introduction to Grunt

In this lesson you will install GruntJS and get up and running with your first task, initial configuration, and how to get Grunt methods auto-completing in WebStorm.

64. Testing a Controller 1:12
AngularJS tutorial about Testing a Controller

AngularJS provides helpers for convenient testing of your application. In this lesson you will learn how to test a basic controller with Jasmine and Angular.

63. Testing a Service 2:08
pro
AngularJS tutorial about Testing a Service

Using Jasmine, this lesson will look at testing an AngularJS service.

62. Introduction to Karma 2:45
AngularJS tutorial about Introduction to Karma

A quick tutorial covering installing Karma and running tests from the command line and Webstorm.

61. Speed Testing with WebStorm and Jasmine 1:20
pro
AngularJS tutorial about Speed Testing with WebStorm and Jasmine

In this lesson John shows some tricks for speeding up your test suite. He digs into some handy features of WebStorm, including the ddescriber plugin, as well as some alternative methods for Jasmine for selectively running your tests.

60. Testing Underscores 1:27
AngularJS tutorial about Testing Underscores

AngularJS injectors understand aliased for core injectables such as $rootScope in unit tests. If you surround your injected object with underscores _$rootScope_ it will be understood and injected into your test by Angular. This allows you to use a local alias of the same name.

59. Unit Testing Directive Scope Binding 2:00
pro
AngularJS tutorial about Unit Testing Directive Scope Binding

Digging a little deeper into unit testing an AngularJS directive, this lesson looks at testing binding across multiple scopes.

58. Unit Testing Directive Scope 1:57
AngularJS tutorial about Unit Testing Directive Scope

Unit test your AngularJS directives that make changes to $scope as well as their own isolated scopes.

57. Unit Testing a Directive 2:14
AngularJS tutorial about Unit Testing a Directive

In this lesson you will unit test a simple AngularJS directive

56. Unit Testing "Hello World" 2:26
AngularJS tutorial about Unit Testing "Hello World"

This brief intro to unit testing with AngularJS takes a look at how to configure a test, compile an element, and access AngularJS within your tests.

55. No Custom Markup 1:39
AngularJS tutorial about No Custom Markup

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

54. Using angular.bootstrap to Initialize Your App 1:13
AngularJS tutorial about Using angular.bootstrap to Initialize Your App

In this lesson, John shows you how to use angular.bootstrap as an alternative approach to initializing your application without using ng-app.

53. Introduction to ui-router 4:35
AngularJS tutorial about Introduction to ui-router

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.

52. Introduction to Bower 2:49
AngularJS tutorial about Introduction to Bower

Bower is a package manager for Javascript libraries that allows you to define, version, and retrieve your dependencies. In this tutorial, John gives a quick introduction to Bower and will show you how to get started.

51. angular.copy 3:09
AngularJS tutorial about angular.copy

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.

50. Animating the Angular Way 5:53
AngularJS tutorial about Animating the Angular Way

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.

49. Animating with JavaScript 3:45
AngularJS tutorial about Animating with JavaScript

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

48. animation basics 3:52
AngularJS tutorial about animation basics

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.

47. ng-repeat-start 1:26
AngularJS tutorial about ng-repeat-start

This short video tutorial looks at the ng-repeat-start and ng-repeat-end elements added in AngularJS 1.2

46. ngmin 3:28
AngularJS tutorial about ngmin

ng-min removes the headache of needing to associate strings with parameter names for minified AngularJS code.

45. Directive Communication 4:28
AngularJS tutorial about Directive Communication

In AngularJS, hierarchical directives have the ability to communicate with one another via their defined controllers. With simple syntax/notation you are able to define links between directives and their controllers.

44. Experimental "Controller as" Syntax 5:20
AngularJS tutorial about Experimental "Controller as" Syntax

The "controller as" syntax was added to AngularJS 1.2. This syntax abstracts the use of $scope in controllers, simplifying the syntax of your controllers.

43. ng-repeat and $index, $event, $log 4:48
AngularJS tutorial about ng-repeat and $index, $event, $log

$index and $event are handy shortcuts that allow you to access useful information directly in your views. $log facilitates configurable logging without using console.log directly.

42. Components and Containers 4:27
AngularJS tutorial about Components and Containers

This lesson describes fundamentals for creating custom directives (broken down into Components and Containers). The component demonstrates how to use the service template to create a simple clock directive whereby AngularJS will bind with objects in the template property and access element attributes. The component example will provide a demonstration of how you can nest components and containers, taking advantage of AngularJS transclusion capabilities.

41. Injectors 2:55
AngularJS tutorial about Injectors

Injectors inject your dependencies in your AngularJS application. For the most part it will automatically work when constructing objects (controllers) and provide the dependencies defined with your service/factory/provider, it can also be injected itself and be used for invoking methods with injection.

40. Providers 5:06
AngularJS tutorial about Providers

This lesson describes what is really happening when you use the angular
factory and how you can make your factories even more dynamic in creation.
This gets further into the internals of AngularJS by showing you how a factory is built dynamically for you and how they have reduced the plumbing you need to make applications.

39. Route Life Cycle 4:24
AngularJS tutorial about Route Life Cycle

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.

38. Directive for Route Handling 3:02
AngularJS tutorial about Directive for Route Handling

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

37. resolve $routeChangeError 5:09
AngularJS tutorial about resolve $routeChangeError

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

36. resolve conventions 3:23
AngularJS tutorial about resolve conventions

This video shows a more generalized way of using the AngularJS resolve feature with controllers to organize the conditions before the controller is instantiated. The video shows how to condition the controller's instantiation on more than one set of actions (function), and even pass values from the condition processing into the controller's scope once it gets instantiated.

35. Resolve 2:05
AngularJS tutorial about Resolve

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.

34. Promises 4:03
AngularJS tutorial about Promises

An AngularJS promise is a mechanism that lets you defer a stated action or series of actions at an earlier point of time until you explicitly declare that promise to be fulfilled (or resolved). Promises are useful for asynchronous operations. This video introduces the basic way to declare and resolve promises.

33. redirectTo 3:45
AngularJS tutorial about redirectTo

In AngularJS redirectTo is often assigned a simple static string and thus points invariably to one location (redirectTo: '/mypath'). You can customize this, by setting redirectTo as a function, which arguments are the route params. For instance, if you hit the route "/pizza/peperoni", you can compose your redirection to be "/pizzas", or whatever suits your needs

32. $routeParams 2:14
AngularJS tutorial about $routeParams

John continues to dive into routing in AngularJS using ng-view. He provides some simple examples for passing in path parameters using $routeParams.

31. $routeProvider api 1:50
AngularJS tutorial about $routeProvider api

AngularJS's $routeProvider has a very basic api for defining your application's routes. $routeProvider.when() is used to match a url pattern to a view while $routeProvider.otherwise() is used to render a view when there is no match to a url pattern.

30. The config function 2:55
AngularJS tutorial about The config function

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.

29. ng-view 3:03
AngularJS tutorial about ng-view

AngularJS's ngView is a directive that complements the $route service by including the rendered template of the current route into the main layout (typically the index.html) file. Every time the current route changes, the included view changes with it according to the configuration of the $route service.

28. $templateCache 3:07
AngularJS tutorial about $templateCache

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

27. templateUrl 3:45
AngularJS tutorial about templateUrl

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.

26. $scope vs. scope 9:14
AngularJS tutorial about $scope vs. scope

This episode is explaining the naming conventions behind for the arguments passed to the factory functions for controllers, directives, linking functions, etc., its implications in regard to Angular’s dependency injection, minification side effects on arguments, and how to prevent them.

25. angular.element 8:40
AngularJS tutorial about angular.element

A brief overview of using element in an AngularJS directive, and how to target one without jquery, and also how to use replace and compile function

24. Building Zippy 7:55
AngularJS tutorial about Building Zippy

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

23. Thinking Differently About Organization 4:22
AngularJS tutorial about Thinking Differently About Organization

Demonstrates an “outside the box” approach to organizing controllers and directives by collecting them into objects and them passing those object to AngularJS.

22. An Alternative Approach to Controllers 2:49
AngularJS tutorial about An Alternative Approach to Controllers

AngularJS makes your HTML very declarative. However, seeing the functions invoked in your HTML may not offer any clues as to what controller defines said functions. This video offers an approach to solving this problem by returning the controller in the controller definition so that we can opt for something like ng-click="SomeCtrl.doesSomething()" instead of simply writing ng-click="doesSomething()".

21. Transclusion Basics 2:48
AngularJS tutorial about Transclusion Basics

Uh oh. Transclusion? What the heck? It's a big word, but it is actually a very simple concept. In this episode John shows you how transclusion is used in your AngularJS directives...

20. Isolate Scope Review 3:30
AngularJS tutorial about Isolate Scope Review

A review of the three types of isolate scope binding methods in AngularJS. The "@" operator is used for reading an attribute, "=" is used for creating a bi-directional two way binding, and "&" is used to make a call on something a controller scope.

19. Isolate Scope "&" 6:03
AngularJS tutorial about Isolate Scope "&"

The "&" in your isolated scopes within your AngularJS application will allow you to invoke a method within the scope that your directive lives in.

18. Isolate Scope "=" 2:51
AngularJS tutorial about Isolate Scope "="

Perhaps the most useful of the isolate scope binding methods, this episode talks about the use of "=" for two way binding within your directives.

17. Isolate Scope "@" 4:51
AngularJS tutorial about Isolate Scope "@"

AngularJS isolate scopes can be a bit cryptic when you are first starting out. In this lesson, John looks at the attribute or "@" designator in your isolate scopes.

16. Understanding Isolate Scope 6:38
AngularJS tutorial about Understanding Isolate Scope

By adding an isolated scope object to your AngularJS directive you can insure that each element using that directive has its own scope. This prevents it from affecting sibling directives and encapsulates the directive.

15. Directive to Directive Communication 8:01
AngularJS tutorial about Directive to Directive Communication

In Angular JS, you can use one directive as an element and other directives as attributes to the element, allowing you to specify different functionality for elements based on the attributes in the element. This lesson shows you how to take a group of directive elements and give them each unique functionality based on their directive attributes.

14. Directives Talking to Controllers 4:43
AngularJS tutorial about Directives Talking to Controllers

Often in AngularJS we want to share information between controllers and directives. One way to do this is by passing the scope, but this makes the directive reliant on the scope having the methods you want to run. This lesson shows you a cleaner way that you can pass methods to the directive using an attribute and decouple controllers from directives. This in turn makes your directives more generic/reusable.

13. Useful Behaviors 2:55
AngularJS tutorial about Useful Behaviors

When you define a directive you get access to the attrs object by declaring it as a dependency in the link function. The attrs object will contain the normalized attributes and their corresponding values declared on the element which contains the directive in the html. So if you set a value on your directive attribute (myDirective="value"), you can access this value in your directive configuration by accessing attrs.myDirective, as this contains the value set in the html for myDirective.

12. Basic Behaviors 3:29
AngularJS tutorial about Basic Behaviors

Bring your directives to life with custom behaviours. This is the recommended way of interacting with the DOM in AngularJS. If you find yourself modifying the DOM inside of your controllers (bad), directive behaviours are your solution (awesome).

11. Directive Restrictions 3:01
AngularJS tutorial about Directive Restrictions

By default AngularJS directives can be used with elements, attributes, classes, and comments. Many times we want to restrict it to one or more of those to control how a directive will be used. This lesson digs into how and why to use Directive restrictions.

10. First Directive 2:08
AngularJS tutorial about First Directive

Directives might just be the killer feature of AngularJS. Directives allow us to extend the grammar of the web through reusable HTML elements, attributes, and classes.

9. Built-in Filters 2:13
AngularJS tutorial about Built-in Filters

AngularJS comes with several handy filters that you can use out of the box. These filters can be combined to create more complex filtered results.

8. ngRepeat and Filtering Data 5:13
AngularJS tutorial about ngRepeat and Filtering Data

When working with sets of data, it is common to need to repeat the same UI element over and over again with values from each object in the set. ngRepeat provides an elegant and simple way to accomplish this within your HTML. We will also provide a filter to a repeater that gives us basic search functionality.

7. Testing Overview 5:18
AngularJS tutorial about Testing Overview

Testing is a first class citizen in AngularJS. It is at its heart and soul. This lesson demonstrates using Karma to write a simple unit test for a Filter.

6. Filters 2:19
AngularJS tutorial about Filters

Many times while building an AngularJS application you'll need to manipulate data, and it doesn't make sense to do it with a Controller method. Luckily you have Filters, which are particularly well suited for manipulating text within your HTML views. This handy tool uses a simple syntax to create highly reusable functionality for your apps.

5. Defining a Method on the Scope 2:16
AngularJS tutorial about Defining a Method on the Scope

Armed with Controllers and service factories, you'll probably want to do some work on the data to give your app behaviors. In this video we will look at providing that behavior by defining a method on the scope. This method will be bound within the HTML and update live as input changes.

4. Sharing Data Between Controllers 3:19
AngularJS tutorial about Sharing Data Between Controllers

If AngularJS Controllers are the glue of an application, how do they communicate and pass data around? This introduction to service factories will shed some light on that question.

3. The Dot 3:02
AngularJS tutorial about The Dot

This brief video examines the importance of a single . within your AngularJS application. It uncovers a potential gotcha when it comes to inheritence.

2. Controllers 2:13
AngularJS tutorial about Controllers

Controllers are the 'glue' of an AngularJS application. They connect your markup with your data and act as a sort of switchboard. This video is going to take a look at Controllers and introduce the $scope, building on the Binding video.

1. Binding 2:53
AngularJS tutorial about Binding

Binding is a core feature of AngularJS. It provides a simple mechanism for integrating your HTML with your data via {{bracketed expressions}}. In this video, John covers the basics of binding to get you started.

151. AngularJS - Search Directive with Rails 7:35
pro
edit
150. D3 - Debugging with Dev Tools 1:59
edit
149. AngularJS - Firebase Basic Authentication Part 2 3:22
pro
edit
148. AngularJS - JavaScript Function Scope and $scope 6:57
pro
edit
147. AngularJS - Firebase Basic Authentication Part 1 6:09
pro
edit
146. React - Integrating Components with D3 and AngularJS 9:31
edit
145. React - with-addons: ReactLink 2:58
pro
edit
144. AngularJS - First Step: Adding Angular to the HTML Page 2:51
edit
143. AngularJS - Write Your First Directive 2:46
edit
142. React - Precompile JSX 4:10
pro
edit
141. React - JSX Deep Dive 5:50
edit
140. AngularJS - Using $anchorScroll 2:04
pro
edit
139. React - Build a JSX Live Compiler 6:30
pro
edit
138. AngularJS - Firebase Event Handling 4:25
pro
edit
137. React - Dynamically Generated Components 3:25
pro
edit
136. NodeJS - Migrate to Express 4 1:58
edit
135. AngularJS - Updating Real-Time Data with Firebase Forge 2:53
edit
134. Core JavaScript - Advanced Function Scope 7:06
pro
edit
133. NodeJS - Select by ID with Mongoose and Express 2:44
pro
edit
132. AngularJS - Get Started with Firebase and AngularFire 6:10
edit
131. React - Composable Components 5:34
edit
130. NodeJS - First API with Node.js, Express and MongoDB 6:44
edit
129. Core JavaScript - Function Scope Basics 5:45
edit
127. React - Mixins 4:26
pro
edit
126. AngularJS - Advanced Filtering with the Filter Filter 8:51
pro
edit
125. React - Component Lifecycle: Updating 4:08
pro
edit
124. AngularJS - Rails Todo API Part 2 8:25
pro
edit
123. AngularJS - Rails Todo API Part 1 2:49
edit
122. React - Component Lifecycle: Mounting Usage 2:56
pro
edit
121. React - Component Lifecycle: Mounting Basics 4:16
pro
edit
120. AngularJS - Compile Pre and Post Link 1:53
pro
edit
119. D3 - Scatter Plot 2:39
pro
edit
118. AngularJS - Build Your Own ng-controller Directive 2:20
pro
edit
117. React - transferPropsTo 3:30
pro
edit
116. AngularJS - Add Caching to the Model Base Class 6:58
pro
edit
115. AngularJS - Create a Scope Decorator 4:30
edit
114. React - Accessing Child Properties 1:46
pro
edit
113. AngularJS - Model Caching 4:34
pro
edit
112. AngularJS - File Uploads 7:42
edit
111. AngularJS - Directive with Transcluded Elements 4:46
pro
edit
110. AngularJS - Create a Model Base Class 3:12
pro
edit
109. React - Using Refs to Access Components 4:40
edit
108. AngularJS - Build a Debug Directive 4:00
edit
107. React - Owner Ownee Relationship 1:42
edit
106. React - State Basics 1:55
edit
105. React - Introduction to Properties 2:36
edit
104. React - The Render Method 1:44
edit
103. AngularJS - HTML with ngSanitize and SCE 3:02
pro
edit
102. React - Hello World - First Component 1:55
edit
101. AngularJS - Accessing Services from Console 2:39
pro
edit
100. D3 - Margins 1:39
edit
99. AngularJS - Accessing Scope from The Console 1:40
pro
edit
98. AngularJS - Custom Jasmine Matchers 1:30
pro
edit
97. AngularJS - Using $resource for Data Models 5:29
edit
96. D3 - Quantitative Scales 3:59
pro
edit
95. AngularJS - Application Wiring: JQuery vs AngularJS 5:08
edit
94. AngularJS - Testing With Protractor Page Objects 3:28
pro
edit
93. AngularJS - $interval 1:36
pro
edit
92. WebStorm - Tips & Tricks 7:16
edit
91. AngularJS - Inject Jasmine Spies With $provide 1:49
pro
edit
90. AngularJS - $q.all 2:35
edit
89. AngularJS - Test Simple Binding With Protractor 2:24
pro
edit
88. D3 - Color Scales 3:39
pro
edit
87. AngularJS - Accessing Data in HTML 8:05
pro
edit
86. AngularJS - Testing Controllers With Dependencies 3:40
pro
edit
85. AngularJS - Getting Started With Protractor 3:25
edit
84. AngularJS - ui-router Named Views 6:38
pro
edit
83. AngularJS - transformRequest 6:16
pro
edit
82. D3 - rangeBands 5:30
edit
81. AngularJS - $provide.decorator 1:41
edit
80. AngularJS - Chained Promises 7:07
edit
79. AngularJS - transformResponse 4:01
edit
78. GruntJS - Multitask 1:49
edit
77. GruntJS - External Config 3:51
pro
edit
76. D3 - d3.max 3:11
pro
edit
75. GruntJS - Uglify 1:41
pro
edit
74. D3 - Scaling Basics 4:21
pro
edit
73. AngularJS - Design Pattern: Simple Mediator 1:23
pro
edit
72. AngularJS - $http 4:05
edit
71. D3 - Basics of SVG 6:03
pro
edit
70. GruntJS - Template 3:45
pro
edit
69. GruntJS - Watch 3:03
pro
edit
68. AngularJS - Design Patterns: Mixin 4:50
pro
edit
67. RequireJS - Introduction to RequireJS 4:48
edit
66. D3 - Get Started With D3 2:44
edit
65. GruntJS - Introduction to Grunt 3:58
edit
64. AngularJS - Testing a Controller 1:12
edit
63. AngularJS - Testing a Service 2:08
pro
edit
62. Unit Testing - Introduction to Karma 2:45
edit
61. AngularJS - Speed Testing with WebStorm and Jasmine 1:20
pro
edit
60. AngularJS - Testing Underscores 1:27
edit
59. AngularJS - Unit Testing Directive Scope Binding 2:00
pro
edit
58. AngularJS - Unit Testing Directive Scope 1:57
edit
57. AngularJS - Unit Testing a Directive 2:14
edit
56. AngularJS - Unit Testing "Hello World" 2:26
edit
55. AngularJS - No Custom Markup 1:39
edit
54. AngularJS - Using angular.bootstrap to Initialize Your App 1:13
edit
53. AngularJS - Introduction to ui-router 4:35
edit
52. Bower - Introduction to Bower 2:49
edit
51. AngularJS - angular.copy 3:09
edit
50. AngularJS - Animating the Angular Way 5:53
edit
49. AngularJS - Animating with JavaScript 3:45
edit
48. AngularJS - animation basics 3:52
edit
47. AngularJS - ng-repeat-start 1:26
edit
46. AngularJS - ngmin 3:28
edit
45. AngularJS - Directive Communication 4:28
edit
44. AngularJS - Experimental "Controller as" Syntax 5:20
edit
43. AngularJS - ng-repeat and $index, $event, $log 4:48
edit
42. AngularJS - Components and Containers 4:27
edit
41. AngularJS - Injectors 2:55
edit
40. AngularJS - Providers 5:06
edit
39. AngularJS - Route Life Cycle 4:24
edit
38. AngularJS - Directive for Route Handling 3:02
edit
37. AngularJS - resolve $routeChangeError 5:09
edit
36. AngularJS - resolve conventions 3:23
edit
35. AngularJS - Resolve 2:05
edit
34. AngularJS - Promises 4:03
edit
33. AngularJS - redirectTo 3:45
edit
32. AngularJS - $routeParams 2:14
edit
31. AngularJS - $routeProvider api 1:50
edit
30. AngularJS - The config function 2:55
edit
29. AngularJS - ng-view 3:03
edit
28. AngularJS - $templateCache 3:07
edit
27. AngularJS - templateUrl 3:45
edit
26. AngularJS - $scope vs. scope 9:14
edit
25. AngularJS - angular.element 8:40
edit
24. AngularJS - Building Zippy 7:55
edit
23. AngularJS - Thinking Differently About Organization 4:22
edit
22. AngularJS - An Alternative Approach to Controllers 2:49
edit
21. AngularJS - Transclusion Basics 2:48
edit
20. AngularJS - Isolate Scope Review 3:30
edit
19. AngularJS - Isolate Scope "&" 6:03
edit
18. AngularJS - Isolate Scope "=" 2:51
edit
17. AngularJS - Isolate Scope "@" 4:51
edit
16. AngularJS - Understanding Isolate Scope 6:38
edit
15. AngularJS - Directive to Directive Communication 8:01
edit
14. AngularJS - Directives Talking to Controllers 4:43
edit
13. AngularJS - Useful Behaviors 2:55
edit
12. AngularJS - Basic Behaviors 3:29
edit
11. AngularJS - Directive Restrictions 3:01
edit
10. AngularJS - First Directive 2:08
edit
9. AngularJS - Built-in Filters 2:13
edit
8. AngularJS - ngRepeat and Filtering Data 5:13
edit
7. AngularJS - Testing Overview 5:18
edit
6. AngularJS - Filters 2:19
edit
5. AngularJS - Defining a Method on the Scope 2:16
edit
4. AngularJS - Sharing Data Between Controllers 3:19
edit
3. AngularJS - The Dot 3:02
edit
2. AngularJS - Controllers 2:13
edit
1. AngularJS - Binding 2:53
edit