To maintain the application properties like BaseURL's, we used to create a .properties file and retrieve it whenever it is necessary in Java applications.
In front-end angularJS application I can create a .json file and invoke it using $http.get() method. Can I use angularJS constants for this functionality instead of making a $http call? Will there be any security issue if I use URL's in AngularJS constants?
In our projects we used to put all such configuration in one JSON file, i.e.
{
"BASE_URL": "/myApp",
"VERSION": "1.0"
}
and then, convert this file during build phase into angular module, i.e.:
agnular.module("myProject.config", [])
.constant("BASE_URL", "/myApp")
.constant("VERSION", "1.0";
and, finally, append the source code of the app to this config module with appropriate dependency:
angular.module("myProject", ["myProject.config"]);
There are Grunt and gulp plugins that can automate it for you.
Related
I want to do some conditional operations inside my angularjs application for different versions of my app. How do I import the version property of my bower/package.json file from my Angular app locally.
I seem to get module not founderror when trying to import the json file (actually anything that's not .ts file). I am not planning to use $http.get(..) to read the json file asynchronously nor installing node/express packages to use require module.
I want to simply use the ES6 or SystemJS module loader for doing this task. Thank you :)
Solution in AngularJS Controller:
var appVersion = require('electron').remote.app.getVersion();
I'm currently using Webpack to manage configuration for my React JS app.
I have a config.development.json file that is loaded by my development build script. It contains
{
"primary1Color": "pink"
}
It's loaded in the Webpack script as follows
externals: {
configuration: JSON.stringify(require("./config.development.json"))
}
There's a similar set up for production builds.
I reference the config parameters in my app as follows
import configuration from "configuration";
const mainColor = configuration.primary1Color;
This is all working.
However, I'd like to allow the settings to be configured post-deployment---i.e. have the app read the config file when it runs. Then, if customers wish to change the color scheme, they can do so without me having to rebuild the app.
How can I get the app to dynamically load my JSON config file?
You don't have to bundle it with webpack. You can use normal ajax call to load the json or use script.js.
https://github.com/ded/script.js
However if you really want to use webpack loader, you can try external-loader.
https://github.com/sheerun/external-loader
More discussion here:
"Require external (unmanaged) file"
I think the best approach would be to create an API endpoint that react interacts with to load them.
How can you package an angular module with its own translations stored in json files, without harming or needing extra config from the host app? This module should be able to exist as a bower dependency.
Basically I want the templates (directives) in my module to set the correct values, based on the $translate.use() of the main (ng-app) module. This without any concatenating of files or special config required by the main app. This would allow me to quickly add the module to various applications. You would just include the module in your app config angular.module('my-app', ['my-translated-module]); and it would be able to render the translations correctly as soon as you're starting to use the directive. The config of the translation is of course in the config section of 'my-translated-module'
For example: think of a login form with a "sign up" and "login" button. I want to have it this as a separate module/directive, so different applications could reuse that part, without having the duplicate the translations. If the module gets an update, i just need to do a bower update on my main app, rerun
I'm on angular 1.5 and using the angular-translate library by pascal precht - with the static file loader.
I now, use angularJS, requireJS, bootstrap to structure my project.Just like the title.Because of all router configured in app.js can make this file be so large and difficult to maintain in the future.So is existing some solution to solve it?Thanks.
Yes, definitely. We actually have a routing config file in each section of our site. It keeps it a lot more organized.
In the JS file you want to configure it you will just need to get a reference to your angular module and chain your config file off it. This is done by simply writing our your module as you would without the dependency brackets like this:
angular.module('myApp').config('configForThisRoute',function($stateProvider){
//define your states as usual
}
You can add your angularjs configuration in any .js file or you can give any name of file, but this file must be included first in html.
I have created a directive that uses angular-translate and it is working fine with this configuration :
$translateProvider.useSanitizeValueStrategy('escape');
$translateProvider.useStaticFilesLoader({
prefix: 'i18n/messages_',
suffix: '.json'
});
$translateProvider.preferredLanguage('fr');
$translateProvider.fallbackLanguage('fr');
$translateProvider.useLocalStorage();
and two files in i18n folders :
* messages_en.json
* messages_fr.json
Now I want this directive to be usable in another angular application so I use it as a bower dependency of my new application with all necessary .js and .html needed but the json files in a single .js file using templateCache.
The directive is working in my new application, however my new application is trying to load the json file from http://localhost:9000/i18n/messages_fr.json ans gives a 404 error.
This error is normal as I do not include the json files in my dependency, however I do not not know where and how I should. If I include them in my bower depdency or add it in templateCache, it is not working.
An easy solution is to copy the file in a i18n/ folder of my application but it is not what I want, I want to reuse the files defined with my directive. I tried modifying the useStatidFilesLoader attributes but without success so far.
EDIT
I figured the real problem was I intended to use two configurations of the translateProvider :
- one with common messages file in my dependency config
- another one with another message file name in my new application config.
But as it is a provider, hence a singleton, only one configuration gets executed. So it is not possible to load messages from two different files or I missed something in ngtranslate configuration.
What I did is including the common messages file in my bower dependency and add a grunt task in my new application that merge this message file with my new application message file. To do this I use grunt-merge-json.
I had the same question and here is your answer. All you need is
$translateProvider.useLoaderCache('$templateCache');
Would it be possible to support the $templateCache?