Angular如何在应用初始化时运行代码详解


Posted in Javascript onJune 11, 2018

前言

想象一下,您的应用需要一些动态配置信息,这些信息在应用启动之前需要动态获取,并在应用运行中使用。

显然不能直接写道静态配置文件中,但是从客户端发出的请求又是一个异步请求,如何协调这个问题呢?

这里,我想向您演示,如何在 Angular 应用初始化期间,使用 APP_INITIALIZER 注入器来获取应用的动态配置信息。

什么是 APP_INITIALIZER 注入器

APP_INITIALIZER 是允许您在 Angular 初始化七千处理您自己任务的机制。它既可以用于 AppModule,核心模块,也可以用于您自己的应用加载模块中。典型的场景是应用加载之前做的事情,比如从服务处加载用于设置应用的配置信息。在示例中,我们使用它从服务器的 XML 配置文件中加载应用的设置信息。

创建 AppLoad 模块

尽管不是必要,通过创建 App Load module 还是对应用加载有助于隔离。

import { NgModule, APP_INITIALIZER } from '@angular/core';
import { HttpClientModule } from "@angular/common/http";
 
import { AppLoadService } from './app-load.service';
 
export function init_app(appLoadService: AppLoadService) {
 return () => appLoadService.initializeApp();
}
 
export function get_settings(appLoadService: AppLoadService) {
 return () => appLoadService.getSettings();
}
 
@NgModule({
 imports: [HttpClientModule],
 providers: [
 AppLoadService,
 { provide: APP_INITIALIZER, useFactory: init_app, deps: [AppLoadService], multi: true },
 { provide: APP_INITIALIZER, useFactory: get_settings, deps: [AppLoadService], multi: true }
 ]
})
export class AppLoadModule { }

注意一下几点:

  • APP_INITIALIZER 导入自 @angular/core
  • 这里有多个 APP_INITIALIZER,它们在应用初始化过程中并发执行,直到它们全部完成。

    使用 nulti: true 用于多个注入器,如果只有一个,使用 multi: false。

  • 工厂函数 init_app 和 get_settings 应当返回一个返回 Promise 的函数。
  • 该模块必须添加到 AppModule 的导入数组中。

创建 App Load Service

AppLoadService 应当隔离您在应用初始化期间的作为。当然这不是必须的,您可以使用任何需要的服务。

这里实现了两个方法我们在前面代码中使用的方法。在我们的 AppLoadModule 中作为依赖注入到提供器数组中。

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import 'rxjs/add/operator/toPromise';
 
import { APP_SETTINGS } from '../settings';
 
@Injectable()
export class AppLoadService {
 
 constructor(private httpClient: HttpClient) { }
 
 initializeApp(): Promise<any> {
 return new Promise((resolve, reject) => {
   console.log(`initializeApp:: inside promise`);
 
   setTimeout(() => {
   console.log(`initializeApp:: inside setTimeout`);
   // doing something
 
   resolve();
   }, 3000);
  });
 }
 
 getSettings(): Promise<any> {
 console.log(`getSettings:: before http.get call`);
 
 const promise = this.httpClient.get('http://private-1ad25-initializeng.apiary-mock.com/settings')
  .toPromise()
  .then(settings => {
  console.log(`Settings from API: `, settings);
 
  APP_SETTINGS.connectionString = settings[0].value;
  APP_SETTINGS.defaultImageUrl = settings[1].value;
 
  console.log(`APP_SETTINGS: `, APP_SETTINGS);
 
  return settings;
  });
 
 return promise;
 }
}

注意以下几点:

  • initializeApp 用于等待 3 秒,并输出日志来显示两个方法是并行执行的。
  • getSettings 调用一个模拟的我使用 APIARY 创建的 API 来或者设置。

    这里使用这些设置来设置 APP_SETTINGS 对象的

  • 它们都返回 Promise

运行应用

运行应用,可以在 Console 中查看如下输出

Angular如何在应用初始化时运行代码详解

注意:

  • 您可以看到两个方法都被调用了。
  • 设置首先返回
  • initializeApp 最后完成,然后应用启动。

如何从 settings 中获取 API 的地址?

有些人想:“如果没有 settings 来知道 URL, 我如何调用 API 呢?”,这是一个问题,您可以通过一个相对 URL 来通过 HttpClient ,并假设 API 在您的 Web 站点上。

参考资料

