All features

Quality Checks

Term Base

Translation History

Translation Memory

Style Guide

Translation Team Management

Professional Translation

Machine Translation

Features

For managers

For translators

For developers

For designers

For enterprises

Solutions

Help Center

Blog

Case Studies

Integrations

Resources

Pricing

Demo

Book a demo

Navigation Bar

Our goal is to provide you with in-depth knowledge regarding localization.

Learn how CMS localization can boost your online presence, expand your reach, and optimize for international success with our informative article.

CMSs: industry state and how to localize them best

Newsletter Sign Up

Localization Blog

Here at <a href="https://lingohub.com">Lingohub</a> we make heavy use of the Spring technology stack in our backend, in particular we use <a href="http://projects.spring.io/spring-social/">Spring Social</a> to implement the OAuth workflow which enables you to login at Lingohub using your GitHub, Facebook, ... accounts. Just yesterday we realized that authentication via Facebook stopped working so we were looking for the reason and a quick workaround. There seems to be an issue with the current release version of the Spring Social plugin that leads to a deserialization error when retrieving the details for a specific user as pointed out in this <a href="https://github.com/spring-projects/spring-social-facebook/issues/181">bug report</a>.

Since we did not want to wait for an official bugfix release to be available we decided to implement our own workaround which seems to work well for now.
<h2>What exactly is the problem?</h2>

Spring Social uses Jackson to deserialize the JSON data returned by the Facebook Graph API. As pointed out in the bug report the class 'VideoUploadLimits' uses an incompatible data type which causes the retrieval of the user details to fail. So as a workaround we decided to implement our own User object for now which simply does not deserialize the problematic response information at all as we do not require that information anyways:
<pre> @SuppressWarnings("serial")
 @JsonIgnoreProperties(ignoreUnknown = true)
 public class LingohubUser extends FacebookObject implements Serializable {
 ...
 <del>private VideoUploadLimits videoUploadLimits;</del>
 ...
 <del>public VideoUploadLimits getVideoUploadLimits() {</del>
 <del>return videoUploadLimits;</del>
 <del>}</del>
 }</pre>

In order to make use of that alternative implementation we had to exchange some other components as well, most notably the FacebookAdapter class which is responsible for retrieving the user details during the OAuth workflow:

<pre> public class LingohubFacebookAdapter extends FacebookAdapter {

 static final String[] FIELDS = {
 ..., 
 "verified", 
 <del>"video_upload_limits",</del> 
 "viewer_can_send_gift", 
 "website", 
 "work"
 };

 public boolean test(Facebook facebook) {
 try {
 facebook.fetchObject("me", LingohubUser.class, FIELDS);
 return true;
 } catch (ApiException e) {
 return false;
 }
 }

 public void setConnectionValues(Facebook fb, ConnectionValues values) {
     LingohubUser profile = fb.fetchObject("me", LingohubUser.class, FIELDS);
 values.setProviderUserId(profile.getId());
 values.setDisplayName(profile.getName());
 values.setProfileUrl(profile.getLink());
 values.setImageUrl(GraphApi.GRAPH_API_URL + profile.getId() + "/picture");
 }

 public UserProfile fetchUserProfile(Facebook fb) {
     LingohubUser profile = fb.fetchObject("me", LingohubUser.class, FIELDS);
 return new UserProfileBuilder().setName(profile.getName())
 .setFirstName(profile.getFirstName())
 .setLastName(profile.getLastName())
 .setEmail(profile.getEmail()).build();
 }
 }</pre>

Finally to make use of this alternative Adapter implementation we implemented our own version of an OAuth2ConnectionFactory as shown below:
<pre> public class LingohubFacebookConnectionFactory 
 extends OAuth2ConnectionFactory&lt;Facebook&gt; {

 public LingohubFacebookConnectionFactory(String appId, String appSecret) {
 this(appId, appSecret, null);
 }

 public LingohubFacebookConnectionFactory(String appId, String appSecret, String appNS) {
 super("facebook", new FacebookServiceProvider(appId, appSecret, appNS), 
 new LingohubFacebookAdapter());
 }
 }</pre>
