Przykładowa aplikacja AngularJS oparta o komponenty

app.js

angular.module('myApp', []);

contacts.service.js

angular
.module('myApp')
.service('ContactsService', class ContactsService {
    constructor() {
        this.contacts = [{
            id: 1,
            name: 'Michał',
            age: 24,
            email: 'example@example.com'
        }, {
            id: 2,
            name: 'Tester',
            age: 99,
            email: 'randomemail@com.pl'
        }];
    }
});

gravatar.service.js

angular
.module('myApp')
.service('GravatarService', class GravatarService {
    static GRAVATAR_URL = 'http://www.gravatar.com/avatar';

    constructor(md5) {
        this.md5 = md5;
    }
    getGravatarUrl(email, size = 32) {
        if (!email || !size) {
            return '';
        }
        const emailMd5 = this.md5(email);
        return `${GravatarService.GRAVATAR_URL}/${emailMd5}?s=${size}&d=https%3A%2F%2Ftypeofweb.com%2Fcontent%2Fimages%2F2016%2F05%2Ftypeofweb_logo-04-white-blog.png`
    }
});

md5.service.js

angular
.module('myApp')
.factory('md5', $window => $window.md5);

myApp.component.js

angular
.module('myApp')
.component('myApp', {
    template: `
    <my-contacts-list contacts="$ctrl.contacts"></my-contacts-list>
    `,
    controller: 'MyAppCtrl'
});

myApp.controller.js

angular
.module('myApp')
.controller('MyAppCtrl', class MyAppCtrl {
    constructor(ContactsService) {
        this.ContactsService = ContactsService;
    }

    $onInit() {
        this.contacts = this.ContactsService.contacts;
    }
});

myContactItem.component.js

angular
.module('myApp')
.component('myContactItem', {
    bindings: {
        'contact': '<'
    },
    template: `
    <my-gravatar email="$ctrl.contact.email" size="64"></my-gravatar>
    <div class="contact-name">Name: {{$ctrl.contact.name}}</div>
    <div class="contact-age">Age: {{$ctrl.contact.age}}</div>
    `
});

myContactsList.component.js

angular
.module('myApp')
.component('myContactsList', {
    bindings: {
        'contacts': '<'
    },
    template: `
    <ul>
        <li ng-repeat="contact in $ctrl.contacts track by contact.id">
            <my-contact-item contact="contact"></my-contact-item>
        </li> 
    </ul>
    `
});

myGravatar.component.js

angular
.module('myApp')
.component('myGravatar', {
    bindings: {
        'email': '<',
        'size': '@'
    },
    template: `
        <img ng-src="{{ $ctrl.gravatarUrl }}" ng-attr-width="{{ $ctrl.size }}">
    `,
    controller: 'MyGravatarCtrl'
});

myGravatar.controller.js

angular
.module('myApp')
.controller('MyGravatarCtrl', class MyGravatarCtrl {
    constructor(GravatarService) {
        this.GravatarService = GravatarService;
    }

    $onChanges() {
        this.updateGravatarUrl();
    }

    $onInit() {
        this.updateGravatarUrl();
    }

    updateGravatarUrl() {
        this.gravatarUrl = this.GravatarService.getGravatarUrl(this.email, this.size);
    }
});