https://www.intertech.com/Blog/angular-4-tutorial-run-code-during-app-initialization/

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
Jquery乱码的一次解决过程 图解教程
Feb 20 Javascript
Jquery 插件学习实例1 插件制作说明与tableUI优化
Apr 02 Javascript
JQuery操作表格(隔行着色,高亮显示,筛选数据)
Feb 23 Javascript
JavaScript实现网页上的浮动广告的简单方法
Jun 14 Javascript
超棒的响应式布局jQuery插件Freetile.js
Nov 17 Javascript
jQuery中triggerHandler()方法用法实例
Jan 19 Javascript
js选项卡的实现方法
Feb 09 Javascript
Jquery EasyUI实现treegrid上显示checkbox并取选定值的方法
Apr 29 Javascript
JavaScript实现计算多边形质心的方法示例
Jan 31 Javascript
node.js中express模块创建服务器和http模块客户端发请求
Mar 06 Javascript
使用typescript改造koa开发框架的实现
Feb 04 Javascript
angula中使用iframe点击后不执行变更检测的问题
May 10 Javascript
详解.vue文件解析的实现
Jun 11 #Javascript
vue filters的使用详解
Jun 11 #Javascript
Vue组件全局注册实现警告框的实例详解
Jun 11 #Javascript
jQuery实现的页面详情展开收起功能示例
Jun 11 #jQuery
Node.js中的cluster模块深入解读
Jun 11 #Javascript
详解vue-router 初始化时做了什么
Jun 11 #Javascript
node中间层实现文件上传功能
Jun 11 #Javascript
You might like
PHP5新特性: 更加面向对象化的PHP
2006/11/18 PHP
php mssql 数据库分页SQL语句
2008/12/16 PHP
Laravel最佳分割路由文件(routes.php)的方式
2016/08/04 PHP
yii框架无限极分类的实现方法
2017/04/08 PHP
JavaScript 全面解析各种浏览器网页中的JS 执行顺序
2009/02/17 Javascript
js截取字符串的两种方法及区别详解
2013/11/05 Javascript
jquery实现更改表格行顺序示例
2014/04/30 Javascript
JavaScript加入收藏夹功能(兼容IE、firefox、chrome)
2014/05/05 Javascript
5款JavaScript代码压缩工具推荐
2014/07/07 Javascript
JavaScript中的闭包(Closure)详细介绍
2014/12/30 Javascript
jquery实现点击label的同时触发文本框点击事件的方法
2015/06/05 Javascript
由ReactJS的Hello world说开来
2015/07/02 Javascript
jQuery获取父元素节点、子元素节点及兄弟元素节点的方法
2016/04/14 Javascript
jQuery unbind 删除绑定事件详解
2016/05/24 Javascript
js简单时间比较的方法
2016/08/02 Javascript
Vue.js每天必学之构造器与生命周期
2016/09/05 Javascript
jQuery+HTML5实现弹出创意搜索框层
2016/12/29 Javascript
layui table单元格事件修改值的方法
2019/09/24 Javascript
three.js利用射线Raycaster进行碰撞检测
2020/03/12 Javascript
微信小程序地图实现展示线路
2020/07/29 Javascript
vue+elementUI(el-upload)图片压缩,默认同比例压缩操作
2020/08/10 Javascript
python实现带错误处理功能的远程文件读取方法
2015/04/29 Python
详解python中的线程
2018/02/10 Python
十行代码使用Python写一个USB病毒
2019/06/21 Python
Pycharm+django2.2+python3.6+MySQL实现简单的考试报名系统
2019/09/05 Python
UGG澳洲官网:UGG Australia
2018/04/26 全球购物
Otticanet美国:最顶尖的世界名牌眼镜, 能得到打折季的价格
2019/03/10 全球购物
力学专业毕业生自荐信
2013/11/17 职场文书
女娲补天教学反思
2014/02/05 职场文书
运动会方阵解说词
2014/02/12 职场文书
购房意向书
2014/04/01 职场文书
纪念九一八事变演讲稿:忘记意味着背叛
2014/09/14 职场文书
迁徙的鸟观后感
2015/06/09 职场文书
2015年信息化建设工作总结
2015/07/23 职场文书
Pytorch中Softmax和LogSoftmax的使用详解
2021/06/05 Python
图片批量处理 - 尺寸、格式、水印等
2022/03/07 杂记