Play Framework 2.1 - AngularJS routing - best solution?

Question

I am working my way through the AngularJS tutorial. Angular uses it\'s own JS routing mechanism to allow for single page apps. A sample routing file for Angular looks like t

Answer 1

Yes, it's possible to create server-side meta-templates of client-side templates. This offers some unique abilities, as the two methods don't overlap completely. There's also plenty of room for confusion so be sure you know why you're writing a Play block instead of an Angular directive.

Whether or not you should do it remains an open question; it really depends on whether you actually need access to server information in your templates. An example of where I think it would be necessary and appropriate would be for implementing access control in your views.

Now to answer your question. The problem is solved by inlining the partials instead of trying to provide a route for them to be loaded on demand. See http://docs.angularjs.org/api/ng.directive:script.

Here's what the template looks like:

@(id: Long)(implicit request: RequestWithUser[AnyContent])

@import helper._




  
  
  
  
  
  
  
  
  
  


  


  @ngTemplate("phone-list.html") {
    

      

        
Hello @request.user.name
      

      

        

          

          Search: 
          Sort by:
          
            Alphabetical
            Newest
          

        
        

          

          

            

              
              {{phone.name}}
              
{{phone.snippet}}
            
          

        
      
    
  }

  @ngTemplate("phone-detail.html") {
    

    
{{phone.name}}

    
{{phone.description}}

    

      

        
      
    

    

      

        Availability and Networks
        

          
Availability
          
{{availability}}
        
      
    
  }

And the app:

'use strict';

/* App Module */

angular.module('phonecat', ['phonecatFilters', 'phonecatServices']).
  config(['$routeProvider', function($routeProvider) {
  $routeProvider.
      when('/phones', {templateUrl: 'phone-list.html',   controller: PhoneListCtrl}).
      when('/phones/:phoneId', {templateUrl: 'phone-detail.html', controller: PhoneDetailCtrl}).
      otherwise({redirectTo: '/phones'});
}]);

Just include this helper:

@**
 * @ngTemplate
 * Generate an AngularJS inlined template.
 *
 * Note: Do not include scripts in your @template HTML. This will break the template.
 *
 * @param name
 * @param template
 *@
@(name: String)(template: Html)

And make sure to use it within the root scope of your angular app.