Maybe, is expected.. but you don’t have it in mind.

We work with a Resource Localization Service to load from the server the dictionary of translation. It work very well, and you can use filters to add the translated string to your DOM, and when the resources is loaded the module sent a $broadcast event notification:

In one case we need to bind dynamically a .click() event to one <a> element inside a translated string, we can’t accomplish it using the localization filters, for a timing issue (it is out of the scope explain the issue on this article).

To accomplish it, a directive to listen for the $broadcast event sent by the localization module was created, and when the directive receive the event, it filter the dictionary key to get the translated phrase, insert it on the DOM and finally bind the click:


The problem was that in some cases, on page load, the cookie message wasn’t displayed. Later some hard debug, We realize that it was because the directive didn’t catch the $broadcast event. Why? because the $broadcast event happen before the directive be loaded and ready to listen it.

It is possible that a $broadcast event is sent before all the app is loaded, and some part of your app that depends on it, will not catch the event.

We solve it, checking the localize.resourceFileLoaded flag before define the $on listener over the directive. If the resource was loaded previously to the directive initialization, we execute the actions, if not, we define the $on listener to do it when the localize module be ready.  Maybe a more formal solution can be accomplish using promises, but anyway, it will not solve this unexpected issue.

I really love my old theme, it remember me the middle of the 90’s when i started to do serious stuff with the computer.
But is time to update it to something responsive and not so old-fashioned!

Let’s me leave a screenshot on it memory.




My new theme is based on wp-svbtle, i forked it but i don’t commit the changes yet, because it need a lot of refractory and i want to add more features! :)

Happy New Year, Happy New Theme!

Just a quick post.


UPDATE:  Later to post the solution code in the ui-grid issue, it become a native part of this amazing component. Now ui-grid will detect and change the interpolation symbol automatically!


If you use Django, Blade templating (Laravel) or any other system that use the native start {{ and end }} symbol of AngularJS, a common solution is change the symbols used by Angular.


But, you have a problem doing it. When you are working with ui-grid 3.0 (before called ng-grid) the templates of the module use the native start and end symbol of AngularJS,
so the AngularJS expression are not resolved and you get something like that:

Interpolate Symbol Error


For more detail about this problem, please check the Github issue #1576.

A solution is replace the start and end symbol in the template cache of the component.
I modify a solution of johnnadratowski that worked with ng-grid 2.0,
this version is compatible with ui-grid 3.0:

Happy code!

When we have a multi-language site, for SEO or for a better user experience (the user sometimes remember the url) we need i18n routes.

Per example:


With Laravel it is very easy to do!
In our scenario, we can have different URLs for different languages but also we can use subdomain to specify the language, some examples:



Go to the code!!

The first is the first: Detect the site language based in the url

To do it, we will use ServiceProvider a powerful and clear way to bootstrap our app:

In this code, we first search for a subdomain locale, if it is not possible we do a inverse lookup, we search for the domain name and we get the default locale for this domain.

Our configuration file will look something like that:


Now, let’s do the magic in routes.php

Oh, yes! we forget a file, but you can image it, the route.php file per each language. The spanish one:


so, TL;DR;

We bootstrap the locale of our app in a ServiceProvider, then we use Lang::get() to generate dynamically our routes based in a language file.


Easy, yes? but it isn’t not all, in our blade view if we use (and we should) {{ route(‘static.disclaimer’) }} to generate the URLs, they will be generate with the locale specify name :)

Thanks for the help to _ben_lowery and nesl247 from #Laravel IRC.

#UPDATE (25/04/2016)
Service Provider and approach for L5

Locale::getByDomainOrCode() is a facade to a model, in L5 we are storing our locale information on the database, basically the getByDomainOrCode() query the database looking for a domain or a locale code, and return all the row.

I wanted to preload images using AngularJS, i found some articles and more articles, very good both of them, but not what i was searching for. I just want to preload images later the page load to cache them. In my case, i use it with Select2, my dropdown have images that are loaded on open it, if they are not loaded before ;)

There are many ways to preload images, using CSS, native JS or jQuery. I choose to use a native JS method with Angular directive.

and in the end of the html code, before the body tag close

I am using Laravel with Blade templating, but you can adapt it to your framework.

And finally, what is inside of the $countriesFlags variable? If you don’t get it, it is a JSON (json_encode for PHP will help you) of the images filenames, javascript will interpreter it like an array, how you can see in the directive code. Anyway let’s see it render in the HTML, so you can make a more clean idea:


And that is all! a good idea, if you need to preload images dynamically, is adding a scope.$watch() on the directive and treat the cc-filenames like a ngModel.

(Code without testing)


Do you can improve this code or do you have a better way to do it? Please, comment


The websites made with AJAX are difficult to crawl by the search engines, so Google propose to create snapshot of the site to do it crawlable, it means like save a render version of your site and give this version to the search bot and the ‘live’ version of your site to the users.

The basics
Before to follow, i will not rewrite the wheel, so is good idea that you read this article to figure out how we can solve it with AngularJS and how the search engines bot will know that we have a snapshot of our site ready for them and how a snapshot will look.

