Watch Later

Watch User Created Playlist (78)

This playlist is user created.

pro-course-rss-logo

PRO RSS Feed

New in Angular 1.3 - bindToController

P

Using Services in Angular Directives

Adding custom methods to angular.module

P

AngularJS Architecture: Prefer the 'controller as' syntax

P

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

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

New in Angular 1.3 - $q constructor

P

ui-router: Abstract States

P

CodeSchool Refactor - Reusable Directives Part 1/2

JavaScript Function Scope and $scope

P

Write Your First Directive

Advanced Filtering with the Filter Filter

P

Compile Pre and Post Link

P

Build Your Own ng-controller Directive

P

Create a Scope Decorator

Model Caching

P

Directive with Transcluded Elements

P

Build a Debug Directive

Accessing Services from Console

P

Accessing Scope from The Console

P

$q.all

Testing Controllers With Dependencies

P

ui-router Named Views

P

transformRequest

P

Chained Promises in Angular

P

transformResponse

AngularJS $http service

Testing a Service

P

Unit Testing Directive Scope Binding

P

Introduction to ui-router

angular.copy

ng-repeat-start

Directive Communication

Experimental "Controller as" Syntax

ng-repeat and $index, $event, $log

Injectors

Providers

Route Life Cycle

Directive for Route Handling

resolve $routeChangeError

resolve conventions

Basic Promises in AngularJS

Resolve

redirectTo

$routeParams

$routeProvider api

The config function

ng-view

$templateCache

templateUrl

$scope vs. scope

angular.element

Building Zippy

An Alternative Approach to Controllers

Transclusion Basics

Isolate Scope Review

P

Isolate Scope "&"

Isolate Scope "="

Isolate Scope "@"

Understanding Isolate Scope

Directive to Directive Communication in AngularJS

Directives Talking to Controllers

Useful Behaviors

Basic Behaviors

Directive Restrictions

First Directive

Built-in Filters

ngRepeat and Filtering Data

Unit Testing AngularJS

Filters

Defining a Method on the Scope

Sharing Data Between Controllers

The Dot

Controllers

P

Basic Binding in AngularJS

angularjs tutorial about New in Angular 1.3 - bindToController

New in Angular 1.3 - bindToController

4:10 angularjs PRO

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.

angularjs tutorial about Using Services in Angular Directives

Using Services in Angular Directives

5:19 angularjs

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

angularjs tutorial about Adding custom methods to angular.module

Adding custom methods to angular.module

3:31 angularjs PRO

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.

angularjs tutorial about AngularJS Architecture: Prefer the 'controller as' syntax

AngularJS Architecture: Prefer the 'controller as' syntax

5:02 angularjs PRO

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.

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

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

3:34 angularjs

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

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 New in Angular 1.3 - $q constructor

New in Angular 1.3 - $q constructor

2:52 angularjs PRO

In AngularJS 1.3 there is a nice shorthand for $q.defer(). In fact, it removes the need for calling defer at all!

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 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 JavaScript Function Scope and $scope

JavaScript Function Scope and $scope

6:57 angularjs PRO

How does AngularJS $scope relate to JavaScript function scope?

angularjs tutorial about Write Your First Directive

Write Your First Directive

2:46 angularjs

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.

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

Build Your Own ng-controller Directive

2:20 angularjs PRO

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.

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.

angularjs tutorial about Model Caching

Model Caching

4:34 angularjs PRO

Build a simple caching mechanism for your AngularJS data models.

angularjs tutorial about Directive with Transcluded Elements

Directive with Transcluded Elements

4:46 angularjs PRO

Create a wrapWith directive using advanced transclusion techniques.

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.

Accessing Scope from The Console

1:40 angularjs PRO

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.

$q.all

2:35 angularjs

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.

angularjs tutorial about Testing Controllers With Dependencies

Testing Controllers With Dependencies

3:40 angularjs PRO

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

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.

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.

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.

angularjs tutorial about transformResponse

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.

angularjs tutorial about AngularJS $http service

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

Testing a Service

2:08 angularjs PRO

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

angularjs tutorial about Unit Testing Directive Scope Binding

Unit Testing Directive Scope Binding

2:00 angularjs PRO

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

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.

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.

angularjs tutorial about ng-repeat-start

ng-repeat-start

1:26 angularjs

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

angularjs tutorial about Directive Communication

Directive Communication

4:28 angularjs

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.

angularjs tutorial about Experimental "Controller as" Syntax

Experimental "Controller as" Syntax

5:20 angularjs

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.

angularjs tutorial about ng-repeat and $index, $event, $log

ng-repeat and $index, $event, $log

4:48 angularjs

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

Injectors

2:55 angularjs

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.

angularjs tutorial about Providers

Providers

5:06 angularjs

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.

angularjs tutorial about Route Life Cycle

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.

angularjs tutorial about resolve conventions

resolve conventions

3:23 angularjs

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.

Basic Promises in AngularJS

4:03 angularjs

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.

angularjs tutorial about Resolve

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.

redirectTo

3:45 angularjs

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

$routeParams

2:14 angularjs

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

angularjs tutorial about $routeProvider api

$routeProvider api

1:50 angularjs

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.

angularjs tutorial about The config function

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.

ng-view

3:03 angularjs

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.

$templateCache

3:07 angularjs

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

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.

$scope vs. scope

9:14 angularjs

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.

angularjs tutorial about angular.element

angular.element

8:40 angularjs

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

angularjs tutorial about Building Zippy

Building Zippy

7:55 angularjs

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

An Alternative Approach to Controllers

2:49 angularjs

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()".

angularjs tutorial about Transclusion Basics

Transclusion Basics

2:48 angularjs

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

Isolate Scope Review

3:30 angularjs PRO

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.

angularjs tutorial about Isolate Scope "&"

Isolate Scope "&"

6:03 angularjs

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

Isolate Scope "="

2:51 angularjs

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

Isolate Scope "@"

4:51 angularjs

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.

angularjs tutorial about Understanding Isolate Scope

Understanding Isolate Scope

6:38 angularjs

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.

Directive to Directive Communication in AngularJS

8:01 angularjs

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.

Directives Talking to Controllers

4:43 angularjs

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.

Useful Behaviors

2:55 angularjs

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.

angularjs tutorial about Basic Behaviors

Basic Behaviors

3:29 angularjs

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

angularjs tutorial about Directive Restrictions

Directive Restrictions

3:01 angularjs

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.

angularjs tutorial about First Directive

First Directive

2:08 angularjs

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.

angularjs tutorial about Built-in Filters

Built-in Filters

2:13 angularjs

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.

angularjs tutorial about ngRepeat and Filtering Data

ngRepeat and Filtering Data

5:13 angularjs

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.

angularjs tutorial about Unit Testing AngularJS

Unit Testing AngularJS

5:18 angularjs

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.

Filters

2:19 angularjs

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.

angularjs tutorial about Defining a Method on the Scope

Defining a Method on the Scope

2:16 angularjs

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.

angularjs tutorial about Sharing Data Between Controllers

Sharing Data Between Controllers

5:13 angularjs

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.

angularjs tutorial about The Dot

The Dot

3:02 angularjs

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

Controllers

1:11 angularjs PRO

Controllers are the 'glue' of an AngularJS application. They connect your markup with your data and act as a sort of switchboard.

angularjs tutorial about Basic Binding in AngularJS

Basic Binding in AngularJS

1:27 angularjs

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.

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