ANGULAR2-Data sharing and data Transfer-application environment information configuration

In the design of the angular project, we often need to define some global data, such as: Application name, version, current environment, backend server address, current user information and so on, and want to be able to define and share in multiple places, here we describe how to use service to provide global configuration service for the whole application.

(1) Application environment

1. Define a interface named App_configuration, in which we define the application's basic information fields, the development environment and the production environment parameter types

App_configuration. Config.tsexport interface app_configuration{  app:{    base:{      name:string,      version:string    },    environments:{      dev:{        api:{          service:{            report:string          },          backend:{            Schema: String,            core:string          }        }      ,      prod:{        api:{          service:{            report:string          } ,          backend:{            schema:string,            core:string          }  }}}

　　

2. Configure a App_config constant

Import {app_configuration} from './app.config.interface '; Console.log (' Import app_configuration.. '); Export Const App_config:app_configuration = {    app:{      base:{        name: ' Ng_app_demo ',        version: ' 0.1 '      } ,      environments:{        dev:{          api:{            service:{report              : ' Http://xx.xx.xx.xx:yyyy '            },            backend:{              Schema: ' http://xx.xx.xx.xx:yyyy ',              core: ' Http://zz.zz.zz.zz:yyyy '}}        ,        prod:{          api:{            service:{report              : ' Http://aa.aa.aa.aa:yyyy '            },            backend:{              Schema: ' http://bb.bb.bb.bb:yyyy ',              core: ' http://cc.cc.cc.cc:yyyy '  }}}} };

　　

3. Define a Environment.helper.ts

Import {App_config} from '. /configurations/app.config ' Export Const Envhelper = {Getenvconfig:function (siteurl) {Let Envtype = envhelper.getenvty    PE (SITEURL);         Let config;//match the configuration information to the corresponding environment according to the current user access address switch (envtype) {case ' dev ': config = App_Config.app.environments.dev;      Break        Case ' prod ': config = App_Config.app.environments.prod;      Break        Default:config = App_Config.app.environments.dev;    Break  } return config;    }, Gethostname:function (URL) {Let parser = document.createelement (' a ');    Parser.href = URL;  return parser.host;    }, Getenvtype:function (URL) {if (envhelper.isdevelopment (URL)) {return ' dev ';    } if (Envhelper.isproduction (URL)) {return ' prod ';    }},//is currently a test environment isdevelopment:function (siteurl) {Let devhosts = App_Config.app.environments.dev.others.ENV.hosts;    if (Devhosts.indexof (Envhelper.gethostname (SiteURL))!==-1) {return true;  } return false; },//is currently a production environment ISproduction:function (SiteURL) {Let prodhosts = App_Config.app.environments.prod.others.ENV.hosts;    if (Prodhosts.indexof (Envhelper.gethostname (SiteURL))!==-1) {return true;  } return false; }};

　　

4. Provide a environment service

Import {injectable} from ' @angular/core ', import {Envhelper  } from '. /helpers/environment.helper '; export type Sitestatetype = {  [key:string]: any}; @Injectable () Export class envsvc{  _envstate:sitestatetype = {    url:window.location.href,//call Envhelper Gets the current application environment Configuration    Config: Envhelper.getenvconfig (window.location.href)  };  Constructor () {  }  get Envstate () {//In an open get application environment state, clone a copy of _envstate, avoid external program modification Configuration    Return this._envstate = this. _clone (this._envstate);  }  Set Envstate (value) {    throw new Error (' Do not mutate the '. Envstate ' directly ');  }  Get (prop?: any) {    Const-state = This.envstate;    Return State.hasownproperty (prop)? State[prop]: state;  }  Private _clone (Object:sitestatetype) {    return Json.parse (Json.stringify (object));}  }

　　

5. Providers add Envsvc in App.module.ts and inject in the corresponding component.

Angular2-Data sharing and data Transfer-application environment information configuration