Welcome to this review of the Pluralsight course
Building Components with Angular 1.5 by Scott Allen.

Scott has over 25 years of commercial software development experience across a wide range of technologies. He has successfully delivered software products for embedded, Windows, and web platforms.

To learn more about him, see my career strategies interview with him and other successful developers on Outlier Developer.

Programming Components

Introduction

This course is designed for developers who are already familiar with Angular JS.

If you are new to this framework, check out Scott Allen’s excellent Get Started course first.

Scott says he will show us why a component based approach is superior to using Controllers and Directives.

Component Overview

Scott explains that there is an overlap in the functionality offered by controllers and directives.

Controllers are easy to use but don’t have the same power as directives. Directives are powerful but a bit unwieldy.

Angular 1.5 components have been designed as a best of both worlds solution. We get easy of use, and lots of power.

Our First Component

One of Scott’s favorite demo examples is showing movie information and we see the return of this here for Angular components.

We create movie-list-component.js and in our index.html we have a  element.

We see that the component API is similar to the directive API.

Scott also creates a move-list template in movie-list.component.html to show off the templateUrl property.

We can register a controller inside of our component. We do this, and Scott also demonstrates the controllerAs property.

Scott says the this keyword in JavaScript is “a little bit slippery”.

For further details on how the this keyword works see the Dynamic Scope, Hoisting and this module of Kyle Simpson’s Advanced JavaScript course.

We see two way data-binding working. Scott says it’s not much different to how we used to implement with controllers, but we now have component abstraction.

Component Controllers

Scott says components offer the best features of a controller and more.

Angular 1.5 also introduces new lifecycle events, which we can use in our component controllers. Scott introduces the following:

• $onInit
• $onDestroy
• $onChanges
• $postLink

He says any controller that performs useful work should be using $onInit.

Using $http in $onInit

Scott creates a new function called controller and injects the $http service into it.

In this function we assign a function value to $onInit and this function calls a fetchMovies function and returns a list of movies using JSON.

In movie-list.component.html we have binding expressions for the movie title, length and rating. We also create functionality for the user to increase or decrease the movie ratings.

Components versus Directives

We no longer need to use the ng-controller directive to work with controllers.

Scott says components are not quite as powerful as directives: some problems can only be solved with directives. However Scott speculates that 95% of the things directives give us are also covered by Angular 1.5 components.

In those 95% of scenarios, components are the better solution due to having a better API than directives. It does convention over configuration much better.

Building a Rating Component

We jazz up our movie list with a rating component displaying a number of asterisks instead just a plain old number.

This is similar to what Deborah Kurata builds in her Angular 2: Getting Started course.

This component uses templateUrl and bindings and controllerAs and controller properties.

Inside the controller function we use the $onInit lifecycle hook to create the correct number of asterisks.

In the template file we use ng-repeat to display the * characters we need.

Next we want to allow the user to update the rating, and we can do this using the $onChanges lifecycle hook.

We also learn about the transclude component setting and the ng-transclude tag.

Testing a Component

In this lesson Scott shows us a traditional setup with Karma and Jasmine for running unit tests.

We see that the $componentController service works very similarly to the older $controller service.

We get a simple test passing here: “The movieList component… can be created”

To go deep into this topic, see Bradley Braithwaite’s AngularJS Unit Testing in-depth, Using ngMock.

Components and Angular 2

The Angular 1.5 components are very similar to those used in Angular 2. If you decide to migrate your Angular 1.x application to use Angular 2, your job will be somewhat easier with the use of these components.