JavaScript / Angular 中的属性文件

Question

In Java I usually create application.properties in my resource folder and put configs in there.在 Java 中，我通常在我的资源文件夹中创建application.properties并将配置放在那里。

And when I need it I just do Properties prop = new Properties(); prop.load(... my file)当我需要它时，我只需执行Properties prop = new Properties(); prop.load(... my file) Properties prop = new Properties(); prop.load(... my file) and then use prop.getProperty("Something") Properties prop = new Properties(); prop.load(... my file)然后使用prop.getProperty("Something")

I want to do something similar in Javascript我想在 Javascript 中做类似的事情

In my js code I have this:在我的 js 代码中，我有这个：

// REST API Base URL
var baseUrl = "http://localhost:8083/api";

I want this to be in a application.properties file and then load the value.我希望它位于 application.properties 文件中，然后加载该值。

How can I achive this?我怎样才能做到这一点？

Thanks谢谢

Answer 1

In angular 2+ projects and for a good practices you should create environments folder with one file per env like: environment.js, environment.prod.js.在 Angular 2+ 项目和良好实践中，您应该创建每个 env 一个文件的环境文件夹，例如：environment.js、environment.prod.js。

and into file you can export a constant or by default like that并导入文件，您可以导出常量或默认情况下

export const environment = {
  apiUrl: '',
  googleApiKey: '',
}

and you can import this environment in every file you will needed like您可以在需要的每个文件中导入此环境，例如

import { environment } from '{relativePath}/environment/environment.js'

If you create different files for every env like prod.如果您为每个环境创建不同的文件，例如 prod。 You need to replace environment.js for env that you will be build.您需要为将要构建的 env 替换 environment.js。 You have lot of info about this with webpack or other compilers.你有很多关于 webpack 或其他编译器的信息。

I recommend you strongly to develop into a common.js project.我强烈建议你开发成一个 common.js 项目。 It will be more friendly for you importing modules and you will have powerful possibilities of scalable app.导入模块会更友好，您将拥有可扩展应用程序的强大可能性。

But the easy(Ugly) solution is:但简单（丑陋）的解决方案是：

index.html索引.html

<head>
  <script src="environment.js">
  <script src="app.js">
</head>

environment.js环境.js

// Declaring environment like that you will have window scoped the variable
// and you will have global access to environment with window.environment
var environment = {apiUrl: 'https://api.url:4100'}

app.js应用程序.js

function example(){
  console.log(window.environment.apiUrl); // out https://api.url:4100
}

Answer 2

The approach depends on how you build and/or bundle your AngularJs application.该方法取决于您如何构建和/或捆绑 AngularJs 应用程序。 But regardless of that, you'll need to create a config.json file to contain your settings.但无论如何，您都需要创建一个 config.json 文件来包含您的设置。 If using browserify or webpack, you can import that file via require(...), otherwise you can simply request it via ajax before your app bootstraps.如果使用 browserify 或 webpack，您可以通过 require(...) 导入该文件，否则您可以在应用程序引导之前通过 ajax 简单地请求它。

In any of these cases, the best way to use the configuration data throughout your app is to define it as a constant at the bootstrap phase: app.constant('CONFIG', configData);在任何这些情况下，在整个应用程序中使用配置数据的最佳方法是在引导阶段将其定义为常量： app.constant('CONFIG', configData); , assuming that configData is a variable that contains the data from your config.json file. ，假设 configData 是一个包含来自 config.json 文件的数据的变量。

Then you can use dependency injection to provide CONFIG to all your controllers, services and directives.然后你可以使用依赖注入为你的所有控制器、服务和指令提供 CONFIG。

JavaScript / Angular 中的属性文件

问题描述

2 个解决方案

解决方案1
2 2018-11-09 10:03:48

解决方案2
0 2018-11-09 10:27:05

JavaScript / Angular 中的属性文件

问题描述

2 个解决方案

解决方案1 2 2018-11-09 10:03:48

解决方案2 0 2018-11-09 10:27:05

解决方案1
2 2018-11-09 10:03:48

解决方案2
0 2018-11-09 10:27:05