Skip to content

Instantly share code, notes, and snippets.

@mmiszy mmiszy/app.js
Last active May 28, 2018

Embed
What would you like to do?
Przykładowa aplikacja AngularJS oparta o komponenty
angular.module('myApp', []);
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'
}];
}
});
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`
}
});
angular
.module('myApp')
.factory('md5', $window => $window.md5);
angular
.module('myApp')
.component('myApp', {
template: `
<my-contacts-list contacts="$ctrl.contacts"></my-contacts-list>
`,
controller: 'MyAppCtrl'
});
angular
.module('myApp')
.controller('MyAppCtrl', class MyAppCtrl {
constructor(ContactsService) {
this.ContactsService = ContactsService;
}
$onInit() {
this.contacts = this.ContactsService.contacts;
}
});
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>
`
});
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>
`
});
angular
.module('myApp')
.component('myGravatar', {
bindings: {
'email': '<',
'size': '@'
},
template: `
<img ng-src="{{ $ctrl.gravatarUrl }}" ng-attr-width="{{ $ctrl.size }}">
`,
controller: 'MyGravatarCtrl'
});
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);
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.