Comment définir AngularjJS URL de base de façon dynamique en fonction extraites de la variable d'environnement?

Personnellement, je fais ce genre de trucs avec grunt.

Quand je lance mon angulaires-app, j'ai plusieurs tâches :

> grunt run --target=dev
> grunt run --target=prod
> grunt build --target=dev
> grunt build --target=prod
> etc...

Puis grunt ne les chaînes de remplacement avec l'aide de la grunt-preprocess module :

mon constants.tpl.js fichier est analysé :

[...]
baseUrl:           '/* @echo ENV_WS_URL */',
[...]

et l'url est rempli.

Il ya des possibilités infinies (chaîne de remplacement, de copie de fichier, etc).

De le faire avec grunt s'assurer que les dev fichiers de configuration, ne pas aller dans la production, par exemple..

Je peux mettre plus de détails si vous êtes intéressé, mais je voulais seulement vous montrer une approche différente.

modifier gruntFile exemple :

'use strict';

module.exports = function(grunt) {

    /**
     * Retrieving current target
     */
    var target = grunt.option('target') || 'dev';
    var availableTargets = [
        'dev',
        'prod'
    ];

    /**
     * Load environment-specific variables
     */
    var envConfig = grunt.file.readJSON('conf.' + target + '.json');

    /**
     * This is the configuration object Grunt uses to give each plugin its
     * instructions.
     */
    grunt.initConfig({
        env: envConfig,       

        /*****************************************/
        /* Build files to a specific env or mode */
        /*****************************************/
        preprocess: {
            options: {
                context: {
                    ENV_WS_URL: '<%= env.wsUrl %>'
                }
            },
            constants: {
                src: 'constants.tpl.js',
                dest: 'constants.js'
            }
        },

        karma: {
            unit: {
                configFile: '<%= src.karma %>',
                autoWatch: false,
                singleRun: true
            },
            watch: {
                configFile: '<%= src.karma %>',
                autoWatch: true,
                singleRun: false
            }
        }

    });


    /****************/
    /* Plugins load */
    /****************/
    grunt.loadNpmTasks('grunt-preprocess');

    /*******************/
    /* Available tasks */
    /*******************/
    grunt.registerTask('run', 'Run task, launch web server for dev part', ['preprocess:constants']);

};

Maintenant, la commande :

> grunt run --target=dev

va créer un nouveau fichier avec une url

en utilisant la base des url peut-être pas la meilleure chose, car il peut aussi visser le fonctionnement de l'ancrage des balises et pourrait conduire à l'onu voulu de navigation. L'approche que vous avez de lire la configuration à partir d'un fichier XML est parfait et c'est ce que j'ai fait:

1.Avant l'initialisation de votre angulaire de l'app lire une variable à partir de votre fichier de configuration:

if (window.XMLHttpRequest) {//code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
}
else {//code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET", "config.xml", false);
xmlhttp.send();
xmlDoc = xmlhttp.responseXML;

laissez votre config.xml avoir un tel champ

<?xml version="1.0" encoding="utf-8" ?>
<config>  
<url>http://dev/ur/</url>
</config>

2.maintenant injecter une constante dans votre application pour cela, j'ai été guidé par Eddiec et Cd

var myApp= angular.module("App", ["ui.router"]).constant('BASE_URL',    
  xmlDoc.getElementsByTagName("url")[0].childNodes[0].nodeValue);

3.vous pouvez utiliser BASE_URL n'importe où dans votre application que vous devez injecter ce est la façon dont je l'ai utilisé pour éviter les chemins codés en dur dans ui.router.js

var routeResolver = function ($stateProvider, $urlRouterProvider,BASE_URL){
  $stateProvider
    .state('home', {
        url: "/Home",
        views: {
            "main-view": {
                templateUrl: BASE_URL+"/views/Home.htm",
                controller: "homeCtrl",
                resolve: {

                }
            }
        }
    })
}
myApp.config(routeResolver);

espère que cela aide les acclamations!