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.
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 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
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
We can register a controller inside of our component. We do this, and Scott also demonstrates the
Scott says the
For further details on how the
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.
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:
He says any controller that performs useful work should be using
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
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
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
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.