Configurer l'application android créée par angularjs et phonegap en utilisant les variables

Question

J'ai donc une application angulaire et j'ai créé une application Android hybride en utilisant PhoneGap. Mais actuellement, j'ai un problème -

Dans le code angulaire, il y a beaucoup d'endroits dans les fichiers service et controller où les appels d'API sont faits. Maintenant, le chemin du serveur à partir duquel l'appel API est créé doit être configurable, c'est-à-dire que la modification d'une variable dans un seul fichier doit refléter la modification de tous les fichiers angulaires. J'ai une idée d'utiliser une variable qui pourrait être utilisée comme - Dites la variable est configurableVar; la variable pourrait être utilisée en tant que telle - http://$rootScope.configurableVar/api/call(Je ne sais pas si une variable rootScope pourrait être utilisé avec PhoneGap)

Actuellement, l'appel API est en tant que tel - http://serverpath:port/api/call mais ce serverpath est codé en dur dans chaque les fichiers de contrôleur et de service.

En outre, le fichier config.xml peut-il être utilisé dans ce cas? Si oui, alors comment pourrais-je utiliser la variable créée dans le fichier config.xml dans les fichiers angulaires?

Answer 1

J'avais une situation similaire, je voulais séparer les valeurs variables de l'environnement de production/développement.

au lieu d'utilisation de rootScope.configurableVar $, vous devez utiliser angular constants. Commencez par mettre à jour vos références d'URL d'API avec une constante angulaire.

Ensuite, vous pouvez générer le fichier en utilisant des constantes gulp-ng-config.

Par exemple, permet de dire que vous avez un fichier config.json:

{ 
    "local": { 
    "EnvironmentConfig": { 
     "api": "http://localhost/" 
    } 
    }, 
    "production": { 
    "EnvironmentConfig": { 
     "api": "https://api.production.com/" 
    } 
    } 
} 

Utilisation du plug-in est simple:

gulpNgConfig('myApp.config', { 
    environment: 'production' 
}) 

Et cela va générer le code suivant:

angular.module('myApp.config', []) 
.constant('EnvironmentConfig', {"api": "https://api.production.com/"}); 

Ainsi, pour l'utiliser avec gulp:

var gulp = require('gulp'); 
var gulpNgConfig = require('gulp-ng-config'); 
var rename = require('gulp-rename'); 

gulp.task('config:production', function(){ 
    // this will generate a www/js/config.js file with production values 
    gulp.src('config.json') 
    .pipe(gulpNgConfig('myApp.config', { environment: 'production' })) 
    .pipe(rename('config.js')) 
    .pipe(gulp.dest('www/js')) 
}) 

Pour générer des constantes angulaires, dans le terminal il suffit d'utiliser les éléments suivants:

gulp config:production 

et d'utiliser les constantes dans votre application angularjs juste:

angular.module('myApp.controllers').controller('myController', ['EnvironmentConfig', '$http', function(EnvironmentConfig, $http){ 
    $http.get(EnvironmentConfig.url + '/path'); 
}])