and to make actual use of that Factory we had to adapt our version of the SocialConfigurerAdapter, for which we already used a custom implementation as shown below:
<pre> @Configuration
 @EnableSocial
 public class LingohubSocialConfigurerAdapter extends SocialConfigurerAdapter {
 ...
 @Override
 public void addConnectionFactories(ConnectionFactoryConfigurer cfConfig, Environment env) {
 cfConfig.addConnectionFactory(
 new TwitterConnectionFactory("twitter.clientId", "twitter.clientSecret"));
 cfConfig.addConnectionFactory(
 new LingohubFacebookConnectionFactory("facebook.clientId", "facebook.clientSecret"));
 ...
 }
 ...
 }</pre>
Voilà, these were all the changes necessary to fix the authentication issues and you are now able to login with your Facebook account again. Of course this is intended only as temporary workaround until a new version of the Spring Social API is available.

Learn how to implement the OAuth workflow using Spring Social and easily log in to Lingohub using your GitHub or Facebook account with our helpful workaround.

Workaround for broken Facebook OAuth using Spring Social

According to <a href="https://en.wikipedia.org/wiki/Ansible" target="_blank">Wikipedia</a>, an ansible is a fictional machine capable of instantaneous or superluminal communication. Typically it is depicted as a lunch-box-sized object with some combination of microphone, speaker, keyboard and display. It can send and receive messages to and from a corresponding device over any distance whatsoever with no delay.

This would be quite a cool device but it is not the Ansible I want to talk about today: <a href="http://www.ansible.com/" target="_blank">Ansible is Simple IT Automation</a>

Ansible is a free (GNU public license) software platform for configuring and managing computers. It is written in Python, but don't worry, you will hardly need to write any Python code. Instead you declare your machine roles in YAML files with some (admittedly) awkward syntax. Because of that, the learning curve is a little bit steep, yet once you have written some configuration the syntax will soon get more familiar. And the best thing about Ansible, it is a <a href="http://www.ansible.com/docker" target="_blank">natural fit for Docker</a>. How? A picture is worth a thousand words:

If you worked already with tools like Chef, Puppet, Salt, CFEngine you think why another configuration tool? Ansible has one important difference compared to all the other tools: The usage of an agent-less architecture. This means you do not have to install any software on the machines you want to manage. Ansible just needs SSH access to these machines and runs the commands in the remote SSH shell. This makes the installation of Ansible much easier because it solves the chicken and egg problem: The agent for the configuration management tool needs to be installed before you can use the configuration management tool.
<h2>So how does Ansible work?</h2>

Ansible is organized in playbooks. These YAML files follow the Ansible syntax and are written in a declarative manner. That means the configuration files don't specify how (which steps have to be executed) to reach the set up state, instead you describe the desired end state.

This is the playbook needed to set up a machine for our Elasticsearch cluster:

[gist id=4037a8e319e6422b2b72]

It tells Ansible the needed roles (more on roles below) of an Elasticsearch node in our cluster. These are:
<ul>
	<li>lingohub.common: installs software packages that we do want to have on all our nodes, eg: htop, build-essential, git, curl, wget, ...</li>
	<li>lingohub.oracle-jdk: since Elasticsearch needs Java, we apply a role that installs the Oracle JDK</li>
	<li>lingohub.elasticsearch: this will set up Elasticsearch and will inject the configuration as needed for a cluster node</li>
	<li>lingohub.gce.logging: sets up <a href="https://cloud.google.com/compute">GCE</a> logger configuration</li>
	<li>stackdriver-ansible-role: sets up configuration for the GCE Stackdriver monitoring tool</li>
</ul>

Now if you run this playbook:
<pre>ansible-playbook --ask-vault-pass --diff elasticsearch.yml</pre>

Ansible will turn these roles into the needed CLI commands and will execute them via SSH on all hosts that belong to the 'elasticsearch' group. This will happen in parallel on all machines, so setting up a whole cluster is as fast as setting up a single machine.

Nice fact: If you run this command a 2nd time, Ansible will tell you that no further changes need to be executed on the remote machine to reach the defined state because it's <a href="https://en.wikipedia.org/wiki/Idempotence" target="_blank">idempotent</a> manner. All Ansible commands are written in an idempotent way. Each command checks which steps have to be taken to reach the defined state. If a command does not need to be executed to reach the expected state, it won't be executed.
<h2>Roles</h2>

