Angular Features

Watch User Created Playlist (81)

This playlist is user created.

pro-course-rss-logo

PRO RSS Feed

New in Angular 1.3 - Stateless Filters

P

Components and Containers

Injectors

New in Angular 1.3 - $scope.$watchGroup

AngularJS $http service

New in Angular 1.3 - Bind Once

P

New in Angular 1.3 - $q constructor

P

New in Angular 1.3: ng-model-options updateOn and debounce

P

New in Angular 1.3: Updates to forms

P

Using Angular's ngClass

P

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

Using Services in Angular Directives

Using ngModelOptions to Update on Blur

Using ng-messages with ng-animate

P

ui-router: Abstract States

P

Consistency between ui-router states and Angular directives

P

caching with $http

P

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

P

Catching errors with $exceptionHandler

$apply vs $digest

The basics of $scope.$watch

Reusing and Overriding ng-messages

AngularJS $cacheFactory service

P

Finishing Validatable

P

CodeSchool Refactor - Flexible Directives Part 2/2

ngModelController render function

P

Validations Class

P

Stateful filters with promises in AngularJS

Mixing in Validatable

P

When should I use ng-show or ng-if

Accessing Scope from The Console

P

Using $resource for Data Models

Accessing Services from Console

P

HTML with ngSanitize and SCE

P

File Uploads

Build a Debug Directive

Directive with Transcluded Elements

P

Errorable Mixin

Model Caching

P

Create a Scope Decorator

Build Your Own ng-controller Directive

P

transformRequest

P

Using $anchorScroll

P

Accessing Data in HTML

P

$q.all

transformResponse

Route Life Cycle

Write Your First Directive

Adding Child Validators

P

Using ngModel in Custom Directives

Extract predicate methods into filters for ng-if and ng-show

New in Angular 1.3 - bindToController

P

New in Angular 1.3 - Performance Boost with debugInfoEnabled

P

New in Angular 1.4 - New bindToController Syntax

P

ui-router: Activating States

CodeSchool Refactor - Reusable Directives Part 1/2

Providers

Directive for Route Handling

resolve $routeChangeError

Resolve

resolve conventions

redirectTo

$routeParams

$routeProvider api

ng-view

$templateCache

$scope vs. scope

templateUrl

angular.element

Transclusion Basics

Directive to Directive Communication in AngularJS

Useful Behaviors

Basic Behaviors

Directive Restrictions

First Directive

Built-in Filters

ngRepeat and Filtering Data

Filters

The Dot

Controllers

P

Basic Binding in AngularJS

angularjs tutorial about New in Angular 1.3 - Stateless Filters

New in Angular 1.3 - Stateless Filters

3:50 angularjs PRO

Filters in AngularJS can be a big performance hog. As of Angular 1.3, filters are "stateless" by default. This means that given the same input, a filter will not even run, and simply return the previous value.

Components and Containers

4:27 angularjs

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.

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 New in Angular 1.3 - $scope.$watchGroup

New in Angular 1.3 - $scope.$watchGroup

2:42 angularjs

With Angular 1.3 you now have access to $scope.$watchGroup. This allows you to monitor an array of expressions for change. This is useful when you want to perform the some logic when any item in a group changes.

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

angularjs tutorial about New in Angular 1.3 - Bind Once

New in Angular 1.3 - Bind Once

5:33 angularjs PRO

AngularJS's two-way binding is one of the "killer features" of the framework. The problem is that too many bindings can cause performance issues! Many times, all you need to do is bind a single time to get the data to display, and don't need dynamic two-way binding. In Angular 1.3, they've added new syntax to enable one-time data bindings.

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 New in Angular 1.3: ng-model-options updateOn and debounce

New in Angular 1.3: ng-model-options updateOn and debounce

3:35 angularjs PRO

Now in Angular 1.3 you can cause updates to your ngModels to only occur for a given even (blur, focus, click, etc);

Debouncing means that only 1 action will be registered within a specific time. This is handy for text inputs, where an action triggers a process (such as asynchronous search). ngModelOptions allows you to debounce your ngModel inputs in AngularJS apps.

angularjs tutorial about New in Angular 1.3: Updates to forms

New in Angular 1.3: Updates to forms

1:06 angularjs PRO

With the release of AngularJS 1.3, we get some handy additions to forms, including a submitted state and the ability to bind input field names to an expression.

angularjs tutorial about Using Angular's ngClass

Using Angular's ngClass

3:07 angularjs PRO

