Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Classy: Cleaner class-based controllers for AngularJS

davej.github.io

Post reply on HN
Print view View original

21–30 of 59 posts

Re: Classy: Cleaner class-based controllers for AngularJS

#21

Post by solomone »

davej wrote: post #17
solomone wrote: post #14

I like this. One thing I like about is it how it sets up a canonical place to init things. The other nice effect is the use of the injector instead of the repeated list of dependencies. When not using coffeescript in angular, I could see making good use of this. Thanks !

It works really well with Coffeescript too. In fact it was written with Coffeescript and internally it uses Coffeescript's `Class` syntax. It was originally inspired by this gist: https://gist.github.com/elado/8138516

I could see one annoyance being the lack of "fat arrow" in normal javascript and trying to reference the services in a callback.

Re: Classy: Cleaner class-based controllers for AngularJS

#22

Post by mcrider »

tdicola wrote: post #7

Interesting project--I've done a little bit of Angular development and would be curious to look at this the next time I come back to Angular. As a side note, I am always impressed and insanely jealous of the nice websites that frontend libraries make for themselves. It makes sense since obviously folks with more frontend experience are writing the libraries, but I wish there were nice templates or tools to make such…

Github can generate project pages for you with a few different layouts. Nothing fancy but a decent enough design with almost no effort: https://help.github.com/articles/creating-pages-with-the-aut...

Re: Classy: Cleaner class-based controllers for AngularJS

#23

Post by pdxandi »

MozMorris wrote: post #19
tdicola wrote: post #7

Interesting project--I've done a little bit of Angular development and would be curious to look at this the next time I come back to Angular. As a side note, I am always impressed and insanely jealous of the nice websites that frontend libraries make for themselves. It makes sense since obviously folks with more frontend experience are writing the libraries, but I wish there were nice templates or tools to make such…

In relation to your side note, perhaps a site like http://html5up.net/ might be of use. I'd be interested if others have other similar resources they use.

Wow, those are super slick. Thanks for sharing.

Re: Classy: Cleaner class-based controllers for AngularJS

#24

Post by davej »

Bahamut wrote: post #3

I guess this can clean logic flow in a controller, but here you end up with a bloated object instead. The biggest problem I see though is if you want to save a reference to the unregister functions of the $watch callbacks. Otherwise, this is a cool idea, although it falls a little short.

> The biggest problem I see though is if you want to save a reference to the unregister functions of the $watch callbacks.

This is a valid criticism, thank you. I will try to put together a nice solution for this.

Of course you can always register/de-register watchers the normal way inside of the init method.

Re: Classy: Cleaner class-based controllers for AngularJS

#25

Post by sanderjd »

SchizoDuckie wrote: post #18
davej wrote: post #15

Earlier quoted context omitted.

Thanks for the feedback. I would argue that the Classy example is more expressive and crucially it is DRY. Edit: > One of the brilliant things about angular is that it provides a proper structure that anyone that needs to write angular needs to adhere to Angular doesn't provide structure for controllers, they are just javascript functions. If you want to add structure it is up to the individual developer to decide ho…

Angular's dependency injection is still a matter of discussion and a lot of people are not completely happen with it. It'll also be made into something different for angular 2.0. Still, besides that: DRY is IMO not about these 2 lines that you've refactored away here. It's about whole functions/classes that have similar functionality where you're repeating yourself. Therefore, this would be a micro-optimisation with…

The point of DRY is to reduce the types of errors that repetition lends itself to. A very common member of that class of errors is "I should have repeated something, but I didn't". It is pretty easy to run into that error with Angular's injection - you can forget to add either the string or the argument, or (worse) you can get the order wrong. Eliminating the repetition fixes that class of errors, so I think it's well within the realm of "what DRY is about".

Re: Classy: Cleaner class-based controllers for AngularJS

#26

Post by mcv »

davej wrote: post #15
SchizoDuckie wrote: post #11

There is really no need for this. It adds nothing imo but another layer of sauce over what angular already does properly. If your controllers are getting huge, go refactor into directives and services. I don't see how this would help since there isn't even inheritance? also: app.controller('AppCtrl', ['$scope', '$location', '$http'], function($scope, $location, $http) { // ... }]); vs app.classy.controller({ name: 'A…

Thanks for the feedback. I would argue that the Classy example is more expressive and crucially it is DRY. Edit: > One of the brilliant things about angular is that it provides a proper structure that anyone that needs to write angular needs to adhere to Angular doesn't provide structure for controllers, they are just javascript functions. If you want to add structure it is up to the individual developer to decide ho…

> Angular doesn't provide structure for controllers, they are just javascript functions. If you want to add structure it is up to the individual developer to decide how to do it.

This is a pretty big one to me. Angular provides tons of structure all over the place, with only one real exception: controllers. Some of my controllers stick out like sore thumbs in my code. I like how Classy gives them some structure not unlike the structure that directives already have.

Re: Classy: Cleaner class-based controllers for AngularJS

#27

Post by mcv »

sanderjd wrote: post #25
SchizoDuckie wrote: post #18

Earlier quoted context omitted.

Angular's dependency injection is still a matter of discussion and a lot of people are not completely happen with it. It'll also be made into something different for angular 2.0. Still, besides that: DRY is IMO not about these 2 lines that you've refactored away here. It's about whole functions/classes that have similar functionality where you're repeating yourself. Therefore, this would be a micro-optimisation with…

The point of DRY is to reduce the types of errors that repetition lends itself to. A very common member of that class of errors is "I should have repeated something, but I didn't". It is pretty easy to run into that error with Angular's injection - you can forget to add either the string or the argument, or (worse) you can get the order wrong. Eliminating the repetition fixes that class of errors, so I think it's wel…

I ran into this exact thing just a few days ago. I added a dependency to an existing controller, and it threw an error because I'd only added the dependency in one place instead of both.

This is absolutely one of the things that DRY is about.

Re: Classy: Cleaner class-based controllers for AngularJS

#28

Post by zoomerang »

SchizoDuckie wrote: post #11

There is really no need for this. It adds nothing imo but another layer of sauce over what angular already does properly. If your controllers are getting huge, go refactor into directives and services. I don't see how this would help since there isn't even inheritance? also: app.controller('AppCtrl', ['$scope', '$location', '$http'], function($scope, $location, $http) { // ... }]); vs app.classy.controller({ name: 'A…

Look a little closer - It's not about saving bytes. I ended up coming up something very similar for my projects and it made a notable difference in defect rate.

- Removes the need for positional arguments for constructor injection, so you only have to list your dependencies once. This one seems minor but can be a major frustration and a source of bugs when working with lots of services.

- Moves actions out of the scope and onto the controller itself, where they belong.

- Provides a clean template structure for other project members to work off that guides you to nicely structured and properly separated code (i.e. Watches in one section). This seems minor, but when you're working with multiple junior developers it starts to become a big deal very quickly.

You can do all this without using a third party project, but if you're new to Angular this is a nice bootstrap and helps guide you towards a solution that avoids a lot of warts in the framework.

Re: Classy: Cleaner class-based controllers for AngularJS

#29

Post by chm »

This is actually great for someone learning Angular. It's just a different way of presenting the exact same material. I was completely dumbfounded at first when learning Angular. This would have helped.

I very much suggest everyone interested in Angular development to read what the guys at MeanJS.org[1] have to say about structuring modules. It helps me think about my app a lot better. The structure could be cleaned up a bit though (e.g. module A can use module B's filters at run-time, this is a bad thing IMO. There should be global and local filters).

[1]:http://meanjs.org/docs.html#angularjs-modules

Post reply on HN