Create a gist now

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Angular 1 + ES2015 - define a component and controller class in 1 file

Intro

This a proposal for defining an angular component with version 1 and ES2015 Followed by blog post about writing ng1 with es2015.

Objectives

The objective is having all the component's defintions in one file, along with a resemblence to angular2 Component definition "now-playlist" (directory).
However, the defintion is agnostic to angular, and the class and componet's configruation can be used separatley (if needed).

// in now-playlist directory
import { NowPlaylistComponent } from './now-playlist.component';
angular
.module('now-playlist', [])
.component(NowPlaylistComponent.selector, NowPlaylistComponent);
// or with a directive
.directive(NowPlaylistComponent.selector, () => NowPlaylistComponent);
import template from './now-playlist.tpl.html';
export let NowPlaylistComponent = {
template,
selector: 'nowPlaylist',
// or "bindings" to follow ng1.5 "component" factory
scope: {
videos: '=',
filter: '=',
nowPlaying: '=',
onSelect: '&',
onRemove: '&',
onSort: '&'
},
bindToController: true,
replace: true,
restrict: 'E',
controllerAs: '$ctrl',
controller: class NowPlaylistCtrl {
/* @ngInject */
constructor () {
// attach any DI services to 'this' context
Object.assign(this, ...arguments);
// injected with this.videos, this.onRemove, this.onSelect
this.showPlaylistSaver = false;
}
removeVideo($event, video, $index) {
this.onRemove && this.onRemove({ $event, video, $index });
}
selectVideo (video, $index) {
this.onSelect && this.onSelect({ video, $index });
}
sortVideo($item, $indexTo) {
this.onSort && this.onSort({ $item, $indexTo });
}
}
}
@gdi2290

This comment has been minimized.

Show comment
Hide comment
@gdi2290

gdi2290 Jan 3, 2016

you're missing template

gdi2290 commented Jan 3, 2016

you're missing template

@orizens

This comment has been minimized.

Show comment
Hide comment
@orizens

orizens Jan 3, 2016

hi @gdi2290, "template" is line 15 - I'm using Object Literal Shorthand.

Owner

orizens commented Jan 3, 2016

hi @gdi2290, "template" is line 15 - I'm using Object Literal Shorthand.

@gdi2290

This comment has been minimized.

Show comment
Hide comment
@gdi2290

gdi2290 Jan 3, 2016

I know you're using the shorthand but you need to import it. You can also include more than one file in gist. Are you trying to show something like this? https://github.com/AngularClass/NG6-starter/tree/master/client/app/components/home

gdi2290 commented Jan 3, 2016

I know you're using the shorthand but you need to import it. You can also include more than one file in gist. Are you trying to show something like this? https://github.com/AngularClass/NG6-starter/tree/master/client/app/components/home

@orizens

This comment has been minimized.

Show comment
Hide comment
@orizens

orizens Jan 3, 2016

yes - i'm familiar with NG6-Starter - that's some of the inspiration for it.
However, I want to include the component's defintion with the controller in the same file - as it seems to me easier to have a component's defintion, similar to ng2 in the same file.
thanks for the tip - I refactored the gist to have multiple files.

Owner

orizens commented Jan 3, 2016

yes - i'm familiar with NG6-Starter - that's some of the inspiration for it.
However, I want to include the component's defintion with the controller in the same file - as it seems to me easier to have a component's defintion, similar to ng2 in the same file.
thanks for the tip - I refactored the gist to have multiple files.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment