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();
Related
I've started using webpack in quite a large code base and have been using ES6's import statement to load the required dependencies for each module.
My file structure aims to be component based, with all the pieces specific to a component inside that component's folder. For example, the component file itself, and then templates, stylesheets, services, filters, etc, also specific to that component. Then we may have a generic service folder inside that module for services that are not specific to a particular component. eg:
- my-module
- component-a
- component_a.component.js
- component_a.component.spec.js
- component_a.html
- component_a.scss
- services
- some_service.service.js
main.module.js
main.run.js
main.config.js
My problem is that the main.module.js file is becoming unmaintainable, as I manually import all the required dependencies into this file and then register them into the angular world as required. eg:
import componentA from './component-a/component_a.component';
import someService from './services/some_service.service;
angular
.module('myModule', [])
.component('componentA', componentA)
.service('someService', someService);
You can imagine what this starts to look like when you have 10+ components. I've struggled to find a good solution for this problem, does anyone have any suggestions? Is there a best practice approach here?
I guess, every component/controller/service etc. can connect itself to the app in their own file.
Like you have got a file ome_service.service.js and inside you write:
myApp.service('omeService', function(){
var app = this;
// service stuff
});
So the registration is not in your main.module.js but in every file itself.
Although, you need to expose your app variable to be globally available. With a bundler like webpack this is easily handled. Gene Conroy-Jones wrote a nice post about how to make it possible via webpack here: https://medium.com/#drgenejones/using-webpack-with-legacy-angular-spas-automating-imports-using-require-context-58e0e9cc6e9c
With this approach, every new component would handle its registration on their own, and the central app would not have to carry all those imports.
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.
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 am new to TypeScript but trying to work out a way to manage my environment variables as I deploy and build through each. We are using gulp and I found gulp-ng-config. Issue with this is it writes out a js file but the rest of my site is written in TypeScript. So it creates this JS.
angular.module('myModule', []).constant('EnvironmentConfig', {"environment":"dev"});
In my TypeScript code I want to be able to access this constant but just cannot figure out how to. I read this post on SO and tried what is said there but no go.
Here is what I have done:
Created a TypeScript Interface for it:
export class IEnvironmentConfig {
environment: string
}
Imported and declared a variable in my service:
import EnvironmentConfig = require("../EnvironmentConfig");
declare var mEnviornmentConfig: EnvironmentConfig.IEnvironmentConfig;
Tried to use this variable in my service:
console.info(mEnviornmentConfig.environment);
So TypeScript does not complain now but when I run the code I get this error:
mEnviornmentConfig is not defined
What am I missing? The myModel is declare at the start of my app and does other module and controller configuration so I know it is getting registered.
Thanks to #keithm for getting me in the right direction.
Figured it out. Once I realized that injecting it into my main module was working my thought turned to how gulp is doing webpack. And sure enough the webpack was just skipping the .js file this other gulp package was creating. Once I updated webpack to account for this new file all was good.
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.