Mahesh M – @Cybrilla

Author Archives: Mahesh M

Execute a function within a Directive from outside in AngularJS

January 6, 2016 Published by: Mahesh M

We were working on two problem statements at different points in time of a project and we interestingly found similar solution for both.

Problem A: We have a form, one of the input fields (defined as a directive) has a clear button. This clears the text in the input field, the data in the ng-model as well as the data held in the variable that gets submitted finally via the form. Now, we have a universal clear button that also needs to clear all the 3 data points.

Problem B: We have a section that has been defined as a directive which can be expanded/collapsed using a toggle button. The expand/collapse is handled by the directive. The initial state of the directive, whether it should be expanded or collapsed, is actually dependent on a value obtained from an API call.

In both cases the common thing that one can notice is that there is an external trigger that needs to be passed on into the directive. In Angular 1.4 there is no direct way to do this. Directives do support two way binding, and passing initial values. But neither would solve the exact requirement in both problems.

The solution that we came up with was passing a control object to the directive. The controller defined a control object, a key of which will be pointing to a function. This object was passed on to the directive, and directive initialised the control object’s key (control object which is two-way bound) with a function that gives access to the variables/functions inside the directive. Being two-way bound, this function is now available in the controller. This can be passed on to anywhere (factory, as it was in case of solution for problem B) or used locally.

Sample code:

$scope.control-object = MyFactory.control-object;

1	$scope.control-object = MyFactory.control-object;

<mydirective control="control-object">

1	<mydirective control="control-object">

app.directive("mydirective", function () {
    return {
        restrict: 'E',
        scope: {
            controlObject: '='
        },
        controller:function($scope){
            //Initialise control object with init function
            $scope.controlObject.initFun = function(initValue) {
                    $scope.initValue = initValue;
            };
        }
     }
});

app.directive("mydirective", function () {

return {

restrict: 'E',

scope: {

controlObject: '='

controller:function($scope){

//Initialise control object with init function

$scope.controlObject.initFun = function(initValue) {

$scope.initValue = initValue;

};

}

});

app.factory('MyFactory', function () {

    function MyFactory() {
        var self = this;

        self.control-object = {initFun: null};
       
        //Promise called in context of the directive
        SomeHttpService.get(url,params).then(function(response){
             self.control-object.initFun(response.data);
        });
   }

    return new MyFactory();
});

app.factory('MyFactory', function () {

function MyFactory() {

var self = this;

self.control-object = {initFun: null};

//Promise called in context of the directive

SomeHttpService.get(url,params).then(function(response){

self.control-object.initFun(response.data);

});

}

return new MyFactory();

});

ProgrammingTips

Making Aws::SES API to work with ActionMailer

June 10, 2015 Published by: Mahesh M

Aws::SES SMTP integration is a cake walk indeed. But SES API does not directly work with ActionMailer. I think there could be a better approach but for the current requirement I made it work this way:

1. Added SES as a delivery method:

In initializer, add your SES configuration and add the SES client as new delivery method:

ActionMailer::Base.add_delivery_method :ses, Aws::SES::Client,
  :access_key_id     => ENV['AMAZON_ACCESS'],
  :secret_access_key => ENV['AMAZON_SECRET']

ActionMailer::Base.add_delivery_method :ses, Aws::SES::Client,

:access_key_id => ENV['AMAZON_ACCESS'],

:secret_access_key => ENV['AMAZON_SECRET']

You have to specify Region as well. I had already added

AWS_REGION: 'eu-west-1'

1	AWS_REGION: 'eu-west-1'

to my application.yml

2. Asked ActionMailer to use ses delivery method in your environment:

Add the following line to config/environments/<environment>.rb

 config.action_mailer.delivery_method = :ses

1	config.action_mailer.delivery_method = :ses

Once you are done with this you are ready to send mail. Well I also thought the same, but when I ran the code BOOM. So what we dont have is deliver! method in the Aws::SES module. So you extend Aws::SES:Client. I did it in the initializer itself.

3. Added the following code to config/initializer/ses.rb

module Aws
  module SES
    class Client
      def deliver!(mail)
        ses_return = send_email( source: Array(mail.from).first,
                    destination: {
                      to_addresses: mail.destinations
                    },
                    message: {
                      subject: {
                        data: mail.subject
                      },
                      body: {
                        text: {
                          data: mail.body.encoded
                        },
                        html: {
                          data: mail.body.encoded
                        }
                      }
                    })
        return ses_return.message_id
      end
    end
  end   
end

module Aws

module SES

class Client

def deliver!(mail)

ses_return = send_email( source: Array(mail.from).first,

destination: {

to_addresses: mail.destinations

message: {

subject: {

data: mail.subject

body: {

text: {

data: mail.body.encoded

html: {

data: mail.body.encoded

}

})

return ses_return.message_id

end

VOILA! You get back the message ID that the API send back and you can store it to track the delivery status of your mail.

Note: AWS SES provides SMTP service as well, which is easier to integrate but you wont be able to track the deliver from your application. Also SMTP access key pair is different from the access key pair that we use for API (which is global API key pair. I have not tried the IAM setting with this).

Development ProgrammingTips

Auto redirect based on language in nginx

January 9, 2015 Published by: Mahesh M

When you want to do an auto redirect based on the AcceptLanguage parameter sent by the browser the first solution that comes up in Google is this:

map $http_accept_language $lang {
default en;
~pt pt;
~es es;
}

map $http_accept_language $lang {

default en;

~pt pt;

~es es;

}

This will not work because the AcceptLanguage is of the following form:

And Map will always map to the first one and will not respect the priority.

Solution:

Put this in the nginx

location = / {
rewrite_by_lua '
for lang in (ngx.var.http_accept_language .. ","):gmatch("([^,]*),") do
if string.sub(lang, 0, 2) == "en" then
ngx.redirect("/en/")
end
if string.sub(lang, 0, 2) == "es" then
ngx.redirect("/es/")
end
if string.sub(lang, 0, 2) == "pt" then
ngx.redirect("/pt/")
end
end
ngx.redirect("/en/")
';
#rewrite ^/$ /en/ permanent;

# First attempt to serve request as file, then
# as directory, then fall back to displaying a 404.
# Uncomment to enable naxsi on this location
# include /etc/nginx/naxsi.rules
}

location / {
try_files $uri $uri/ =404;
}

location = / {

rewrite_by_lua '

for lang in (ngx.var.http_accept_language .. ","):gmatch("([^,]*),") do

if string.sub(lang, 0, 2) == "en" then

ngx.redirect("/en/")

end

if string.sub(lang, 0, 2) == "es" then

ngx.redirect("/es/")

end

if string.sub(lang, 0, 2) == "pt" then

ngx.redirect("/pt/")

end

ngx.redirect("/en/")

#rewrite ^/$ /en/ permanent;

# First attempt to serve request as file, then

# as directory, then fall back to displaying a 404.

# Uncomment to enable naxsi on this location

# include /etc/nginx/naxsi.rules

}

location / {

try_files $uri $uri/ =404;

}

make sure you do :