Angular

Watch User Created Playlist (8)

This playlist is user created.

pro-course-rss-logo

PRO RSS Feed

Communicate State Changes in Angular with an Event Bus

P

Test an Angular Component with $componentController

P

Isolate State Mutations in Angular Components

P

Container and Presentation Components Using Angular Component Bindings

P

Build Lightweight Controllers by Binding to Models in Angular

P

Refactor Angular Controller Logic to Services

P

Build an Angular Component Controller Using ES6 Class

P

Structure a Complex Angular Component using Subcomponents

P
angularjs tutorial about Communicate State Changes in Angular with an Event Bus

Communicate State Changes in Angular with an Event Bus

2:49 angularjs PRO

In Angular 2, we use observables to push new data to our components. In Angular 1, we occasionally need to notify a component that a collection has changed so that we can perform an operation at the component level.

For example, when we are editing or creating a bookmark, and we navigate to a new category, we are left in this awkward state of an incomplete edit.

We need to be notified when a new category is selected at the bookmark level so that we can reset the current bookmark. Even though we do not have the convenience of an observable to emit state changes to us, we can still spin up an event bus to let us know when we need to hit reset.

angularjs tutorial about Test an Angular Component with $componentController

Test an Angular Component with $componentController

3:56 angularjs PRO

Traditionally you had to create DOM elements to test a directive but by shifting our focus to components, writing unit tests got a lot easier using $componentController within ngMocks. We can now test our component's controller with an easy to use API that does not require us to spin up any DOM elements to do so. In this lesson, we will see how our ES6 tests are transpiled, learn how to test a component using $componentController and talk about how to simulate lifecycle hooks.

angularjs tutorial about Isolate State Mutations in Angular Components

Isolate State Mutations in Angular Components

8:06 angularjs PRO

Managing state is one of the hardest things to do in any application. Angular 2 tackles this problem by making it easy to implement a reactive, uni-directional data flow that favor immutable operations. We are moving in the right direction in Angular 1 by moving our state and logic to models but invariably this raises a question. If we are moving to an immutable world, how do you manage mutable operations like forms in Angular? In this lesson, we are going to learn a surprisingly simple technique to isolate state mutations within a component using component lifecycle hooks.

angularjs tutorial about  Container and Presentation Components Using Angular Component Bindings

Container and Presentation Components Using Angular Component Bindings

6:09 angularjs PRO

Angular 2 introduces the concept of inputs and outputs as a mechanism for components to communicate. The most significant advantage of this is that we can create presentation components that are void of any imperative logic as they rely entirely on their parent container component. We will learn how to create inputs and outputs in Angular 1 using isolated scope and the component binding syntax.

angularjs tutorial about Build Lightweight Controllers by Binding to Models in Angular

Build Lightweight Controllers by Binding to Models in Angular

10:02 angularjs PRO

In Angular, our controllers should be small and focused on the view that it is controlling. We accomplish this by moving as much logic and state as we can into models. Angular 2 introduced observables and async pipes which make it easy to manage state and communicate that directly to our templates.

We can start to point our Angular 1 applications in that direction by binding to our models directly from within our controllers. In this lesson, we will see a simple example of this technique and a slightly more advanced case where we lose the lexical reference to the this keyword.

angularjs tutorial about Refactor Angular Controller Logic to Services

Refactor Angular Controller Logic to Services

3:28 angularjs PRO

In Angular, we want to keep our controllers lightweight and specific to the view that it is controlling. To accomplish this, we are going to refactor our categories collection into a CategoriesModel. A recurring theme in Angular 2 is that everything is "just a class". When we create our controllers and services in an Angular 2 style, they are also "just a class". We will see this in action as we convert our controller almost verbatim into a service.

angularjs tutorial about Build an Angular Component Controller Using ES6 Class

Build an Angular Component Controller Using ES6 Class

3:58 angularjs PRO

The simplest version of a component in Angular 2 is nothing more than a container for a template. When we need to introduce imperative logic into our component, we do that via an ES6 class. We accomplish the exact same thing in Angular 1.x by using an ES6 class to serve as a controller for a component. In this lesson, we will examine an Angular 2 component to establish the pattern and then illustrate the similarity as we build out our own controller in ES6.

angularjs tutorial about Structure a Complex Angular Component using Subcomponents

Structure a Complex Angular Component using Subcomponents

5:13 angularjs PRO

An Angular 2 cornerstone is component driven architecture and how we divide up our features into self-contained components and then fit them together. In this lesson, we will cover the basic structure of a component in an Angular 2 style as we build one from the ground up. Equally important, we will see how to integrate it into our application by adding it to our root component.

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