Custom annotations

[nateabele]

Hey, first of all, awesome project! Definitely trying this out in my next Angular app.

So, in the next release of ui-router we're rolling out observable parameters, which will work more or less the same as $watch(), i.e.:

$stateParams.$observe("paramName", function(val) {
  // Handler code
});

It'd be great to be able to extend Classy itself to allow for custom annotations with their own execution rules, so something like the above could be expressed as:

app.classy.controller({
  /* ... */
  observe: {
    paramName: function(val) { /* ... */ }
  }
});

Has an API like this already been planned out? If not, is it something you'd accept a PR for? Thanks again for this project and your time.

[davej]

Yes, I definitely want this, I haven't quite got my head around what the API should look like for extending Classy though. I would definitely accept a PR for this, if not then I will implement it myself in time.

I imagine you would use angular's module system to extend Classy. Perhaps something like:

angular.module('classy-observe', ['classy']).classy.extend.controller({
    name: 'observe',
    inject: ['$stateParams'],
    constructor: function(klass) {
        var observeObj = klass.constructor.prototype.observe;

        if (observeObj) {
            for (key in observeObj) {
                parent.$stateParams.$observe(key, angular.bind(klass, observeObj[key]);
            }
        }

    }
});

What are your thoughts? I'm guessing you have much more experience with writing third-party angular modules than me (since you have worked on ui-router).

[nateabele]

I would definitely accept a PR for this, if not then I will implement it myself in time.

Cool. Gimme a few days to poke at it, but if you beat me to it, so much the better.

What are your thoughts? I'm guessing you have much more experience [...]

There are a few different approaches I'm aware of, but yours is pretty novel by comparison. I don't think I'd recommend it for 3rd-party modules in general, but because Classy is intended to be used as sugar only by app developers, you're freed from a lot of constraints, so it works well.

Sorry I can't think of any useful advice to offer. :-)

[davej]

This functionality is now pushed on the develop branch, I'd love if you could check it out and perhaps even create an observe plugin? It should be pretty straight forward.

Controller plugins are written in the following format:

angular.module('classy-observe', ['classy-core']).classy.plugin.controller({
    name: 'observe'
    init: function(klass, deps, module) { }
});

and then just add the plugin to your app's module definition:

var app = angular.module('app', ['classy', 'classy-observe']);

Classy itself is now written as plugins, so you could take a look at the source for guidance on how to write a plugin: https://github.com/davej/angular-classy/blob/develop/angular-classy.coffee

I'd love to get as much feedback as possible before I do a release on master.

Let me know if you have any questions.

[nateabele]

Nice! I'll try it out tonight and let you know how it goes.

[davej]

Added postInit method and if a promise is returned from the plugins init method then it will wait for the promise to resolve before executing the controller's init method

A heavily commented sample plugin is also available: coffeescript, javascript