app.config(['$translateProvider', 'urlProvider',
   function($translateProvider, urlProvider) {

      ...
      urlProvider.setPid(portletId);

      $translateProvider.useUrlLoader(urlProvider.$get().createResourceUrl('language', 'locale', Liferay.ThemeDisplay.getBCP47LanguageId()));
      $translateProvider.preferredLanguage(Liferay.ThemeDisplay.getBCP47LanguageId());
      ...
   }
]);

@Resource(id = "language")
@CacheResource(keyParam = "locale")
public Map<String, String> getLanguage(@Param String locale) throws Exception {
   Locale localeValue = DEFAULT_LIFERAY_LOCALE;
   if (!Strings.isNullOrEmpty(locale)) {
      localeValue = Locale.forLanguageTag(locale);
   }

   ClassLoader portalClassLoader = PortalClassLoaderUtil.getClassLoader();

   Class c = portalClassLoader.loadClass("com.liferay.portal.language.LanguageResources");
   Field f = c.getDeclaredField("_languageMaps");
   f.setAccessible(true);

   Map<Locale, Map<String, String>> bundles = (Map<Locale, Map<String, String>>) f.get(null);

   return bundles.get(localeValue);
}

<h2 translate>bookmarks</h2>
<div>
   ...
      <thead>
         <tr>
            <th translate>table.id</th>
            <th translate>table.name</th>
            <th translate>table.actions</th>
         </tr>
      </thead>
...

The importance of being valid (in any language)

After getting routing and translations to work I discovered another piece of functionality that was missing from the example portlet: validation. After looking around for Angular validation modules I settled on the Angular auto validate module by Jon Samwell. This seemed to be a pretty non intrusive and easy to use way to add validation to an Angular app. You just need to add a novalidate and ng-submit attribute to your form, some required, ng-maxlength, etc... attributes to your input fields and you're already done on the HTML side:

<form role="form" name="bookmarkForm" ng-submit="store();" novalidate="novalidate">
   <div class="form-group">
      <label for="name" translate>label.name</label>
      <input type="text" ng-model="model.currentBookmark.name" class="form-control" id="name" name="name" ng-minlength="3" ng-maxlength="25" required>
   </div>
   <div class="form-group">
      <label for="description" translate>label.description</label>
      <input type="text" ng-model="model.currentBookmark.description" class="form-control" id="description" name="description" ng-minlength="3" required>
   </div>
   <div class="form-group">
      <label for="url" translate>label.url</label>
      <input type="url" ng-model="model.currentBookmark.url" class="form-control" id="url" name="url" required>
   </div>
   ...
</form>

<?xml version="1.0"?>
<!DOCTYPE liferay-portlet-app PUBLIC "-//Liferay//DTD Portlet Application 6.2.0//EN" "http://www.liferay.com/dtd/liferay-portlet-app_6_2_0.dtd">

<liferay-portlet-app>
   <portlet>
      ...
      <footer-portal-javascript>/angular-portlet/js/jcs-auto-validate.js</footer-portal-javascript>
      ...
   </portlet>
</liferay-portlet-app>

angular.module("app.factories").

   // A custom error message resolver that provides custom error messages defined
   // in the Liferay/portlet language bundles. Uses a prefix key so they don't clash
   // with other Liferay keys and reuses the code from the library itself to
   // replace the {0} values.
   factory('i18nErrorMessageResolver', ['$q', '$translate',
      function($q, $translate) {

         var resolve = function(errorType, el) {
            var defer = $q.defer();

            var prefix = "validation.";
            $translate(prefix + errorType).then(function(message) {
               if (el && el.attr) {
                  try {
                     var parameters = [];
                     var parameter = el.attr('ng-' + errorType);
                     if (parameter === undefined) {
                        parameter = el.attr('data-ng-' + errorType) || el.attr(errorType);
                     }

                     parameters.push(parameter || '');

                     message = message.format(parameters);
                  } catch (e) {}
               }

               defer.resolve(message);
            });

            return defer.promise;
         };

         return {
            resolve: resolve
         };
      }
   ]
);

var app = angular.module(id, ["jcs-autoValidate"]);

app.run(['validator', 'i18nErrorMessageResolver',
   function(validator, i18nErrorMessageResolver) {

      validator.setErrorMessageResolver(i18nErrorMessageResolver.resolve);
   }
]);

Breaking up

In the previous version of the portlet most of the Javascript code was in a limited number of files that, with all the additional changes from this post, would've gotten pretty long. To keep everything short and sweet, we need to split up the existing files into smaller ones in a way that makes them easy to manage. In the Javascript world there are tools like Grunt that can do this, but they're not easy to use in a Maven based project. After looking around I settled on the WRO4J Maven plugin. This enables you to easily merge multiple Javascript (or CSS, ...) files into one, but it can also do other stuff like minimize them etc... . 

The first thing we need to do to make this work is add some stuff to the build plugins section of our pom.xml:

...
<plugin>
   <groupId>org.apache.maven.plugins</groupId>
   <artifactId>maven-war-plugin</artifactId>
   <version>2.6</version>
   <configuration>
      <!--
         Exclude originals of file that will be merged with wro4j
      -->
      <warSourceExcludes>js/controller/*.js,js/service/*.js,js/directive/*.js</warSourceExcludes>
   </configuration>
</plugin>
<plugin>
   <groupId>ro.isdc.wro4j</groupId>
   <artifactId>wro4j-maven-plugin</artifactId>
   <version>1.7.7</version>
   <executions>
      <execution>
         <phase>compile</phase>
         <goals>
            <goal>run</goal>
         </goals>
      </execution>
   </executions>
   <configuration>
      <!-- No space allowed after a comma -->
      <targetGroups>controllers,services,directives</targetGroups>
      <jsDestinationFolder>${project.build.directory}/${project.build.finalName}/js</jsDestinationFolder>
      <contextFolder>${basedir}/src/main/webapp/</contextFolder>
   </configuration>
</plugin>
...

groups {
    controllers {
        js(minimize: false, "/js/controller/Init.js")
        js(minimize: false, "/js/controller/*Controller.js")
    }
    services {
        js(minimize: false, "/js/service/Init.js")
        js(minimize: false, "/js/service/*Factory.js")
        js(minimize: false, "/js/service/ErrorMessageResolver.js")
    }
    directives {
        js(minimize: false, "/js/directive/Init.js")
        js(minimize: false, "/js/directive/*Directive.js")
    }
    all {
        controllers()
        services()
        directives()
    }
}

<?xml version="1.0"?>
<!DOCTYPE liferay-portlet-app PUBLIC "-//Liferay//DTD Portlet Application 6.2.0//EN" "http://www.liferay.com/dtd/liferay-portlet-app_6_2_0.dtd">

<liferay-portlet-app>
   <portlet>
      ...
      <footer-portlet-javascript>/js/controllers.js</footer-portlet-javascript>
      <footer-portlet-javascript>/js/services.js</footer-portlet-javascript>
      <footer-portlet-javascript>/js/directives.js</footer-portlet-javascript>
      ...
   </portlet>
</liferay-portlet-app>

'use strict';

var module = angular.module('app.controllers', []);

angular.module('app.controllers').
   controller("ListCtrl", ['$scope', '$rootScope', '$http', '$timeout', 'bookmarkFactory', '$stateParams',

      function($scope, $rootScope, $http, $timeout, bookmarkFactory, $stateParams) {
         ...
      }
   ]
);

var app = angular.module(id, ["app.controllers"]);

More blogs on Liferay and Java via http://blogs.aca-it.be.