|
| 1 | +# Introduction |
| 2 | +This is a configuration package for Angular. |
| 3 | +It allows you to dynamically load a json file at the root of your project. |
| 4 | +It also provides a provider that allows you to add configuration values in the config function of your Angular app. |
| 5 | + |
| 6 | +# Requirements |
| 7 | +- npm |
| 8 | +- angular |
| 9 | + |
| 10 | +# How to configure |
| 11 | +1) In your project folder, install this plugin using npm |
| 12 | +`npm install git+https://git@github.com/geeklearningio/gl-angular-configuration.git --save` |
| 13 | + |
| 14 | +2) You can use the Typescript (`package/src/ConfigurationProvider.ts`) or the Javascript ((`package/dist/ConfigurationProvider.js`)) version of the Provider. |
| 15 | + |
| 16 | +3) In your application's main module, inject the dependency `gl-angular-configuration` in order to use the Provider. |
| 17 | +``` |
| 18 | +angular.module('mainModuleName', ['ionic', 'gl-angular-configuration']){ |
| 19 | +
|
| 20 | +} |
| 21 | +``` |
| 22 | + |
| 23 | +# How to use |
| 24 | + |
| 25 | +## Dynamically load the configuration.json file (optional) |
| 26 | +Add a `configuration.json` file at the root of your project. |
| 27 | + |
| 28 | +Note: If you look at the webpack config (`webpack.base.config.js`) of the test-app provided with the package, you'll see that I use the `CopyWebpackPlugin` to copy the right configuration named after a `env` argument passed to the webpack cli. The command line I use is a npm script. You can find it in the `package.json` file of the test-app. |
| 29 | + |
| 30 | +Remove the automatic bootstrap of your angular app. You can do it by Removing the `ng-app` tag of your `index.html` file. |
| 31 | +It will allow you to boostrap it manually after the json has been loaded. |
| 32 | +``` |
| 33 | +<html ng-app="testApp"> |
| 34 | +``` |
| 35 | + |
| 36 | +In your application's main module, call the `loadConfigurationJSON` and pass a callback as a param. In the callback, get the html dom element and bootstrap manually your app. |
| 37 | +``` |
| 38 | +loadConfigurationJSON(() => { |
| 39 | + var domElement = document.querySelector('html'); |
| 40 | + angular.bootstrap(domElement, ["testApp"]); |
| 41 | +}); |
| 42 | +``` |
| 43 | + |
| 44 | +## Add a configuration at config state |
| 45 | +In the config function of your Angular application, inject the `ConfigurationProvider` and call the `addConfiguration` function. |
| 46 | +You can also add a default configuration by calling `addDefaultConfiguration`. This function only changes the priority of the configuration loaded. It means that if the current configuration has a "env" param and the default configuration has also an "env" param, then it will keep the param of the current configuration, not the default one. |
| 47 | +You can specify the type of your configuration object in the Typescript version. |
| 48 | + |
| 49 | +``` |
| 50 | +import {ConfigurationProvider} from "gl-angular-configuration/package/src/ConfigurationProvider"; |
| 51 | +
|
| 52 | +interface ITestAppConfiguration { |
| 53 | + env: string |
| 54 | +} |
| 55 | +
|
| 56 | +export class Config { |
| 57 | + constructor(configurationProvider: ConfigurationProvider<ITestAppConfiguration>) { |
| 58 | + configurationProvider.addObject({otherParam: 'test'}); |
| 59 | + } |
| 60 | +} |
| 61 | +``` |
0 commit comments