web-dev-qa-db-fra.com

Combiner le jeu! Framework 2.xx avec Angular.js

J'ai du mal à ce mariage de 2 cadres apparemment puissants. Il semble que la plupart des choses qui peuvent être faites par 1 peuvent être faites par 2. Comment utiliser au mieux les deux? Y a-t-il des schémas de pensée? Prenons un exemple de base d'une application CRUD - je peux écrire une route mysite/listnames qui correspond à un contrôleur en jeu! et cela rend un modèle avec le code -

@(names:List[String])
@main("Welcome") {

@for( name <- names ){ 
    <p> Hello, @name </p>
}

Notez que main est un modèle d'amorçage typique. Cependant, maintenant, la sortie que cela produit ne semble d'aucune utilité pour Angular si je veux ajouter une zone de saisie pour filtrer ces noms, ou je veux faire quoi que ce soit avec eux. une manière typique de procéder?

1) comment transmettre les données qui arrivent après le rendu du modèle par Play à angular pour une utilisation ultérieure sur le côté client.

2) Est-il conseillé d'utiliser ces deux frameworks ensemble pour une application de haut niveau impliquant un serveur + backend orienté objet mathématique, et une interface utilisateur assez intensive en frontend?

angularjsplayframeworkplayframework-2.0
27
new_web_programmer

Il existe de nombreuses façons de combiner ces deux cadres. Tout dépend de combien vous voulez impliquer chacun d'eux. Par exemple, votre Play 2 l'application ne peut servir la requête/réponse JSON que d'un côté (côté serveur) et AngularJS ferait tout le reste du côté client. Considérant votre exemple pour l'application CRUD de base:

  1. Une manette Play 2:

    def getNames = Action {

  val names = List("Bob","Mike","John")
  Ok(Json.toJson(names)).as(JSON)

}

  2. Votre racine Play pour cela:

    GET /getNames controllers.Application.getNames

  3. un contrôleur AngularJs:

    app.controller('NamesCtrl', function($scope) {
    // get names using AngularJS AJAX API  
    $http.get('/getNames').success(function(data){
        $scope.names = data;
    });
});

  4. Notre HTML:

    <!doctype html>
<html ng-app>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.min.js">  </script>
</head>
<body>
    <div>
        <ul>
            <li ng-repeat=" name in names">{{name}}</li>
        </ul>
    </div>
</body>
</html>

De cette façon, vous séparez complètement les préoccupations, pour votre côté client, peu importe comment le côté serveur est implémenté, la seule chose dont vous avez besoin est un JSON valide en tant que réponse. C'est considéré comme une bonne pratique.

Mais bien sûr, vous pouvez rendre la plupart de votre code HTML à partir de Play 2 et utilisez AngularJS pour certaines choses spécifiques si nécessaire. Tout dépend de la conception que vous choisissez pour votre application.

... comment transmettre les données qui arrivent après le rendu du modèle par Play à angular pour une utilisation ultérieure sur le côté client?

Je ne pense pas que ce soit une bonne idée, mais vous pouvez sûrement le faire en utilisant la directive ngInit comme ceci:

@(message:String)
@main("Welcome") {
<div ng-init="angular_message = @message">
<h1>Hello, {{angular_message}} !</h1>
</div>

}

et vous aurez angular_message dans le scope initialisé avec @message valeur de Play 2 modèle.

Est-il conseillé d'utiliser ces deux frameworks ensemble pour une application de haut niveau impliquant un serveur + backend orienté objet mathématique, et une interface utilisateur assez intensive en frontend?

De mon point de vue, oui, ce sont deux grands cadres et ils fonctionnent parfaitement de concert.

45
arussinov