These 12 lines of Yaml configuration are obviously not enough information to set up a whole cluster. This is where roles come into play. They are used to specify exactly how to setup a server, e.g. Elasticsearch. A role is a well defined folder/file structure (convention over configuration).

The file "tasks/main.yml" describes the end state for this role, e.g.:
<ul>
	<li>this deb package has to be in state "installed"</li>
	<li>this service has to be set up to run on startup</li>
	<li>this linux user has to be present</li>
	<li>this configuration file has to be written as created by the built-in <a href="http://jinja.pocoo.org/docs/dev/" target="_blank">Jinja2</a> template engine</li>
	<li>...</li>
</ul>

I won't get into detail how you can write your own role, the <a href="http://docs.ansible.com/" target="_blank">Ansible Documentation</a> is a better source for that. And to be honest, I have written just a few roles from scratch. There is a better way to get roles for your servers:

<a href="https://galaxy.ansible.com/" target="_blank">Ansible Galaxy</a> is a directory that hosts roles maintained by the community. So I start to search this directory to find the role that suits our needs best. By doing a search for Elasticsearch roles you will end up with 40 results. Way too many, that is why I came up with a checklist to filter roles. This list ensures that a certain quality level and a minimum of dependencies:
<ul>
	<li>Are the files publicly available? If not I will skip this role immediately.</li>
	<li>Does it depend on other roles? If yes, I will skip taking a closer look and will try to find a standalone role.</li>
	<li>Is there any documentation how to configure this role? If not, I will skip this role immediately.</li>
	<li>For a deeper look, I will checked "defaults/main.yml" to see how configurable the role is (eg. Elasticsearch version, JVM settings, and all other variables that are needed to configure Elasticsearch properly).</li>
	<li>A look at "tasks/main.yml" tells me the scope of the role (the software packages, does it include proper configuration, does it optionally install tools that support a reliable server installation, eg. <a href="https://mmonit.com/monit/" target="_blank">monit</a>).</li>
	<li>Does the role reproduce the steps recommended by the maintainer of the service (in this case Elasticsearch documentation) or does it seem to be written in a "trial and error" manner.</li>
	<li>Are there any vulnerability issues (eg. usage of non configurable standard passwords).</li>
</ul>

As I above mentioned, I haven't invested much time in writing a role from scratch yet, but I really took my time to find the best suitable role in <a href="https://galaxy.ansible.com/" target="_blank">Ansible Galaxy</a>. Nevertheless, I had to adapt every role to our needs, but the roles are built on a solid foundation.

To give you an example for a role, this is the Elasticsearch role that I have used as template for our role: <a href="https://galaxy.ansible.com/list#/roles/711" target="_blank">f500.elasticsearch</a>.

&nbsp;
<h2>Ansible Vault</h2>

Github is a great way to to share playbooks and roles with your team. This works fine till your configuration needs secrets (eg. database passwords, keys for accessing APIs, <a href="https://en.wikipedia.org/wiki/Salt_(cryptography)" target="_blank">Salts</a>). Our internal security policy doesn't allow to store data like this in a repository (and I highly discourage it as well!). So where to store this information? Luckily, Ansible has something called <a href="http://docs.ansible.com/ansible/playbooks_vault.html" target="_blank">Ansible Vault</a>.

If you take a look at the Elasticsearch playbook from above, you will see this entry "vars/credentials.vault.yml". This file holds all our secrets and is encrypted using a choosable cipher. It just can be edited by using the Vault tools and your secret password. The option "--ask-vault-pass" will tell "ansible-playbook" to ask for this password and apply it on all encrypted files before executing the playbook. 
<h2>Ad Hoc Mode</h2>

When starting to use Ansible you do not have to start with writing a playbook. By using the command "ansible -a" you can run any arbitrary CLI command on your machines. Eg.:
<pre>ansible all -a "sudo apt-get upgrade"</pre>

This will run the given command in parallel on all (filters can be given) your machines that are defined in your <a href="http://docs.ansible.com/ansible/intro_inventory.html" target="_blank">inventory</a> and will provide you with the output of the executed remote commands.
<h2>Conclusion</h2>

