Play Framework 2.1 - AngularJS routage meilleure solution?

Je suis en train de travailler mon chemin à travers le tutoriel AngularJS. Angulaire utilise ses propres JS mécanisme de routage pour permettre single page apps. Un exemple de fichier de routage Angulaire ressemble à ceci:

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

Je suis en train d'essayer de trouver un bon endroit pour stocker mes partiels (Angulaire spécifique des fichiers HTML). Idéalement, j'aimerais que la capacité du modèle à Jouer (c'est à dire comme *.scala.html les fichiers). Je peux le faire à l'aide d'un d'un parcours de jeux fichier comme ceci:

GET     /partials/phone_index       controllers.Application.phone_index

En gros, j'ai des partiels/à l'action d'un contrôleur comme ceci:

def phone_index = Action {
  Ok(views.html.partials.phone_index())
}

La solution, je suis à la recherche est une combinaison de deux idéaux:

  1. Je voudrais avoir une sorte de cartographie qui me permet de visiter n'importe quel fichier sous /partielle/* et récupérer le fichier partiel.
  2. Je souhaite le remplacement d'une route à une partielle, donc je PEUT utiliser un contrôleur d'action pour remplir dynamiquement avec les données (rare).

Des idées?

InformationsquelleAutor Dominic Bou-Samra | 2013-04-18
  1. 32

    Quand j'ai essayé quelque chose de similaire, je suis venu à la conclusion qu'il est préférable de le casser en 2 parties:

    • Utiliser le Jeu comme un backend vous interagissez avec via des appels Ajax
    • Stocker l'angle de modèles dans le Jeu public dossier (quelque chose comme /public/angular/) et utiliser la valeur par défaut AngularJs pour cartographier les modèles

    Je sais que ça n'a pas l'air grand et n'a pas vraiment répondre à votre question sur la façon de le faire, mais en essayant de lier les deux cadres peut être problématique en raison de la façon dont les modèles et les url sont mappés dans Angulaire, et la prestation sera très petits, tout changement implique beaucoup de travail, supprimant ainsi le sans doute le principal avantage de Jouer et Angulaire, développement rapide.

    Cela vous permet également de séparer les préoccupations mieux, si votre projet se développe peut être important que vous pouvez simplement prendre le AngularJS code de loin comme une application autonome de la connexion à un backend, et il fonctionne parfaitement.

    Vous pouvez voir un exemple de code de ce que j'ai dit (basé sur la TODO tutoriel AngularJS) dans ce Github. Je vous préviens, le code n'est pas trop agréable, mais devrait vous donner une idée et en bonus, vous montre comment intégrer le Jasmin en Jeu, pour AngularJS tests unitaires.

    • Je pense que c'est probablement l'approche que j'ai besoin d'aller avec.
    • Ainsi, cette approche ne fonctionne pas si le "jeu.http.le contexte" la propriété est définie. La route va manquer le préfixe contexte et donc d'échouer. Toutes les pensées que la façon de surmonter ce problème?
    InformationsquelleAutor Pere Villega
  2. 4

    L'éventuelle des semences (https://github.com/angyjoe/eventual) est encore une autre façon de construire un Jeu + AngularJS app. Le code est une amie et bien documenté.

    • Vous voudrez peut-être un de divulgation ici, mon vérification suggère que vous êtes l'auteur. Ce qui en soi n'est pas un crime, il ne semble pas être liée information, il suffit de nous de ne pas prendre de bien vouloir publicité trop.
    • C'est bien, comme je l'ai dit, les gens davantage confiance en vous si vous êtes ouvert et dire quelque chose comme Disclosure: I am author of said tool, and it was written in response to this question.
    InformationsquelleAutor user2845946
  3. 3

    Ce ne sera pas répondre directement à votre question, mais j'ai trouvé ceci pour être la meilleure façon de construire le Jeu + Angulaire apps:

    https://github.com/typesafehub/angular-seed-play

    • Ce que je n'aime pas c'est d'utiliser requireJS et webjars au début. Pour moi, cette logique d'ajouter après. (il n'est pas si simple que maven en java comme pour moi). Cela fonctionne bien lorsque l'application est assez grand. Et cela ne change pas ce qui a été dit par +Pere Villega propos de "développement rapide'
    InformationsquelleAutor Alex
  4. 3

    Oui, il est possible de créer de serveur-côté méta-modèles de modèles de. Cette offre des capacités uniques, comme les deux méthodes ne se chevauchent pas complètement. Il y a aussi beaucoup de place pour la confusion, afin d'être sûr que vous savez pourquoi vous êtes à l'écriture d'une pièce de bloc au lieu d'une Angulaire de la directive.

    Si vous devez ou non faire il reste une question ouverte; cela dépend vraiment si vous avez réellement besoin d'avoir accès à des informations sur le serveur dans vos templates. Un exemple de là où je pense qu'il serait nécessaire et approprié serait pour la mise en œuvre du contrôle d'accès à votre point de vue.

    Maintenant pour répondre à votre question. Le problème est résolu par l'in-lining les partiels au lieu d'essayer de fournir un itinéraire pour eux d'être chargés à la demande. Voir http://docs.angularjs.org/api/ng.directive:script.

    Voici ce que le modèle ressemble à:

    @(id: Long)(implicit request: RequestWithUser[AnyContent])
@import helper._
<!doctype html>
<html lang="en" ng-app="phonecat">
<head>
<meta charset="utf-8">
<title>Google Phone Gallery</title>
<link rel="stylesheet" href="css/app.css">
<link rel="stylesheet" href="css/bootstrap.css">
<script src="lib/angular/angular.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/filters.js"></script>
<script src="js/services.js"></script>
<script src="lib/angular/angular-resource.js"></script>
</head>
<body>
<div ng-view></div>
@ngTemplate("phone-list.html") {
<div class="container-fluid">
<div class="row-fluid">
<div class="span12">Hello @request.user.name</div>
</div>
<div class="row-fluid">
<div class="span2">
<!--Sidebar content-->
Search: <input ng-model="query">
Sort by:
<select ng-model="orderProp">
<option value="name">Alphabetical</option>
<option value="age">Newest</option>
</select>
</div>
<div class="span10">
<!--Body content-->
<ul class="phones">
<li ng-repeat="phone in phones | filter:query | orderBy:orderProp" class="thumbnail">
<a href="#/phones/{{phone.id}}" class="thumb"><img ng-src="{{phone.imageUrl}}"></a>
<a href="#/phones/{{phone.id}}">{{phone.name}}</a>
<p>{{phone.snippet}}</p>
</li>
</ul>
</div>
</div>
</div>
}
@ngTemplate("phone-detail.html") {
<img ng-src="{{mainImageUrl}}" class="phone">
<h1>{{phone.name}}</h1>
<p>{{phone.description}}</p>
<ul class="phone-thumbs">
<li ng-repeat="img in phone.images">
<img ng-src="{{img}}" ng-click="setImage(img)">
</li>
</ul>
<ul class="specs">
<li>
<span>Availability and Networks</span>
<dl>
<dt>Availability</dt>
<dd ng-repeat="availability in phone.availability">{{availability}}</dd>
</dl>
</li>
</ul>
}
</body>
</html>

    Et de l'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'});
}]);

    Il suffit d'inclure ce 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)