Using Angular's ngClass directive you can dynamically assign classes to the HTML elements in your Angular application. This video will show you several different methods for taking advantage of Angular's ngClass.

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 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 Using ngModelOptions to Update on Blur

Using ngModelOptions to Update on Blur

2:56 angularjs

How do you change a text input from updating on every key stroke? With ngModelOptions it is really easy to control what event triggers the model update. In this lesson, we will modify a text input to update on blur instead of key up.

angularjs tutorial about Using ng-messages with ng-animate

Using ng-messages with ng-animate

4:48 angularjs PRO

ngMessages works great with AngularJS's ngAnimate and makes the appearance of your messages more awesome.

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 Consistency between ui-router states and Angular directives

Consistency between ui-router states and Angular directives

4:40 angularjs PRO

ui-router's states and AngularJS directives have much in common. Let's explores the similarities between the two and how these patterns have emerged in Angular. Keeping your states and directives consistent can also help with refactoring as your app grows larger over time.

angularjs tutorial about caching with $http

caching with $http

2:17 angularjs PRO

By default your HTTP requests with the $https service in Angular are not cached. By setting some options, you can turn caching on.

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

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

1:19 angularjs PRO

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

angularjs tutorial about Catching errors with $exceptionHandler

Catching errors with $exceptionHandler

5:25 angularjs

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

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

angularjs tutorial about Reusing and Overriding ng-messages

Reusing and Overriding ng-messages

2:39 angularjs

One really handy trick with angular's ng-messages module is the ability to reuse messages with ease. With reuse comes the need to override messages for specific use cases.

angularjs tutorial about AngularJS $cacheFactory service

AngularJS $cacheFactory service

5:16 angularjs PRO

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

angularjs tutorial about Finishing Validatable

Finishing Validatable

13:13 angularjs PRO

We can now finalize the Validatable piece of our data modeling library.

This lesson is part of a series. Be sure to watch the previous lessons to fully understand what is going on!

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 ngModelController render function

ngModelController render function

2:04 angularjs PRO

When implementing ng-model on your reusable AngularJS directives, you need to implement the render function.

angularjs tutorial about Validations Class

Validations Class

2:16 angularjs PRO

Now we bring the validations together with a Validations class.

angularjs tutorial about Stateful filters with promises in AngularJS

Stateful filters with promises in AngularJS

4:44 angularjs

This lesson illustrates how to use promises inside Angular filters

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 When should I use ng-show or ng-if

When should I use ng-show or ng-if

5:34 angularjs

Walkthrough the main differences between the ng-show and ng-if directives

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.

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.

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.

HTML with ngSanitize and SCE

3:02 angularjs PRO

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

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.

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.

Directive with Transcluded Elements

4:46 angularjs PRO

Create a wrapWith directive using advanced transclusion techniques.

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!

Model Caching

4:34 angularjs PRO

Build a simple caching mechanism for your AngularJS data models.

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.

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.

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 Using $anchorScroll

Using $anchorScroll

2:04 angularjs PRO

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

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

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

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.

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.

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.

angularjs tutorial about Adding Child Validators

Adding Child Validators

9:30 angularjs PRO

To make our AngularJS data model validation more robust, we want the ability to make complex validators that have child validators.

angularjs tutorial about Using ngModel in Custom Directives

Using ngModel in Custom Directives

1:42 angularjs

You can use ngModel in your own directives, but there are a few things you'll need to do to get it working properly.

angularjs tutorial about Extract predicate methods into filters for ng-if and ng-show

Extract predicate methods into filters for ng-if and ng-show

3:09 angularjs

Leaking logic in controllers is not an option, filters are a way to refactor your code and are compatible with ng-if and ng-show

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 New in Angular 1.3 - Performance Boost with debugInfoEnabled

New in Angular 1.3 - Performance Boost with debugInfoEnabled

2:01 angularjs PRO

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

angularjs tutorial about New in Angular 1.4 - New bindToController Syntax

New in Angular 1.4 - New bindToController Syntax

1:43 angularjs PRO

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

angularjs tutorial about ui-router: Activating States

ui-router: Activating States

4:04 angularjs

The ui-router library for AngularJS provides several options for navigating between states in your application. You can navigate via the browser's URL bar, programatically with $state.go, and with the ui-sref directive on your HTML elements.

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.

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.

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.

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.

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.

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.

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

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

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

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.

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

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

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.

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.

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

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.

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.

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.

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.

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.

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.

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?