I hope you enjoyed my introduction to Ansible. Obviously this article can only scratch the surface on what is possible with Ansible. If you really want to give it a try, head over to the Ansible Documentation and start writing your first playbook! If you are using Docker, you will soon see how these two are just a perfect match.

There is one last thing I want to mention why I think Ansible is an awesome configuration management tool. Ansible playbooks and roles are like documentation. The files describe exactly how your system is set up. Do you have a readme in your company: "How to add an Elasticsearch instance to our cluster?", chances are high it is already outdated. That doesn't happen with Ansible.

To get a quick idea of what Ansible is capable of, take a look at this introduction to Ansible. We have overviewed the main questions, from how it works to roles and Ansible Vault.

Ansible or Why Docker is not enough

There is a problem many Angular developers may come across when using Twitter Bootstrap Modals (Overlays). First of all, if you are using Angular with Twitter Bootstrap's Javascript I recommend using <a href="http://angular-ui.github.io/bootstrap/" target="_blank">Angular.ui bootstrap</a>  ⇾  less JS+HTML code  ⇾  less worries.
<h2>What is the problem? - Open a modal at a certain state</h2>

Normally when opening a Modal there is no URL change, so users can't copy the link and go directly to the modal window. Also the back button will not close the modal window and return to the previous page. Same goes for the forward button.
<h2>Solution: modalStateProvider</h2>

I am not pleased with the solution given by the Angular-ui Router <a href="https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#how-to-open-a-dialogmodal-at-a-certain-state" target="_blank">FAQ answer</a>, because I will have more than one "modal states", which results in code duplicates. That's why I found different stackoverflow questions with different solutions<a href="http://stackoverflow.com/questions/24713242/using-ui-router-with-bootstrap-ui-modal" target="_blank">[1]</a><a href="http://stackoverflow.com/questions/13812962/modal-window-with-custom-url-in-angularjs" target="_blank">[2]</a>, but what I want to show in this article is not only the solution of the main problem, but also how you can use it to update the page behind the modal when the modal closes.

Here comes the coded solution, I will describe below how it works in detail.

[gist id="b2cbdb413d9bce1ba0c0"]

The code example has 2 States/URLs:
<ol>
	<li>Page with a list of projects</li>
	<li>Modal window for creating a project</li>
</ol>

A link to "projects.new" will automatically open up the modal window. After creating a project, the list of projects should automatically be updated (without requesting the projects list again). This is accomplished by setting an attribute called "modalResult" on the parent state ("^" = "projects").

In Detail: <a href="http://angular-ui.github.io/bootstrap/#/modal" target="_blank">Angular-ui Bootstrap Modal</a> automatically adds 2 $scope functions: $close(result) and $dismiss(reason).
I am using $close to pass a result to the success callback function of the 'closing' event of the modal instance.

To get the result in the parent controller/state you need to $watch the current state modalResult. If there is a result, it means the modal has closed by successfully creating a project and you can add the project to the projects array.

I think the whole workflow is not so easy to explain, but if you think it through it should make some sense ;)  If you have any questions or improvement suggestions - feel free to comment below!

[1] <a href="http://stackoverflow.com/questions/24713242/using-ui-router-with-bootstrap-ui-modal" rel="noreferrer">http://stackoverflow.com/questions/24713242/using-ui-router-with-bootstrap-ui-modal</a>
[2] <a href="http://stackoverflow.com/questions/13812962/modal-window-with-custom-url-in-angularjs" rel="noreferrer">http://stackoverflow.com/questions/13812962/modal-window-with-custom-url-in-angularjs</a>

Read the advice on using the Bootstrap Modal window with a custom URL in AngularJS in this article. Detailed overview of the challenge and solution in our blog

Bootstrap Modal window with custom URL in AngularJS

Recently, the first AngularJS conference in Europe, <a href="https://twitter.com/ngeurope" target="_blank">ng-europe</a>, took place in Paris. The future of Angular and beyond was the main topic in all different kind of talks. How will the new JavaScript ES6 implemented in Angular 2.0 by the <a href="https://angularjs.org/" target="_blank">AngularJS</a> Team?
Angular 1.3 is already out and mainly focuses on better performance. Compared to version 1.2, DOM manipulation is 4.4 times faster and there’s 73% less garbage to collect. At this moment the Angular team is working hard on implementing Angular 2.0. The core will heavily change and the power of ES6 will be all over the place.<a href="http://blog.ae.be/ng-europe-2014-highlights/" target="_blank">\[1\]</a> That's why I will first give some information about ECMAScript 6 - the new version of JavaScript's core.

