Build an Angular Component Controller Using ES6 Class
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.
[00:01] In this lesson, we are going to learn how to create a controller for our Angular 2 style component. Up to this point, we have used our components to serve as a holding pen for our templates, but what happens when we need to do real work?
[00:18] Our component configuration object offers us quite a few additional options besides just setting the template. For instance, we could point it to a controller, set controller as, define isolated scope, etc.
[00:32] For reference, let's look at an Angular 2 component real quick and compare where we are going. Using the component configuration object, we're essentially approximating the object that we send into this component metadata here, but now the class underneath serves as the component controller.
[00:56] This is one of the main reasons we're using ES6 for this project is because how close it resembles its Angular 2 counterpart. Let's see what I mean by creating a categories controller to see how close it resembles this Angular 2 component we just looked at.
[01:15] We're going to go ahead and create our categories.controller.js, and then we'll hop into that and we're going to define an ES6 class and we're going to call this categories controller. From here, we're going to define our constructor and we're going to initialize a property called categories.
[01:42] Now, we'll just hop into our data. We'll just pull the categories JSON out of here, just copy this and paste it in. Then from here, we now have a categories controller class with a constructor that when it gets initialized will set this categories array with categories objects.
[02:03] We need to export this, so export default categories controller, and then let's hop into our categories component and make this available to our components. So we're going to import this, import controller from /categories controller.
[02:24] Then using the shorthand syntax that we did for template, we're going to go ahead and just set controller. But then we're also going to define controller as, and because this is going to be used to display list of categories, let's do categories list controller.
[02:46] Now, we need to hop into our categories template and update this. We'll just delete these bottom items here, and then we're going to add ngRepeat to this category item. So new line, ngRepeat, and then we'll go category in categories list controller.categories, then we're going to bind to category.name.
[03:24] Let me just make sure that I did this correctly, and I did. Let's make sure that nothing is broken on the command line. Looking good. Let's hop into the browser and see if this is rendering. Here we go.
[03:38] We have development, design, exercise humor. You can notice the similarity between the Angular 2 component and our Angular 1 controller using this ES6 class.
[03:49] This is how you create and define a controller in an Angular 2 style component within your Angular 1 application.