This lesson is for PRO members.

Unlock this lesson NOW!
Already subscribed? sign in

Build an Angular Component Controller Using ES6 Class

3:58 Angular 1.x lesson by

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.

Get the Code Now
click to level up

egghead.io comment guidelines

Avatar
egghead.io

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.

Avatar
Tom

not specifically about this video, but is there a reason that you guys don't follow John Papa style guide for angular?

In reply to egghead.io
Avatar
Lukas

In theory, I agree with almost everything in the style guide and that is where I tell most teams to go as a starting point. With that said, it is a guide and not the gospel and so I will deviate where something does not make sense for the situation I am in. In regards to this course, a lot of the suggestions in the style guide do not apply because the guide is in ES5 and we are using ES6. The main goal of the style guide is to write well-organized, self-documenting, easy to read code, and to that goal, I feel like I have been successful.

In reply to Tom
Avatar
Tom

Sorry, I didn't mean that to come out as "WHY ARE YOU NOT USING IT?!?!". Your code is incredibly clean an I thoroughly enjoyed watching it.

I follow that guide because I don't have enough hands on experience to say "That's wrong"

I also probably could have been a little more specific. I am interested in your thinking behind not using 'vm' as your 'controllerAs'?

It took me a long to begrudgingly accept 'vm', but only because I could see the logic in referring to as 'vm' inside the controller and then 'vm' inside the template ... but I still don't like it, so I am kind of hoping you have a concept that can trump it, so I justify NOT using it to myself.

In reply to Lukas
Avatar
Fabio Bedini

Hi there,
sorry to bother you but
it would not be better to avoid
the controllerAs syntax
to not override the default $ctrl alias ?
https://github.com/toddmotto/angular-styleguide#controllers

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?

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.

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.

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 CategoriesController to see how close it resembles this Angular 2 component we just looked at.

terminal

$ cd client/app/components/categories
$ touch categories.controller.js

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 CategoriesController. From here, we're going to define our constructor and we're going to initialize a property called categories.

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 CategoriesController class with a constructor that when it gets initialized will set this categories array with categories objects.

categories/categories.controller.js

class CategoriesController {
  constructor() {
    this.categories = [
      {"id": 0, "name": "Development"},
      {"id": 1, "name": "Design"},
      {"id": 2, "name": "Exercise"},
      {"id": 3, "name": "Humor"}
    ];
  }
}

export default CategoriesController;

We need to export this, so export default CategoriesController, 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.

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

categories/categories.component.js

import template from './categories.html'
import controller from './categories.controller'
import './categories.styl';

const categoriesComponent = {
  template,
  controller,
  controllerAs: 'categoriesListCtrl'
};

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 ng-repeat to this category item. So new line, ng-repeat, and then we'll go category in categoriesListCtrl.categories, then we're going to bind to category.name.

categories/categories.html

<ul class="nav nav-sidebar">
  <li class="category-item"
    ng-repeat="category in categoriesListCtrl.categories">{{category.name}}</li>
</ul>

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.

We have development, design, exercise humor.

Finished Categories

You can notice the similarity between the Angular 2 component and our Angular 1 controller using this ES6 class.

This is how you create and define a controller in an Angular 2 style component within your Angular 1 application.

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