<h2 class="p1">ES6 (ECMAScript 6)</h2>
"Harmony" (code name of JavaScript's ES6) is still work in progress, but the official <a href="https://twitter.com/awbjs/status/474662357516689410" target="_blank">release date</a> should be in June 2015. The new version adds significant new syntax for writing complex applications, including classes and modules, but defines them semantically in the same terms as ES5 strict mode. Other new features include generators and generator expressions, arrow functions, binary data, collections (maps, sets and weak maps), promises and default parameters.
\[gist id=2cadbb7f2e37888ad322\]
The real question is: When can we use this new features? Now!? Browser vendors are working hard to implement this and the latest browsers are shipping big parts of the specification already. This <a href="http://kangax.github.io/compat-table/es6/" target="_blank">website</a> tracks the progress of the latest browsers. You can see a lot of red in this table - that's why Traceur (compiles ES6 to ES5) comes to the rescue. --> So that your code will work in all modern browsers!
In this <a href="https://www.youtube.com/watch?v=iij5RHKi66o" target="_blank">talk</a>, Erik from the AngularJS Team explains, which additional features of ES6 will be used in Angular 2.0 and how <a href="https://github.com/google/traceur-compiler" target="_blank">Traceur</a> works. There is also a Chrome extension named "<a href="https://chrome.google.com/webstore/detail/es6-repl/alploljligeomonipppgaahpkenfnfkn" target="_blank">ES6 transpiler based on Traceur</a>" where you can try out your latest ES6 code ;)

<h2 class="p1">AtScript (Angular Language Extension)</h2>
The goal of <a href="http://sdtimes.com/atscript-googles-new-superset-javascript-runtime/" target="_blank">AtScript</a> is to enhance the JS language (and also make programming Angular better) with these missing features:

<ul>
<li class="p1">Type annotations
<ul>
<li class="p1">Allows tools & IDEs to be awesome (better code autocompletion)</li>
<li class="p1">No more JSDoc comments</li>
<li class="p1">Type Assertions => catches errors (both in code and in type annotations)</li>
</ul>
</li>
<li class="p1">Field annotations
<ul>
<li class="p1">Generates the constructor of a class, see example below</li>
</ul>
</li>
<li class="p1">Metadata Annotations
<ul>
<li class="p1">e.g. <code>@Description()</code> right before a function</li>
<li class="p1">Will be used in Angular 2.0 for Dependency Injection or Component / Directive descriptions</li>
</ul>
</li>
<li class="p1"><a href="http://en.wikipedia.org/wiki/Type_introspection" target="_blank">Type Introspection</a> with Annotation Support
<ul>
<li class="p1">Consistent API</li>
</ul>
</li>
</ul>
 

\[gist id=bc1fba8b34e18e82f6d1\]

The conclusion of Misko Hevery in his <a href="https://www.youtube.com/watch?v=lGdnh8QSPPk" target="_blank">talk</a> about AtScript was that it is not a new language, it is simply this equation:
<blockquote>AtScript = ES6 + Types + Annotations + Introspections</blockquote>
 
<h2 class="p1">Angular 2.0</h2>

RIP everything you know.
Although Angular will run on ES5 browsers (the current world), changes being made to the core Angular architecture will break every Angular application. I recommend watching this <a href="https://www.youtube.com/watch?v=gNmWybAyBHI" target="_blank">talk</a> for details, which include removal of controllers, current directive definition syntax, $scope, and more.
“We're building AngularJS in ES6 now so you’ll have a framework that’s ready to take full advantage of ES6 as browsers add support,” says the team, though it will of course compile to ES5 code. You can easily write with TypeScript, ES6, ES5, CoffeeScript...whatever you like.
\[gist id=976aca18390315f8c26f\]
At present, you will get the best Angular experience by leveraging AtScript, due to its ability to automatically generate the metadata from language primitives, but it all translates to simple ES5 in the end.
So as we can see the whole web is evolving with ES6. As a front-end developer I think I will definitely not get bored any time soon in this bright-looking future ;)

