angular2+ 利用FactoryProvider和APP_INITIALIZER初始化项目配置
来源:互联网 发布:网络集成商 编辑:程序博客网 时间:2024/06/06 07:04
前言
本章内容需要对angular2的依赖注入,多注入有一定了解
1、angular2依赖注入是什么?
我简要形象的描述一下依赖注入:你现在到餐厅吃饭,你需要点一个菜,你只需要说出你想吃什么菜,然后餐厅的厨师就会帮你把这个菜做出来并端到你的面前,而你不用关心整个做菜的过程,做菜依赖哪些原材料,这就是依赖注入的生活释义
2、FactoryProvider 接口定义?
export interface FactoryProvider { provide: any;// 用于设置与依赖对象关联的Token值,Token值可能是Type、InjectionToken、OpaqueToken的实例或字符串 useFactory: Function;// 设置用于创建对象的工厂函数 deps?: any[]; // 依赖对象列表 multi?: boolean;// 用于标识是否multiple providers,若是multiple类型,则返回与Token关联的依赖对象列表}
这段话摘在semlinker大佬的依赖注入详解,简要解释一下各个参数的含义,provide就是你要依据什么信息去获取你需要的对象,相当于你要点的菜的名字;useFactory就是帮你创建对象的函数,相当于给你炒菜的厨师;deps就是创建你需要的对象所依赖的其他对象列表,相当于炒菜(宫保鸡丁)需要的佐料,原材料(比如鸡丁等);multi用于标识是否是多注入,相当于你炒菜你需要其他材料,所以你要声明 multi=true
,当然不需要依赖其他对象时可以设置 multi=false
3、FactoryProvider有何用
FactoryProvider 用于告诉 Injector (注入器),通过调用 useFactory 对应的函数,返回 Token 对应的依赖对象。
4、APP_INITIALIZER 的定义
export const APP_INITIALIZER = new InjectionToken<Array<() => void>>('Application Initializer');
使用 InjectionToken 的方式声明,通过InjectionToken函数我们发现:APP_INITIALIZER关联的对象是数组,数组内的每一个元素都是函数对象
5、APP_INITIALIZER有何用?
该 Token 用于配置系统初始化相关的 Provider
export function configFactory(config: AppConfig) { return function () { config.load(); } //返回一个函数对象}@NgModule({ ..., providers: [ // 系统启动时,加载项目的配置文件,如系统登录、首页模块的ApiUrl等信息 { provide: APP_INITIALIZER, useFactory: configFactory, deps: [AppConfig], multi: true } ]})export class AppModule { }
6、利用FactoryProvider和APP_INITIALIZER能做什么?
能够初始化项目的配置,比如你调用接口时,我们为了让接口更灵活,也更容易替换,我们一般会省略接口前面的ip地址和端口号,例如这样 :const url="mes/getMech"
,这里我们省略了前面的 http://192.168.0.52:8080/
(这是我随便造的ip地址),为什么要这么设计,我解释一下:我们可能测试数据用一个数据库,发布产品时肯定用另一个数据库,你如果ip地址写死了,那么http请求获取时的每一个接口前面的ip地址和端口号都需要修改,想想就知道这是一个多么伟大的工程,然而利用FactoryProvider和APP_INITIALIZER,你能把这些配置存在一个全局的class类里面,而且这个类在项目初始化时最早执行
7、项目初始化配置具体实现?
简要分析一下代码:通过 this.http.get('assets/config/env.json')
拿到我们的项目模式并存到this.env
里面,比如:开发模式、发布模式,env.json文件配置如下:
通过项目模式获取每一种模式下的项目基本初始化配置,这里我们有三种模式下的配置:prod、dev、test,然后获取this.env.env
里面指定的模式的配置,并存到 this.config
里面,下面我们看一下三种模式的相关配置
(1)prod:
(2)dev:
(3)test:
在AppModule里面进行注入:
8、验证初始化顺序
为了验证APP_INITIALIZER是不是在项目启动时最早初始化,我们只需比较AppConfig和AppComponent两个类谁先执行,下面我们来看AppComponent的代码:
我们通过对比AppConfig类和AppComponent类中的log信息(我都用红色长方形进行了标记),就能验证我们的结果
通过log我们发现AppConfig类确实要比AppComponent类先执行,也正因为AppConfig类先执行,AppComponent使用AppConfig类进行依赖注入的时候AppConfig类的成员变量 this.config
不是undefined,而是对应项目模式的配置
- angular2+ 利用FactoryProvider和APP_INITIALIZER初始化项目配置
- angular2开发环境配置和项目目录创建
- 利用angular cli 创建angular2项目
- 【Angular2】新建Angular2项目
- webpack2和angular2搭建的项目
- IDEA初始化配置和打开多个项目!
- Eclipse导入项目初始化配置
- angular2项目结构详情
- 1.搭建Angular2项目
- 新建Angular2项目
- angular2开发小型项目
- angular2项目结构详情
- Angular2 搭建项目
- 【Angular2】 如何创建一个Angular2项目
- 【Angular2】 如何创建一个Angular2项目
- boa初始化配置及改造利用
- Angular2环境配置
- Angular2环境配置
- hdu 4348 主席树的区间更新
- eclipse如何修改dynamic web module version
- iOS分享授权问题:-canOpenURL: failed ..."This app is not allowed to query for sscheme xx
- linux 下应用编程进程内存资源的限制
- Socket 编程
- angular2+ 利用FactoryProvider和APP_INITIALIZER初始化项目配置
- ansi与unicode字符串转换
- Android Design库控件使用
- cakephp(2.x)相关技巧[0]
- JVM高级特性与实践(一):Java内存区域 与 内存溢出异常
- HDU 4405 Aeroplane chess (概率DP & 期望)
- SpringMvc学习笔记(二)SpringMvc控制器
- 富文本编辑器的制作
- Android View