Base Controller with AngularJS

יום חמישי, ינואר 1, 2015

There are two ways writing controllers in AngularJS Function based Class based For some reason, the first method is more popular (probably, because Angular's tutorials are written that way) (function (angular) {     angular.module("MyApp").controller("HomeCtrl", function ($scope) {         $scope.sayHello = function () {             alert("Hello");         }     }); })(angular); And the corresponding template <div ng-controller="HomeCtrl">     <button ng-click="sayHello()">Say Hello</button> </div> The other method is more elegant. You write the controller just as any other JavaScript class (function (angular) {     function HomeCtrl() {     }     HomeCtrl.prototype.sayHello = function () {         alert("Hello");     }     angular.module("MyApp").controller("HomeCtrl", HomeCtrl); })(angular); However, Angular does not support this style out of the box. You need to update the template <div ng-controller="HomeCtrl as ctrl">      <button ng-click="ctrl.sayHello()">Say Hello</button> </div> From my POV the big advantage using the later implementation is that it allows you to use a base controller class var MyApp = MyApp || {}; MyApp.BaseCtrl = (function () {     function BaseCtrl($scope) {         var me = this;         me.$scope = $scope;         me.$scope.$on("$destroy", function () {             me.onDispose();         });     }     BaseCtrl.prototype.onDispose = function () {         var me = this;         console.log( + ".dtor");     }     return BaseCtrl; })(); The BaseCtrl is a great place to store common methods required by all controllers. In my sample above I register to...

The magical vertical_align

יום ראשון, דצמבר 7, 2014

CSS is a nightmare ... Most web developers I know hate to fix/touch their CSS Have you ever had the chance to play with the vertical_align property? There are cases where you change the vertical_align property of one element but it actually effects another one. There are many blogs/posts about the common misconception of using vertical_align but none of them explain the internals of it. At last, I found a serious designer which decided to deep dive into W3C specification and explain the full picture. His name Christopher Aue. Click here to read his post Be aware, it is not fun ...
no comments

Angular 1.3 – Strict DI

יום חמישי, אוקטובר 16, 2014

Angular 1.3 was released two days ago. There are some nice small improvements that should be noticed. High level overview can be found here I think that the most noticeable improvement is the "One time binding" syntax. Angular team was talking a lot at the last two years about "performance issues with Angular". Their main conclusion is that there is no real performance issue. Funny, the first topic to be covered with 1.3 release is about performance. Still, I am happy to see that they are trying to target those issues. However, at this post I am going to look at a...