Creating the snapshots
And now that you know how the bot works and what we should to do with our site to do it crawlable, let’s see how to create the snapshots: yep, i will recommend
other article first, please read it.

So, now that you read the last link, you know that we will need PhantonJS to create the snapshots. If you are using Ubuntu 12.04 LTS i will recommend install PhantonJS using the NodeJS package manager (npm) and not from the official repository, because it install an old version of PhantonJS where it need X server to run anyway.

Solving the ‘flag’ bug
So, you saw this section from the last article link that they use this PhantonJS script called .phantomjs-runner.js to generate the site snapshot, and the script wait to read a flag in the body of our site to know that all the AJAX call are finished and our site is fully rendered before save it. But there is something wrong about it.. do you can figure it? not? okay.. read this comment in the article, but instead to use magic hooks not documented by Angular (that also didn’t work for me in Angular 1.2) we will use a better approach, i modify this module called ng-BlockUI that use interceptors to know when all the http request are completed, and this is the code:

and the flag page body

Don’t forget to add the module injection to your app definition, and if you have some doubt read the module documentation.

and like we are not more using the string ‘ready’ to say that all the http responses are complete, we also should modify the .phantomjs-runner.js script and it now will look like that:


Integrating with Laravel
Until now, we have the PhantonJS script to create the site snapshots and the AngularJS module used to create a flag that communicate to the PhantonJS script that all the AJAX calls are finished so the script can save the totally render page snapshot.

A good idea is to integrate this script call with Laravel creating a new artisan command, we will see soon how to do it, but first a note: In my case the website is multisite, in my case it means that depending the domain the site language change and i want a snapshot for each language then Google can crawl the site for the both domains in different languages, so my .htaccess to say to the engines bot that i have a diferent snapshot depending the domain look like that:

[regexp for ${QUERY_STRING} updated: 2015-05-26]

(i am not like a .htaccess kung-fu master, so i think that i can merge this two rewrite condition in one, but i didn’t have time yet to see it)

Let’s see now the artisan command code that take the arguments from a custom config file:


and the configuration file look like that:


and finally, add the call to artisan cc:snapshots to your cron to have a updated AngularJS site crawlable :)

if you have any doubt, feel free to write a comment.

happy code!

If you will test the crawling using the Google Web Master Tools Fecth as GoogleBot, keep in mind it:

Looking at your blog’s homepage, one thing to keep in mind is that the Fetch as Googlebot feature does not parse the content that it fetches. So when you submit , it fetches that URL. After fetching the URL, it doesn’t parse it to check for the “fragment” meta tag, it just returns it to you. However, if you fetch! , then it should rewrite the URL and fetch the URL .

When we crawl and index your pages, we’ll notice the meta-tag and act accordingly. It’s just the Fetch as Googlebot feature that doesn’t check for meta-tags, and instead just returns the raw content.




We will see a quick example of how to add animation support to Angular using the new ngAnimate module and animate.css library, also we will use LESS to do it more clear and transparent for Angular.

Let’s start..

Like maybe do you know, the development team of Angular put out the animation behavior from the AngularJS core and one of reason to take this decision was to support easily third party libraries.

We can use animate.css without use ngAnimate module, just like the documentation of the library describe to use it, but it will be a bit dirty and messy, so let’s do it in a more elegant way, we will use ngAnimate to add animation support to our directives in a legacy way and LESS to mixins the animate.css class with the ngAnimate module classes.

First, do you need to have some knowledge of how ngAnimate works, i will recommend this article Remastered Animation in AngularJS 1.2 and more precise this section, because here i will use a ngShow and ngHide directive example.

So in resume, ngAnimate can manage all the animation by CSS adding dynamically subclass to our element class when it start and finish an action (in our directive example case), so we will add the animate.css class like mixins to this subclasses and to do it we will use LESS.


remember to add support for ngAnimate in your Angular app

and now you can try it (don’t forget to add the class to the element)

Easy? yes, it is when you figure how to use it in a good way.

Also i want to recommend this article to use Laravel with Bootstrap, Bower and Grunt,

Happy coding!



We will implement the Datapicker for Bootstrap using AngularJS that is more beautiful than the jQuery UI datepicker because keep the bootstrap style, so we will need warp the datepicker in an AngularJS directive and it look like that:

(in this case on the onRender event i am telling to the Datapicker that only allow dates <= today)

to use the directive on the view, this will be the html code:

So, now every time that the datapicker changeDate event occurs we will update the ng-model value.


Something you will prefer also call an AngularJS controller method from the datapicker onChange event, one of the best way to implement it and still keeping directive’s free dependency is passing the controller method via html attribute to the directive, so better see a code example (i will avoid the myApp initialization):



(be aware of the x-bt-date-picker=”myFn” in the second line)

and finally, the directive with the changes:

How do you can see we are passing the controller method like a directive attribute doing the directive more reusable and keeping it free of dependency injection


For further understanding of what and how we are doing all the magic here, please refer to this links AngularJS and scope.$apply and Angular.js binding to jQuery UI.

But if you are lazy and you don’t mind about the datepicker style you can use the UI Bootstrap for AngularJS

Issac Asimov speaking about the internet before it really was accessible in ours home and how it would change the learning way, for me, internet was my best teacher ever

what about you?