Skip to content

Instantly share code, notes, and snippets.

@tomardern
Created October 19, 2017 13:02
Show Gist options
  • Save tomardern/f144239a1c8d6c0707aa4aa3b8f3dc8a to your computer and use it in GitHub Desktop.
Save tomardern/f144239a1c8d6c0707aa4aa3b8f3dc8a to your computer and use it in GitHub Desktop.
Angular ES6 Component Style
const DEMO_COMPONENT_NAME = "demoComponent";
// before angular 1.5 component : directive was the way to create component
const demoComponent = {
template: '<h1>Hello world</h1><h2>{{$ctrl.domAttribute}}</h2>',
bindings: {
domAttribute: '@',
onSomething: '&', // function call out
demoAttr2: "<" // Data in
},
// Controller exposed as $ctrl in html
controller: class demoController {
// The class should have explicit $inject annotation in order to be properly minified:
static get $inject() {
return ["$http"];
}
constructor($http) {
Object.assign(this, { $http});
// ^ allows 'this.$service1'
}
// On initialise
$onInit() {
}
$onChanges(changes) {
if (changes.domAttribute) {
this.domAttribute = Object.assign({}, this.domAttribute);
}
}
}
};
angular
.module('app', ['account']);
angular
.module('account', [])
.component(DEMO_COMPONENT_NAME, demoComponent)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment