Discussion :

[Maitre2B]

Bonjour à tous,

Dans mon header de page, j'affiche le {{ first_name + last_name }} se trouvant dans $scope du module User :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
var app = angular.module('User', ['ngCookies']);
app.controller('ControllerUser', function($scope, $http, $window, $cookies)
{
  var ApiKey = $cookies.get('api_key');
  console.log(ApiKey);

  $http(
    {method: 'GET',
    url: 'http://exmp.com:1337/user',
    headers: {	'Authorization': ApiKey}
  }).success(function (data){
    $scope.first_name = data.first_name;
    $scope.last_name = data.last_name;
  }).error(function (data){
    console.log("/user error");
    $scope.first_name = "Bienvenue";
    $scope.last_name = "visiteur";
    $scope.message = "Impossible d'afficher vos informations.";
  });

  app.service('myService', function() {
    this.recupData = function () {
        return data;
    }
  });

  $scope.UpdateUser = function () {
   $http(
    {method: 'POST', 
    url: 'http://exmp.com:1337/user',
     headers: {	'Authorization': ApiKey},
    data :{
        "user":{
           "first_name": $scope.first_name,
           "last_name": $scope.last_name,
          }
        } 
  }).
   success(function(response, data) {
	   location.reload();
  }, function(response) {
    console.log("FAIL");
  });
 };
 
});

Ces données sont donc affichées en haut de chaque page.
Le site web est en single page.

Le problème : dans l'un de mes templates, je veux ré-afficher {{ first_name + last_name }} alors que je suis dans le module DetailRequest:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
var app = angular.module("DetailsRequest", ['ngCookies', 'ngRoute', 'User']);
app.controller("ControllerDetailsRequest", function($scope, $cookies, $routeParams, $http, myService){

  var ApiKey = $cookies.get('api_key');
  var request_id = $routeParams.aideid;

  $http(
    {method: 'GET',
    url: 'http://exmp.com:1337/request',
    headers: {'Authorization': ApiKey },
    params: {id: request_id}
  }).success(function (data) {
    console.log(typeof data.skills);
    $scope.aide_name = data.name;
    $scope.aide_description = data.description;
    $scope.aide_date = data.date;
    $scope.aide_skills = data.skills; 
    
    $scope.ex = myService.recupData(); // Récupération de "data" via le service
    console.log(ex);
  }).error(function (data) {  
  })

  $scope.Report = function () {
   $http(
    {method: 'POST', 
    url: 'http://exmp.com:1337/report',
    headers: {'Authorization': ApiKey },
    data :{
     "message": "",
     "request_id": request_id
   }
   }).success(function (){
    }).error(function (response){
    });
  };
});

Il me semble donc qu'il faut utiliser un service pour transférer les données du module User à DetailRequest.
Le code en rouge est ma création du service ainsi que ses injections et appel.
Rien ne fonctionne

J'obtiens l'erreur :
angular.js:12416Error: [$injector:unpr] http://errors.angularjs.org/1.4.5/$injector/unpr?p0=myServiceProvider%20%3C-%20myService%20%3C-%20ControllerDetailsRequest
at Error (native)



De plus, autre problème où je n'ai pas trouvé de réponse du internet:
Etant donné une page HTML où se trouve le <ng-view> et qui donc appel les templates et les charge, nommée main.html
Comment faire que main.html n'apparaisse pas dans l'URL

http://main.html#/rubrique/1/page3 ==> actuellement
http://rubrique/1/page3 ==> ce que je souhaiterais.

Merci à tous pour votre aide et votre temps.

[Invité]

Voici une proposition de solution :

Dans le service, il faut mettre un getter et un setter sur la variable que tu veux stocker.
J'ai un exemple de code d'authentification ou je l'avais fait, mon service stocke un id utilisateur pour une session dans une application WEB :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
var app = angular.module('App', ['ui.bootstrap'])
 
app.controller('MainCtrl', function($scope,$http,stockeIdUtilisateur) {
 
    $scope.identificationUtilisateur = function(){
        /* Test puis validation du couple login-mot de passe */
        $http.post('filtrer.php?action=get_login',
            {
                'email' : $scope.email,
                'motdepasseATester' : $scope.motdepasseATester,
            }
            ).success(function (data, status, headers, config) {
 
                /* Si le Login est raté : */
                if (data == "false"){
                    $scope.informationLogin = "Login raté";
 
                }
 
                /* Si le Login est réussi : */
                else{
                    $scope.informationLogin = "Login réussi" ;
                    $scope.nom  = data.nom;
                    $scope.prenom  = data.prenom;
                    /* console.log(data.id); */
                    stockeIdUtilisateur.setIdUtilisateur(data.id); // Stocke l id dans le service angular pour  que l'application sache qui est l'utilisateur
                    $scope.idUtilisateur = stockeIdUtilisateur.getIdUtilisateur();
                }
            }).error(function(data, status, headers, config){
                alert('pas de connexion vers le serveur');
              });
    }
})
 
/* SERVICE QUI STOCKE L ID  UTILISATEUR APRES LE LOGIN, CEST UTILE POUR UNE APPLICATION MULTI UTILISATEUR DE SAVOIR QUI EST LOGGE*/
.service('stockeIdUtilisateur', function() {
    var Idutilisateur = '';
 
    return {
        getIdUtilisateur: function() {
            return IdUtilisateur;
        },
        setIdUtilisateur: function(value) {
            IdUtilisateur = value;
        }
    };
})

Dans mon code, setIdUtilisateur stocke une variable dans le service, getIdUtilisateur la renvoie aux controleurs qui la demande.

EDIT : Le service permet l'échange de données entre controleurs, mais ce n'est pas sur du tout qu'il permette l'échange de données entre modules !

[Hippocrène]

Bonjour,

C’est assez compliqué, pour moi du moins, de lire ton code, car il est assez mal organisé. Je n’ai pas eu le courage de comprendre le problème :/

Une chose assez simple, pour commencer, est de séparer ses contrôleurs, directives, services et autres trucs dans des fichiers séparés et n’en avoir qu’un par fichier. Par exemple dans ton premier fichier, créer un fichier pour le module, un fichier pour la directive et un fichier pour le service.

Jette un coup d’œil à ce manuel qui décrit comment écrire un code AngularJS de manière plus propre. Ça t’aidera vraiment à organiser ton code :)

En espérant ne pas t’avoir vexé.