<script type="text/ng-template" id="@name">@template</script>

    Et assurez-vous de l'utiliser à l'intérieur de la racine de la portée angulaire de votre application.

    InformationsquelleAutor dbaumann
  5. 1

    Pour la question #1 vous pouvez introduire une route comme ceci:

    /partials/:view    controllers.Application.showView(view:String)

    Puis dans votre contrôleur, vous auriez besoin de la carte d'afficher le nom réel:

    Map("phone_index" -> views.html.partials.phone_index())

    Vous pourriez vouloir rendre les modèles de paresseux ou d'exiger que la demande d'être présent, alors vous devriez probablement faire quelque chose comme ceci:

    val routes = Map(
"phone_index" -> { implicit r:RequestHeader => 
views.html.partials.phone_index()) 
}

    Votre action devrait ressembler à quelque chose comme ceci:

    def showView(view:String) = 
Action { implicit r =>
routes(view)
}

    Si vous voulez un contrôleur spécifique de la méthode pour un certain itinéraire (question #2) vous ajoutez simplement un itinéraire ci-dessus la dynamique:

    /partials/specific    controllers.Application.specific()
    • Ce serait le travail. Mais il nécessite l'utilisation d'une carte de l'itinéraire noms de contrôleurs. C'est pas une quantité énorme de mieux. Je vous remercie bien. J'espère que ça aidera quelqu'un d'autre.
    InformationsquelleAutor EECOLOR
  6. 1

    Je pense vraiment que ce n'est pas une très bonne idée, même s'il provient d'une respectueusement esprit, en effet.

    Je pense que c'est une très bonne pratique de laisser chaque pense que par défaut (convention over configuration principe), ce qui signifie pour moi que nous avons sans doute plus d'intérêt à garder chaque Paradigmes (Lecture et AngularJS), séparés l'un ou les deux pourraient évoluer dans le proche ou le lointain avenir, ce qui aura à son coût pour la maintenance du code.

    Le deuxième point très important est la capacité de test, si vous mélangez à la fois toutes les technos, vous vous retrouverez avec un mélange de venir avec réelle bonne couverture de tests dans les deux côté de votre application.
    Cheers

    InformationsquelleAutor Abderrazak BOUADMA
  7. 1

    Cela pourrait ne pas répondre à la question exactement, mais vous pouvez essayer de suivre ce projet, comme il semble bon exemple à construire Lecture/scala/Angulaire apps:

    https://github.com/lashford/modern-web-template#master

    http://typesafe.com/activator/template/modern-web-template

    InformationsquelleAutor Seifedine Tamallah