Let’s start with a simple requirement and then build our way up. We’ll be working on a component for the ‘LetsConnect’ app that lets you connect with other business people. We want to create a component to display the user’s business card. The component has the following requirements:

1)	 Should show the person’s name, title, and contact email.
2)	It should use the personal information being fetched from another service.
Let’s start with the first requirement and work our way up:
Here is the boiler plate for our AngularJS component
The interface for a component is defined under IComponentOptions which we will need to import into our file. I like to keep the template separate, so we will use templateUrl to specify the file location. If you’d prefer, you can use template and define the template inline. In addition to the template we will be using a controller, and a few bindings so that our component can accept the name, title, and contact email.

In the constructor, we specify all the values we just defined. We will be using “@” for the binding the name, title, and contact so that it accepts strings.
import { IComponentOptions } from 'angular';

export class businessCardComponent implements IComponentOptions {
    public templateUrl: string;
    public controller: string;
    public bindings: any;

    constructor() {
        this.templateUrl = 'components/business-card/business-card.html';
        this.controller = 'BusinessCardController';
        this.bindings = {
            personName: '@',
            personTitle: '@',
            personContact: '@'
        };
    }
}

angular.module('ConnectWithMe').component('businessCardComponent', new businessCardComponent());

Now let’s look into the controller that will be handling the logic for this component, the “BusinessCardController”.

interface IBusinessCardController {
    personName: string;
    personTitle: string;
    personContact: string;
}

export class BusinessCardController implements IBusinessCardController {

    public personName: string;
    public personTitle: string;
    public personContact: string;

}

angular.module('ConnectWithMe').component('BusinessCardController', BusinessCardController);

For controllers, it’s a good idea to define an interface. This is so that every controller that creates business cards will need a name, a title, and a contact.

Finally, we build the view. I’m going to skip the CSS for now. You can access the controller’s public properties in the $ctrl object. You can specify a more specific alias using the controllerAs when defining your component.

<div>
    <div>Name: {{::$ctrl.personName}}</div>
    <div>Type: {{::$ctrl.personTitle}}</div>
    <div>Contact: {{::$ctrl.personContact}}</div>
</div>

We have all the three pieces required to get our component to work. We can use this component in two ways
A)	Inside a template by using it as an element like so:
<div>
    <business-card-component person-name="John Doe" person-title="Software Engineer" person-contact="john@doe.com"></business-card-component>
    <div>Some other stuff in the website</div>
</div>

B)	Use the component in the UI-Router.
I found this part to be a little confusing because the implementation is a little different based on the version of angular and ui-router you are on.

I am using angular 1.5.x and ui-router 0.3.2 and I use the following when defining my route:

{
            url: '/business-card',
            template: '<business-card-component person-name="John Doe" person-title="Software Engineer" person-contact="john@doe.com"></business-card-component>',
};


If you’re using ui-router > 1.xx you have access to the component keyword, and it makes using components easier.


We have the basic component setup, now let’s tackle the second requirement: Use data from a service to populate the component.

There are a few ways to do this and the most common way is to inject the service into the controller, and use getters to fetch the data. However, I want to keep my component independent of what service returns the data. This way I can swap out different services, and make this component as a reusable piece of code.

First, we need to change the data bindings in our component definition from ‘@’ to ‘<’ (‘<’ is to enable one-way data binding)

Now our component will look like:

import { IComponentOptions } from 'angular';

export class BusinessCardComponent implements IComponentOptions {
    public templateUrl: string;
    public controller: string;
    public bindings: any;

    constructor() {
        this.templateUrl = 'components/business-card/business-card.html';
        this.controller = 'BusinessCardController';
        this.bindings = {
            personName: '<',
            personTitle: '<',
            personContact: '<'
        };
    }
}

angular.module('ConnectWithMe').component('BusinessCardComponent', new BusinessCardComponent());

Our controller can stay the same because we are not making any logical changes. The way we use our component, however, needs to change.

Let’s look at the two forms of implementation again. 1) Using the component as an element. 2) Using the component as a route.

1)	Using it as an Element
Imagine that this component is being used within a template that has its own controller, let’s call it the parentController. The parentController has access to the personService, which pulls the user’s name, contact, and Title.

<div>
    <business-card-component person-name="parentController.getName()" person-title="parentController.getTitle()" person-contact="parentController.getName()"></business-card-component>
    <div>Some other stuff in the website</div>
</div>

2)	Using the component as a route
To pass data into our component, we’ll have to use the resolve block to pull the data from the service.

{
            url: '/business-card',
            template: '<business-card-component person-name="$resolve.name" person-title="$resolve.title" person-contact="$resolve.contact"></business-card-component>',
            resolve: {
                name: (DataService): string => {
                    return DataService.getName();
                },
                title: (DataService): string => {
                    return DataService.getTitle();
                },
                contact: (DataService): string => {
                    return DataService.getEmail();
                }
            }
        }

Since we are using the legacy ui-router, we will use the template. If you’re using ui-router 1x you can use the component keyword.