<h4 class="p1">References:</h4>
<a href="https://www.youtube.com/watch?v=iij5RHKi66o" target="_blank">ES6 in Angular 2.0 by Erik Arvidsson at ng-europe 2014</a>
<a href="http://kangax.github.io/compat-table/es6/" target="_blank">ECMAScript 6 compatibility table</a>
<a href="https://www.youtube.com/watch?v=lGdnh8QSPPk" target="_blank">AtScript by Miško Hevery at ng-europe 2014</a>
<a href="https://docs.google.com/a/lingohub.com/document/d/11YUzC-1d0V1-Q3V0fQ7KSit97HnZoKVygDxpWzEYW0U/edit#heading=h.f20r8bg6mkhp" target="_blank">AtScript Primer (Draft - Angular Design Docs)</a>
<a href="https://drive.google.com/a/bzmedia.com/?pli=1#folders/0B7Ovm8bUYiUDR29iSkEyMk5pVUk" target="_blank">Angular 2.0 Specifications</a>
<a href="https://www.youtube.com/watch?v=gNmWybAyBHI" target="_blank">Angular 2.0 Core by Igor Minar & Tobias Bosch at ng-europe 2014</a>
<a href="https://www.youtube.com/channel/UCEGUP3TJJfMsEM_1y8iviSQ" target="_blank">ng-europe YouTube Channel</a>
Interesting read:

<ul>
<li class="p1"><a href="http://www.michaelbromley.co.uk/blog/267/my-thoughts-on-ngeurope-2014-and-angularjs-2-0" target="_blank">Mike Bromley's ng-europe blogpost</a></li>
<li class="p1">\[1\] <a href="http://blog.ae.be/ng-europe-2014-highlights/" target="_blank">Glenn Dejaeger's ng-europe blogpost</a></li>
</ul>

This article presents a summary of ES6, AtScript, and Angular 2.0. Read amd learn more about

Brace yourselves, future is coming: ES6, AtScript and Angular 2.0

Quite recently the AngularJS Team released the first <a href="https://plus.google.com/+AngularJS/posts/C5y6ZkqXaz3" target="_blank">RELEASE CANDIDATE of AngularJS 1.3</a>. This small AngularJS migration guide should help you if you have any problems migrating from 1.2 to 1.3. I will shortly point out which changes did break our app and then I will show an example of one of the main new features: $asyncValidators
<h3>AngularJS migration: A change that can break stuff</h3>
<h4>$location</h4>

Angular now requires a <code>&lt;base&gt;</code> tag when html5 mode of <code>$location</code> is enabled. Reasoning: Using html5 mode without a <code>&lt;base href="..."&gt;</code> tag makes relative links for images, links, ... relative to the current url if the browser supports the history API. However, if the browser does not support the history API Angular falls back to using the <code>#</code>, and then all those relative links would be broken.

Error: <a href="https://docs.angularjs.org/error/$location/nobase" target="_blank">https://docs.angularjs.org/error/$location/nobase</a>

Solution: [gist id=714c93492ab4d535d105]
<h3>What a great feature: async validation</h3>

We can dump a whole load of custom validation code when switching to Angular 1.3. If you know about Angular's client-side form validation and how forms work in Angular you will understand the following migration step. In general I am using a custom <a href="https://gist.github.com/lpsBetty/3259e966947809465cbe" target="_blank">form group directive</a> for showing client-side and server-side validation errors. I recommend using this, because it saves lots of HTML Code.
<blockquote>Hint: $touched is the new $dirty</blockquote>

AngularJS 1.3 uses $validators instead of $parsers + $formatters for performing validations. This means that when it comes to creating custom validators, we must first create a directive and then include ngModel in order to register the validator onto ngModel.$validators. The code below shows an example of a validator that checks if an attribute like email or username already exists while typing in an input field.

[gist id="0b32be1f7962691556b1"]

Previously, I used a method in the user controller to accomplish a custom validation with $timeout and by using ng-change on the input field. But after the upgrade I can use $asyncValidators which does basically the same.

