AngularJS : Routing / t'chat / View

Salut,

Pour tes questions, tu as toutes les réponses dans les tutos & formations ;)

Salut,

1) Pour enlever le #, tu dois jouer avec le locationProvider et la fonction html5Mode(). pour le .html, c'est une question de serveur plutot a mon sens et ce n'est pas lie a Angular.

2) Tu as deux solutions, soit du polling (tu appelles une url toutes les x secondes), soit du push. Pour le push tu peux utiliser un service externe (comme Pusher par exemple) ou bien utiliser les websockets et le faire toi meme.

3) Je ferais un ng-if sur ton header avec la condition qu'un utilisateur est bien connecte ou non.

Merci énormément prbaron .

1) D'après des amis (qui m'ont engueuler car il y avait le .html), c'est parce que je faisais mal mon routing.
Bien content d'avoir une personne me confirmant que c'est côté serveur.

2) La première solution n'est-elle pas un peu cra-crade ? Ca ne risque pas de saturer l'API ?

3) Je vais regarder au niveau du ng-if ! Merci beaucoup !

Si le polling c'est crade mais c'est le plus simple. Avec des services comme Pusher qui sont gratuits pour des petits projets, c'est dommage d'utiliser du polling.

J'ai essayé de faire un Poller dans un service, c'est à dire faire un GET /myroute dans une fonction qui est rappelée.

 var my_data = [];
  var poller = function() {
    console.log("Poller enter")
    $http(
        {method: 'GET', 
        url: $rootScope.URL+ 'chat',
        headers: { 'Authorization': ApiKey},
        params :{
                "id" : "e5cc4ab231fcc5448df4669e7ca9f3e6"
           }
    }).then(function(result) {
      return result;
      console.log(my_data);
      $timeout(poller, 1000);
    });

  };
  poller();

  return {
    data: my_data
  };

Quand je regarde la console, je vois bien que les donnnées sont reçues toutes les secondes.
Le problème, c'est que je n'arrive pas à recevoir ces connées dans mon controller.

Voilà ce que j'ai essayé

$scope.dialogue = ChatPoller.my_data ;
$scope.dialogue = ChatPoller.data ;
$scope.dialogue = ChatPoller.poller.data ;
$scope.dialogue = ChatPoller.poller.my_data ;
$scope.dialogue = ChatPoller.poller().data ;

De plus, j'aimerais pouvoir changer le paramètre ID du http GET.
Comment faire pour envoyer des variables à un service ?

Tu dois assigner ta variable dans ton .then() tu n'as pas de watcher sur la requête http.

si le code précédent est dans un service, ton service ne doit se charger que d'envoyer la requête http. C'est ton controller/component (si Angular 1.5) qui doit se charger de faire le polling.

Comment faire pour envoyer des variables à un service ?
Ceci est expliqué dans la formation Angular de ce site :).

Merci pour tes réponses prbaron.

tu n'as pas de watcher sur la requête http
Je dois donc en mettre un ?
Après avoir regardé sur internet, c'est une directive qui lance une fonction lorsqu'il y a un changement dans la view.
Je ne vois pas comment l'utilisation de $watch est pertinent pour faire un t'chat /:

Tu dois assigner ta variable dans ton .then()

Donc comme ça ?

var my_data = [];

    $http(
        {method: 'GET', 
        url: $rootScope.URL+ 'chat',
        headers: { 'Authorization': ApiKey},
        params :{
                "id" : "e5cc4ab231fcc5448df4669e7ca9f3e6"
           }
    }).then(function(result) {
       my_data = result;
       console.log(my_data);
    });

  return {
    data: my_data
  };

Il n'y a pas le $watch pour l'instant.
Mais comment faire pour récupérer ma variable my_data ?

Les deux exemples qui suivent ne fonctionnent pas. (J'ai bien injecté le service)

$scope.dialogue = ChatPoller.my_data ;
$scope.dialogue = ChatPoller.data ;

Je me suis mal exprimé, tu ne peux pas mettre de watcher dans ton service. C'est donc pour cela que tu ne dois que t'occuper de la requete http dans ton service et gérer le polling dans ton Controller.

Auriez-vous une idée de pourquoi je n'arrive pas à récupérer les données via mon service ?

app.controller("ControllerChat", function($rootScope, $scope, $cookies, $routeParams, $http, $timeout, ChatPoller){

    $scope.dialogue = ChatPoller.getChat();
    console.log($scope.dialogue)   // AFFICHE  "UNDEFINED"
});

app.service("ChatPoller", function ($rootScope, $http, $timeout, $cookies, $q) {

    var ApiKey = $cookies.get('api_key'); 
    var dialogue = undefined;

    return {
        getChat: function() {            
            $http(
                {method: 'GET', 
                url: $rootScope.URL+ 'chat',
                headers: { 'Authorization': ApiKey},
                params :{
                    "id" : "e5cc4ab231fcc5448df4669e7ca9f3e6"
                }
            }).then(function(result) {
                dialogue = result;
                console.log(result.data.messages)   // AFFICHE BIEN LES DONNEES
                return dialogue;
            });

        }
    };

});

tu dois ecrire return $http ... Pour l'instant getChat ne te retourne rien. de plus avec le return, getChat te retournera une Promise. Tu devras donc ecrire

ChatPoller.getChat().then(function(chat) { $scope.dialogue = chat; });

J'ai cherché st, sur internet et j'arrive finalement à ce code.
Finalement, j'ai une erreur Uncaught SyntaxError: Unexpected token (

app.service("ChatPoller", function ($rootScope, $http, $timeout, $cookies, $q) {

    var ApiKey = $cookies.get('api_key'); 
    var dialogue = undefined;

    getChat: function() { // Uncaught SyntaxError: Unexpected token (

        return $http({
            method: 'GET', 
            url: $rootScope.URL+ 'chat',
            headers: { 'Authorization': ApiKey},
            params :{
                "id" : "e5cc4ab231fcc5448df4669e7ca9f3e6"
            }
            }).then(function(result) {
                dialogue = result;
                //console.log(result.data.messages)
                return dialogue;
            });
    }
});

J'ai essayé de mettre des ";" après les } , de faire des copiers/collers de code devant normalement fonctionner... mais j'ai toujours cette erreur.

ChatPoller.getChat().then(function(chat) {
        $scope.dialogue = chat;
    });
console.log($scope.dialogue)

C'est normal que tu aies undefined dans ton exemple. Ton code est asynchrone. La fonction then sera effectuée quand le résultat sera prêt. Donc dans ton cas, dialogue est undefined au démarrage. Tu dois mettre ton console.log dans ton then.

Ca fonctionne !
Je vais enfin pouvoir avancer sur mon travail ! :)

Merci beaucoup prBaron !