Angular 1.x Lessons

This is the playlist created for the Angular 1.x section of the Full Stack JavaScript training course.

Watch User Created Playlist (42)

This playlist is user created.

pro-course-rss-logo

PRO RSS Feed

Components and Containers

AngularJS Batarang

JavaScript Function Scope and $scope

P

$scope vs. scope

Understanding Isolate Scope

Isolate Scope "@"

Isolate Scope "="

Isolate Scope "&"

Isolate Scope Review

P

Accessing Data in HTML

P

The basics of $scope.$watch

New in Angular 1.3 - $scope.$watchGroup

Using the AngularJS scope's $watchCollection method

Using the Angular scope $destroy event and method.

P

The config function

Filters

Building an Angular App: Filters

New in Angular 1.3 - Stateless Filters

P

Stateful filters with promises in AngularJS

Building an Angular App: Controllers

An Alternative Approach to Controllers

Experimental "Controller as" Syntax

AngularJS Architecture: Prefer the 'controller as' syntax

P

New in Angular 1.3 - bindToController

P

New in Angular 1.4 - New bindToController Syntax

P

Using Services in Angular Directives

Providers

Compile Pre and Post Link

P

$apply vs $digest

Basic Promises in AngularJS

Chained Promises in Angular

P

AngularJS Architecture: Control your promises with $q

P

Multiple HTTP Requests with $q

P

$q.all

New in Angular 1.3 - $q constructor

P

Animating the Angular Way

Using ng-messages with ng-animate

P

Getting started with $animateCss and Angular

P

Consistency between ui-router states and Angular directives

P

AngularJS Architecture: Animate state transitions with ui-router

P

Transforming raw JSON data to meaningful output in AngularJS

P

AngularJS Architecture: Using $http to load JSON data

P
angularjs tutorial about Components and Containers

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.

angularjs tutorial about AngularJS Batarang

AngularJS Batarang

4:49 angularjs

AngularJS Batarang is a powerful Chrome extension that makes your developer tools "Angular aware".

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?

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

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.

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.

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

Accessing Data in HTML

8:05 angularjs PRO

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

angularjs tutorial about 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 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 tutorial about Using the AngularJS scope's $watchCollection method

Using the AngularJS scope's $watchCollection method

3:11 angularjs

The $watchCollection method on Angular scopes provides a convenient way to watch for changes on the shallow properties of an object.

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

Using the Angular scope $destroy event and method.

4:25 angularjs PRO

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

angularjs tutorial about The 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.

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 Building an Angular App: Filters

Building an Angular App: Filters

6:28 angularjs

We are going to learn how to filter our bookmarks based on the selected category. We will learn how to manage the current category in the controller as well as set the current category from the view. As a bonus, we will see how to dynamically apply a class to visually indicate what category is the currently selected category.

The code for this lesson can be found on Github. note: the tags correspond to the lessons.

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.

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 Building an Angular App: Controllers

Building an Angular App: Controllers

7:58 angularjs

We are going to take the static HTML elements and dynamically display them on the page by setting up an AngularJS controller and hooking it up with AngularJS templating in the view.

The code for this lesson can be found on Github. Note: the tag name corresponds to the lesson.

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 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 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 - 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.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 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 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 Compile Pre and Post Link

Compile Pre and Post Link

1:53 angularjs PRO

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

angularjs tutorial about $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.

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 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 AngularJS Architecture: Control your promises with $q

AngularJS Architecture: Control your promises with $q

6:26 angularjs PRO

Learn how to manually control how asynchronous requests are handled with the use of promises. Because $http is built to work with promises, we saw a foreshadow of them in the previous lesson. We will take this a step further but seeing how to manually create a promise and then resolve or reject it as we see fit.

angularjs tutorial about Multiple HTTP Requests with $q

Multiple HTTP Requests with $q

5:06 angularjs PRO

In AngularJS, multiple HTTP requests can be coordinated with $q.all, making your project's code cleaner and more testable.

$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 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 Animating the Angular Way

Animating the Angular Way

5:53 angularjs

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

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 Getting started with $animateCss and Angular

Getting started with $animateCss and Angular

2:30 angularjs PRO

ngAnimate 1.4 introduces $animateCss which allows us to interact with css based animations through our Javascript. Learn how to get started creating animations with $animateCss.

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 AngularJS Architecture: Animate state transitions with ui-router

AngularJS Architecture: Animate state transitions with ui-router

3:46 angularjs PRO

In this lesson, we are going to learn how easy it is to animate ui-router state changes using ngAnimate and about 10 lines of CSS.

angularjs tutorial about Transforming raw JSON data to meaningful output in AngularJS

Transforming raw JSON data to meaningful output in AngularJS

6:38 angularjs PRO

JSON from server often exposes raw data you have to transform to present to your end users. In this lesson, we cover a few solutions to make it happen.

angularjs tutorial about AngularJS Architecture: Using $http to load JSON data

AngularJS Architecture: Using $http to load JSON data

7:21 angularjs PRO

Now let's learn how use the $http service to make requests to remote servers. In our case, we will load the data from JSON files and then make them available in our controllers. We will see a few techniques that I frequently use to make working with $http data a lot more convenient.

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