One thing to keep in mind is that asynchronous validations will NOT run unless all of the prior normal validators (the validators present inside of ngModel.$validators) have passed. This constriction allows for the developer to prevent the validator from making excessive backend calls when the username input data is invalid.

This is why I also changed my HTML Code a bit, e.g. the username 'exists' request should only be send when the length is valid. So I added 'minlength':
<pre> &lt;input type="text" required name="username" ng-model="user.username" user-exists-validator minlength="4" /&gt;</pre>
You can also show an loading animation while the request is made by using the new boolean $pending:

<code class="html">&lt;div ng-if="form.username.$pending"&gt; Checking Username... &lt;/div&gt;</code>

I hope I could help you with this explanation how to use custom validations and dealing with AngularJS migration to 1.3.

If you need more information what changed in Angular 1.3, please see the official <a href="https://github.com/angular/angular.js/blob/master/CHANGELOG.md" target="_blank">CHANGELOG</a>.

Need help to migrate from AngularJS 1.2 to 1.3? Check out our guide. I'll cover key changes and introduce a new feature. Click and learn more ib Lingohub's blog

$touched is the new $dirty - AngularJS Migration Guide 1.2 to 1.3

AngularJS directives can give your visitor a better user experience (UX), e.g. by showing user avatars to make a page look more personal. An email field in your sign-in form could show an avatar next to it, indicating to the user that he typed in the correct email-address. If you have optional input fields in your form, you can hide them by default and make them appear on click, immediately focusing the first one. These approaches are very easy to achieve and reusable with directives.

You can build AngularJS directives in various ways. There are many guides out there already on how you can create custom directives (so I will not describe these basics here):
<ul>
<li><a href="https://docs.angularjs.org/guide/directive" target="_blank">AngularJS: Developer Guide</a></li>
<li><a href="http://www.sitepoint.com/practical-guide-angularjs-directives/" target="_blank">Sidepoint: Practical Guide</a></li>
<li><a title="many more" href="http://lmgtfy.com/?q=angular+directives" target="_blank">...</a></li>
</ul>

I have chosen 3 AngularJS directives that we found useful for improving user experience and we already use them in <a title="Lingohub" href="https://lingohub.com" target="_blank">production</a>.
<h3>1. Gravatar Image</h3>

To show a <a href="http://en.gravatar.com/" target="_blank">gravatar</a> image in your app you need to use the user's email, make it lowercase and md5 hash that string. So it's very wise to use a directive for that, so you can reuse it every time.

\[gist id=34eb31907c19d1c66b0d\]
<h3>2. Focus-Me</h3>

It is really just a small directive, but it's awesome. In the example below the user clicks on a link, where he makes an input visible, which gets automatically focused. So he doesn't need to click in the input field when it shows up.

\[gist id=43be83926cab593ca86c\]
<h3>3. Contenteditable Element Model Binding</h3>

The main reason we want to use a <a href="http://html5demos.com/contenteditable" target="_blank">contenteditable</a> instead of a textarea element is to have no limitations in layout and UI. We use this directive in our <a title="Release of the new translation editor in Lingohub" href="https://lingohub.com/blog/2014/07/release-of-the-new-translation-editor-in-lingohub" target="_blank">editor</a>, to achieve two-way-binding between the HTML of the contenteditable element and ng-model. There is currently no support for ng-model in contenteditable elements ... yet!

\[gist id=696fd2fa529f4951e569\]
<h4>Conclusion: AngularJS directives to improve user experience</h4>

I hope you find one of the described AngularJS directives useful!

To me, directives are the most exciting feature of AngularJS. The ability to create reusable libraries of components that can be added to applications in pure HTML is something incredibly powerful. Because directives are so useful, and not all that hard to write, many people are already creating directives for popular libraries. For example, the AngularJS team has created a set of directives for Bootstrap (who doesn't use it?) called <a href="http://angular-ui.github.io/bootstrap/" target="_blank">UI Bootstrap</a>.
<blockquote>Use AngularJS directives to teach HTML new tricks.</blockquote>

AngularJS directives can improve UX by displaying avatars and confirming email addresses. They can also hide optional input fields initially, making them appear upon clicking. Read our described AngularJS directives article in the Lingohub blog