toddmotto / ama

Ask me anything!
20 stars 3 forks source link

Your style guide and 1.5 component example are somewhat different - why? #53

Open lf94 opened 8 years ago

lf94 commented 8 years ago

It's all in the title really. Your style guide misses some stuff, like what a thing.component.js file should look like, or how to pass around the module name.

In your 1.5 component example, you just use angular's module system.

Which should I use? I feel like exporting .name of everything is tedious and may even cause confusion. On the other hand your use of the angular module system alone is nice, but I know it doesn't separate the code from angular enough.

Thanks Todd.

Edit: Here's an example of what I'm doing now.

Module:

import angular from 'angular';
import LoginComponent from './login.component';

const name = 'LoginModule';
angular
    .module(name, [])
    .component(LoginComponent.name, LoginComponent);

export default name;

Controller:

class LoginController {
    constructor($scope) {
        this.lol = 1;
    }
}

export default LoginController;

Component:

import LoginController from './login.controller';

const component = {
    name: 'login',
    template: `Hi`,
    controller: LoginController
};

export default component;

Requiring the component:

import angular from 'angular';
import LoginModule from './login/login.module';

const name = 'FormComponents';

angular
    .module(name, [
        LoginModule
    ]);

export default name;

Actually the way I've done it feels quite nice. Instead of calling it "LoginModule" I think it might be nice to just call it by the component name "Login".

toddmotto commented 8 years ago

Yeah - the component based app example is all ES5, the ES6 version uses a slightly different setup. It doesn't use .controller() as there's no need and also the same with .name on the modules. A few little tweaks here and there but 99% the same :)