Question

最近我使用Angular Cli一直在使用Angular5，我喜欢的其中一个是环境变量文件：

的src /环境

此处有两个文件environment.prod.ts和environment.ts。我的一个看起来像这样：

// The file contents for the current environment will overwrite these during build.
// The build system defaults to the dev environment which uses `environment.ts`, but if you do
// `ng build --env=prod` then `environment.prod.ts` will be used instead.
// The list of which env maps to which file can be found in `.angular-cli.json`.

export const environment = {
  production: false,

  apiUrl: 'http://intel-api-interactivechoices.azurewebsites.net'
  //apiUrl: 'http://localhost:61006'  
};

我想在AngularJS中使用类似的东西，但到目前为止，我一直无法找到合适的解决方案。我尝试的所有东西似乎都不符合我的要求。

有谁知道实现这一目标的方法？

Answer 1

我在项目中使用的方法是使用常量来创建单独的配置文件：

angular.module('app')
  .constant('additional_config', {
     apiUrl: "url",
     otherVariable: ""
});

并在控制器和服务中使用：

angular.module("app").service('TestService',['$resource','additional_config', function($resource,additional_config){
        console.log(additional_config.apiUrl)
    }
]);

Answer 2

好的，所以这很有趣。我在我的app文件夹中创建了一个名为 environment 的目录，在这里我放了3个文件：

environment.dev.js，environment.prod.js和environment.js

后者用于本地测试，但另外2个具有为我的开发和生产服务器配置的端点。这是我的本地文件：

(function (window) {
    window.__env = window.__env || {};
    //window.__env.apiUrl = 'https://localhost:44313/';
    window.__env.apiUrl = 'https://cormarapi-dev.azurewebsites.net/';
}(this));

然后我编辑了 app.constants.js 文件并执行了此操作：

(function () {
    'use strict';

    var env = {};

    if(window){  
    Object.assign(env, window.__env);
    }    

    angular.module('sapphire.constants', [])
        .constant('simpleCacheDebugging', true)
        .constant('__env', env);
})();

然后我在申请文件之前将文件添加到我的index.html：

<script src="environments/environment.js"></script>

以前我曾用config.apiUrl代替__env.apiUrl的地方。这为本地测试排序了我的问题，但要使其适用于部署，我需要编辑Gruntfile.js。

首先，我推荐了我的复制任务。它已经有一个 dist ，所以我附上了这个：

{
    src: '<%= yeoman.app %>/environments/environment.prod.js',
    dest: '<%= yeoman.dist %>/environments/environment.js'
}

所以现在我的复制任务看起来像这样：

// Copies remaining files to places other tasks can use
copy: {
    build: {
        files: [{
                expand: true,
                dot: true,
                cwd: '<%= yeoman.app %>',
                dest: '<%= yeoman.dist %>',
                src: [
                    '*.{ico,png,txt}',
                    '*.html',
                    'web.config',
                    '/images/{,*/}*.{webp}',
                    'styles/fonts/{,*/}*.*'
                ]
            }, {
                expand: true,
                cwd: '.tmp/images',
                dest: '<%= yeoman.dist %>/images',
                src: ['generated/*']
            }, {
                expand: true,
                cwd: 'bower_components/bootstrap-sass-official/assets/fonts/bootstrap/',
                src: '*',
                dest: '<%= yeoman.dist %>/fonts'
            },
            {
                expand: true,
                cwd: 'bower_components/components-font-awesome/fonts/',
                src: '*',
                dest: '<%= yeoman.dist %>/fonts'
            }
        ]
    },
    dist: {
        files: [{
            src: '<%= yeoman.app %>/environments/environment.prod.js',
            dest: '<%= yeoman.dist %>/environments/environment.js'
        }]
    },
    dev: {
        files: [{
            src: '<%= yeoman.app %>/environments/environment.dev.js',
            dest: '<%= yeoman.dist %>/environments/environment.js'
        }]
    },
    styles: {
        expand: true,
        cwd: '<%= yeoman.app %>/styles',
        dest: '.tmp/styles/',
        src: '{,*/}*.css'
    }
},

最后，我更改了构建任务。我需要为不同的＆＃34;目标＆＃34;制作副本。（我认为我可以通过查看＆＃34; serve＆＃34;任务来完成）。我改成了这个：

grunt.registerTask('build', 'Build for production or dev', function (target) {
    grunt.task.run([
        'clean:dist',
        'wiredep',
        'injector',
        'useminPrepare',
        'concurrent:dist',
        'postcss',
        'ngtemplates',
        'concat',
        'ngAnnotate',
        'copy:build'
    ]);

    switch (target) {
        case 'dev':
        case 'test':
            grunt.task.run(['copy:dev']);
            break;
        default:
            grunt.task.run(['copy:dist']);
            break;
    }

    grunt.task.run([
        'cdnify',
        'cssmin',
        'uglify',
        'filerev',
        'usemin',
        //'htmlmin'
    ]);
});

grunt.registerTask('default', [
    'newer:jshint',
    'newer:jscs',
    'test',
    'build'
]);

就是这样。现在我可以部署而无需每次都更改我的API URL。我希望能帮助别人：）

AngularJs环境变量（API URL）

2 个答案: