如何动态地设置AngularjJS基本URL以获取环境变量？ [英] How to set AngularjJS base URL dynamically based on fetched environment variable?
问题描述
我有一个开发和生产环境，使我的URL的不同：
生产：
www.exmaple.com/page
开发：
dev.environment /项目/页
我知道我可以在AngularJS设置基本网址
＆LT;基地的HREF =/项目/'/＆GT;
但这并不能帮助我在这里。之前，我打开我的AngularJS应用程序，我获取一个配置文件（在app.js，与 .RUN 语句，其内容具有环境变量：
]）。运行（[
$ rootScope'，
$ HTTP，
功能 （
$ rootScope，
$ HTTP
）{
变种configDeferred = $ q.defer（）;
//获取配置和设置API
$ http.get（'config.json'），然后（函数（响应）{
$ rootScope.config = response.data;
configDeferred.resolve（）;
}）;
//等待加载的配置，然后进入状态
$ rootScope。$在（'$ stateChangeStart'，函数（事件，接下来，电流）{
。事件preventDefault（）;
$ q.all（[configDeferred.promise]）。然后（函数（）{
$ state.transitionTo（next.name）;
返回;
}）;
}）;
有没有办法动态设置基本URL的基础上，AngularJS一个获取配置文件（也许用的.htaccess）？
尝试1：
尝试通过 .RUN 来获得配置，并通过NG-HREF设置基本网址：
编辑code以下行我app.js：
//获取配置和设置API
$ http.get（'config.json'），然后（函数（响应）{
$ rootScope.config = response.data;
$ rootScope.baseUrl = response.data.baseUrl; // '/项目/'
configDeferred.resolve（）;
}）;
在我的index.html：
＆LT;基础NG-HREF ={{的baseUrl}}/＆GT;
看起来这是行不通的：当我改变标签NG-HREF的href属性，它正确加载的内容，但改变了我的网址为 dev.environment /页 dev.environment /项目/页>
更新： 配置文件：
{
模式：发展，
的baseUrl：/项目/
}
我personnaly做这种东西与咕噜。
当我跑我的角度，应用程序我有多个任务：
＆GT;咕噜运行--target =开发
＆GT;咕噜运行--target = PROD
＆GT;咕噜构建--target =开发
＆GT;咕噜构建--target = PROD
＆GT;等等...
然后咕噜做字符串替换成 grunt- preprocess 模块的帮助：
我的 constants.tpl.js 文件被解析：
[...]
的baseUrl：/ * @echo ENV_WS_URL * /'，
[...]
和URL是稀少。
有无限的可能性（字符串替换，文件拷贝等）。
与繁重的做这确保dev的配置文件不进去的生产为例。
我可以把更多的细节，如果你有兴趣，但我只是想告诉你一个不同的方法。
编辑gruntFile例如：
使用严格的;
module.exports =功能（咕噜）{
/ **
*检索当前目标
* /
VAR的目标= grunt.option（'目标'）|| 开发;
VAR availableTargets = [
'开发'，
督促
]。
/ **
*负荷的环境，特定的变量
* /
VAR envConfig = grunt.file.readJSON（'触摸屏的配置'+目标+'.json'）;
/ **
*这是配置对象咕噜用来给每个插件的
*指示。
* /
grunt.initConfig（{
ENV：envConfig，
/ ********* /
/ *建立文件到一个特定的包膜或模式* /
/ ********* /
preprocess：{
选项：{
背景：{
ENV_WS_URL：'＆LT;％= env.wsUrl％＆GT;
}
}，
常量：{
SRC：constants.tpl.js，
DEST：constants.js
}
}，
因果报应：{
单元： {
CONFIGFILE：'＆LT;％= src.karma％＆GT;'，
autoWatch：假的，
singleRun：真
}，
看： {
CONFIGFILE：'＆LT;％= src.karma％＆GT;'，
autoWatch：真正的，
singleRun：假的
}
}
}）;
/ **************** /
/ *插件加载* /
/ **************** /
grunt.loadNpmTasks（'grunt- preprocess'）;
/ ******************* /
/ *可用的任务* /
/ ******************* /
grunt.registerTask（'跑'，'运行任务，启动Web服务器开发的一部分'，['$ P $ pprocess：常量']）;
};
现在，命令：
＆GT;咕噜运行--target =开发
将创建一个新的文件与网址
I have a development and production environment in which my URL's differ:
production:
www.exmaple.com/page
development:
dev.environment/project/page
I know that I can set the base URL in AngularJS with the
<base href='/project/' />
but that doesn't help me out here. Before I load my AngularJS application I fetch a config file (in app.js, with the .run statement, which reads a variable that has the environment:
]).run([
'$rootScope',
'$http',
function (
$rootScope,
$http
) {
var configDeferred = $q.defer();
// fetch config and set the API
$http.get('config.json').then(function(response) {
$rootScope.config = response.data;
configDeferred.resolve();
});
// Wait for the config to be loaded, then go to state
$rootScope.$on('$stateChangeStart', function (event, next, current) {
event.preventDefault();
$q.all([configDeferred.promise]).then(function() {
$state.transitionTo(next.name);
return;
});
});
Is there a way to dynamically set the base URL, based on a fetched config file in AngularJS (maybe with a .htaccess)?
Attempt 1:
Try to get the config via .run and set the base url via ng-href:
Edit the following line of code in my app.js:
// fetch config and set the API
$http.get('config.json').then(function(response) {
$rootScope.config = response.data;
$rootScope.baseUrl = response.data.baseUrl; // '/project/'
configDeferred.resolve();
});
and in my index.html:
<base ng-href="{{baseUrl}}" />
It looks like this is not working: when I change the href attribute of tag to ng-href, it loads the content correctly, but changes my URL to dev.environment/page instead of dev.environment/project/page
UPDATE: The config file:
{
"mode": "development",
"baseUrl": "/project/"
}
I personnaly do this kind of stuff with grunt.
When I run my angular-app I have multiple tasks :
> grunt run --target=dev
> grunt run --target=prod
> grunt build --target=dev
> grunt build --target=prod
> etc...
Then grunt do strings replacement with the help of the grunt-preprocess module :
my constants.tpl.js file gets parsed :
[...]
baseUrl: '/* @echo ENV_WS_URL */',
[...]
and the url is populated.
There are endless possibilities (string replacements, file copy, etc).
Doing it with grunt ensure that dev config files do not go in production for example..
I can put more details if you're interested but I only wanted to show you a different approach.
edit gruntFile example :
'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']);
};
Now, the command :
> grunt run --target=dev
will create a new file with an url
这篇关于如何动态地设置AngularjJS基本URL以获取环境变量？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
