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 相关文章推荐
javascript 写类方式之四
Jul 05 Javascript
菜鸟javascript基础资料整理2
Dec 06 Javascript
从数据库读取数据后将其输出成html标签的三种方法
Oct 13 Javascript
javascript模拟命名空间
Apr 17 Javascript
对于jQuery性能的一些优化建议
Aug 13 Javascript
Extjs 点击复选框在表格中增加相关信息行
Jul 12 Javascript
jQuery设置聚焦并使光标位置在文字最后的实现方法
Aug 02 Javascript
js实现淡入淡出轮播切换功能
Jan 13 Javascript
Vue引入jquery实现平滑滚动到指定位置
May 09 jQuery
微信小程序判断用户是否需要再次授权获取个人信息
Jul 18 Javascript
vue使用nprogress实现进度条
Dec 09 Javascript
jQuery实现移动端笔触canvas电子签名
May 21 jQuery
详解.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
PHP 的异常处理、错误的抛出及回调函数等面向对象的错误处理方法
2012/12/07 PHP
浅析Yii中使用RBAC的完全指南(用户角色权限控制)
2013/06/20 PHP
解析在PHP中使用全局变量的几种方法
2013/06/24 PHP
PHP基于面向对象封装的分页类示例
2019/03/15 PHP
解决laravel查询构造器中的别名问题
2019/10/17 PHP
PHP中mysqli_get_server_version()的实例用法
2020/02/03 PHP
JAVASCRIPT实现的WEB页面跳转以及页面间传值方法
2010/05/13 Javascript
判断客户端浏览器是否安装了Flash插件的多种方法
2010/08/11 Javascript
Extjs4 类的定义和扩展实例
2013/06/28 Javascript
JSON.stringify转换JSON时日期时间不准确的解决方法
2014/08/08 Javascript
js事件绑定快捷键以ctrl+k为例
2014/09/30 Javascript
Node.js 异步编程之 Callback介绍(一)
2015/03/30 Javascript
继续学习javascript闭包
2015/12/03 Javascript
使用jQuery在移动页面上添加按钮和给按钮添加图标
2015/12/04 Javascript
bootstrap的3级菜单样式,支持母版页保留打开状态实现方法
2016/11/10 Javascript
微信小程序开发之数据存储 参数传递 数据缓存
2017/04/13 Javascript
JS实现的字符串数组去重功能小结
2019/06/17 Javascript
vue移动端城市三级联动组件使用详解
2019/07/26 Javascript
Element-UI中关于table表格的那些骚操作(小结)
2019/08/15 Javascript
jQuery表单选择器用法详解
2019/08/22 jQuery
[02:52]DOTA2新手基础教程 米波
2014/01/21 DOTA
使用BeautifulSoup爬虫程序获取百度搜索结果的标题和url示例
2014/01/19 Python
Python 列表排序方法reverse、sort、sorted详解
2016/01/22 Python
Python求两个圆的交点坐标或三个圆的交点坐标方法
2018/11/07 Python
Python使用sax模块解析XML文件示例
2019/04/04 Python
python实现键盘输入的实操方法
2019/07/16 Python
DRF框架API版本管理实现方法解析
2020/08/21 Python
html5 迷宫游戏(碰撞检测)实例一
2013/07/25 HTML / CSS
C#中类(class)与结构(struct)的异同
2013/11/03 面试题
Delphi笔试题
2016/11/14 面试题
女大学生毕业找工作的自我评价
2013/10/03 职场文书
财务稽核岗位职责
2015/04/13 职场文书
风之谷观后感
2015/06/11 职场文书
导游词之黄果树瀑布
2019/09/20 职场文书
Python何绘制带有背景色块的折线图
2022/04/23 Python
JS高级程序设计之class继承重点详解
2022/07/07 Javascript