I was looking for abstracting common functionality into base controllers to make them reusable. I took a look at typical JavaScript Inheritance patterns and particularly liked Functional Mixins approach outlined in this article. I followed along and no surprises - everything worked fine. Only one small thing bothered me - dependency injection. A base controller might need a different set of dependencies and there was no clean way of separating dependencies for base and child controllers.

That's when I stumbled upon this gem by Misko on the Angular mailing list. The Angular $injector.invoke function mentioned in this thread does inheritance in usual JavaScript way with the addition of proper dependency injection.

Here a small plnkr to show it in action -


ParentCtrl is a typical Angular controller function but you'll notice that it's not registered as a controller. It depends on $location service while the ChildCtrl does not. ChildCtrl gets hold of injector and calls invoke on it passing the "parent" reference (ParentCtrl in this case) and its own reference as second argument. The invoke function does the magic of "mixing-in" the parent behavior into the child.

I have found this technique incredibly clean and useful so far. It helps making controllers DRYer and reusable. Hope this helps you too.