Angular Inherence

Writing a code to application like my could cross a point of readability and flexibility if all functions supporting one model of data I put to one controller. I decided to change it. I have to exclude my model to other module's fiction. Some of common methods for a few controllers can be excluded to other parent controller and inherit it.


My idea is to use factory to have in controllers a shared model instance and parent controller to support the most common operations and extend it in children classes.

Ex. var App = angular.module('App', []);

Below is shared model with public api.

App.factory('SharedModel', function () {
    var model = { /* some definition of object */   };
    // public API
    return {
        getValue: function() {
           return model.value;
        },
        updateValue: function(value) {
           model.value = value;
        }
    };
});

Parent controller

App.controller("ParentCtrl", function($scope, MyParentService,SharedModel) {

    $scope.parentMethod = function(){
        SharedModel.updateValue({'par1' : 'myValue'});
        console.info('do something');
    }
});

Child controller. Angularjs support inheritance of controllers.

App.controller("DefaultCtrl", function($scope, $controller, SharedModel, MyService) {
    $controller('ParentCtrl', {$scope: $scope});
  
    $scope.setVal = function(text){
        MyService.setText(text);
        sharedModel.updateValue(text);
    };
    $scope.getVal = function(){
        return SharedModel.getValue();
    };
  
    $scope.getServiceVal = function(){
        return MyService.myBase();
    };
    $scope.getMyServiceVal = function(){
        return MyService.myService();
    };
  
});

Top service body.

function MyBaseService($http) {
    this.text = "MyBaseServiceText";
    this.loaded = false;
    this.myBase = function(){
        console.log("MyBaseService.myBase");
        if(!this.loaded){
            $http({
                method: 'GET',
                url: 'http://localhost/',
            });
            this.loaded = true;
        }
        return this.text;
    }
};

Medium service body.

function MyParentService($http) {
    MyBaseService.call(this,$http);
    this.getSomething = function(){
        return 'something';
    }
};

Child service body used in controller.

function MyService($http) {
    MyBaseService.call(this,$http);
    this.myService = function(){
        console.log("called my service" + this.text);
        $http({
            method: 'GET',
            url: 'http://localhost/',
        });
    }
};

Registration of service body in Angularjs's context.

App.service("MyBaseService", MyBaseService);
App.service("MyParentService", MyParentService);
App.service("MyService", MyService);

It's quite easy..... isn't it ?

Angularjs and lazy loading

Today I noticed that all DOM model is loaded, even if it is not shown on page ( is ngHiden) and I don't need it. I searched a little in google and I found that there is a other attribute which I should use for this block code - "ngIf".

If it is false, it doesn't include element and children into a DOM model and it wait for change state to true.

My Zk expirience

As I mentioned before I have to do one thing in zk framework. My fillings are quite good comparing them with that filling what I had after developing in GWT. Maybe because ZK is different than GWT. ZK is server side oriented framework otherwise than GWT - client oriented.

Firstly GWT need special compilation after every little change, zk only when interface changed. In other cases hot swap every time works.

In ZK all business logic can is on server side. Forms looks like jsp and are processed by zk dispatcher.

Today I found one thread at stackoverflow.com comparing them. There is one comparison of project developed by two teams, one in ZK and second in GWT.  ZK win, it took one third of developing in GWT. I can say the same about developing in  clean JavaScript and Angular.

Comparing user experience of using application developed with ZK and GWT users didn't see any difference.

Conclusion
If you afraid of JavaScript and your clients can be always online, use ZK, otherwise you can reflect use GWT or domesticate with JavaScript and Angular

Angular structure and remote templates

At weekend I tried to clean my Angular project and move modules to separate files and folders. I did this but at the beginning nothing was working. I defined separate modules like:

angular.module('App', []);

In this square brackets I have to put names of other modules that are required to use in that App. That modules are injected by name.

angular.module('App', ['MyValidators','MyFilters']);

I exclude html templates to external files and use them by url.

<div .... ng-include="'templates/myTemplate.tpl.html'" />

AngularJS interceptor

I created AngularJS service and connection to server. On server side was Spring Security and I used CSRF. I'd like natty add this token to every request.

The best way to do that was create interceptor "csrfInterceptor"

App.config(["$httpProvider", function($httpProvider) {
    $httpProvider.interceptors.push("csrfInterceptor");
}]);

and push it into provider interceptor.

AngularJs filters

How it is easy to create in AngularJS filter I got to know when I need some special conditions.
I need to filter list of elements like this:


item in ptfs | showFilter: searchCriteria

I created filter called "showFilter" with filter criteria "searchCriteria".

Filter looks like:

App.filter('showFilter', [function($filter) {
   
    function isNotEmpty(obj){
        return obj != null && obj.trim().length > 0;
    }
   
   
    return function(inputArray, searchCriteria){      
       ....
       return data;

     };

}]);


Function returning data is a filtered copy of input data.