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 仿QQ滑动菜单效果代码
Sep 03 Javascript
JavaScript原型继承之基础机制分析
Aug 26 Javascript
javascript 基础篇3 类,回调函数,内置对象,事件处理
Mar 14 Javascript
javascript限制文本框只允许输入数字(曾经与现在的方法对比)
Jan 18 Javascript
javascript设计模式之解释器模式详解
Jun 05 Javascript
javascript与jquery中的this关键字用法实例分析
Dec 24 Javascript
jQuery Form 表单提交插件之formSerialize,fieldSerialize,fieldValue,resetForm,clearForm,clearFields的应用
Jan 23 Javascript
使用jQuery或者原生js实现鼠标滚动加载页面新数据
Mar 06 Javascript
JS实现对中文字符串进行utf-8的Base64编码的方法(使其与Java编码相同)
Jun 21 Javascript
Angular2实现的秒表及改良版示例
May 10 Javascript
vue移动端弹起蒙层滑动禁止底部滑动操作
Jul 22 Javascript
pnpm对npm及yarn降维打击详解
Aug 05 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
php 前一天或后一天的日期
2008/06/28 PHP
解析php利用正则表达式解决采集内容排版的问题
2013/06/20 PHP
简单了解WordPress开发中update_option()函数的用法
2016/01/11 PHP
thinkphp项目部署到Linux服务器上报错“模板不存在”如何解决
2016/04/27 PHP
thinkphp3.2实现上传图片的控制器方法
2016/04/28 PHP
PHP实现支持加盐的图片加密解密
2016/09/09 PHP
Yii2汉字转拼音类的实例代码
2017/04/18 PHP
PHP Web表单生成器案例分析
2020/06/02 PHP
JQuery的html(data)方法与&amp;lt;script&amp;gt;脚本块的解决方法
2010/03/09 Javascript
jQuery EasyUI API 中文文档 - Draggable 可拖拽
2011/09/29 Javascript
JavaScript入门之基本函数详解
2011/10/21 Javascript
jQuery点击后一组图片左右滑动的实现代码
2012/08/16 Javascript
利用Jquery实现可多选的下拉框
2014/02/21 Javascript
javascript面向对象之访问对象属性的两种方式分析
2015/01/13 Javascript
jQuery中ajax的load()与post()方法实例详解
2016/01/05 Javascript
js实现div在页面拖动效果
2016/05/04 Javascript
JavaScript实现图片懒加载(Lazyload)
2016/11/28 Javascript
浅析 NodeJs 的几种文件路径
2017/06/07 NodeJs
BootStrap数据表格实例代码
2017/09/13 Javascript
JSON 数据格式详解
2017/09/13 Javascript
利用pm2部署多个node.js项目的配置教程
2017/10/22 Javascript
JavaScript canvas绘制渐变颜色的矩形
2020/02/18 Javascript
python实现的阳历转阴历(农历)算法
2014/04/25 Python
Python简单计算文件夹大小的方法
2015/07/14 Python
Django 后台获取文件列表 InMemoryUploadedFile的例子
2019/08/07 Python
python线性插值解析
2020/07/05 Python
Html5 audio标签样式的修改
2016/01/28 HTML / CSS
The Body Shop美体小铺西班牙官网:天然化妆品
2019/06/21 全球购物
夏威夷咖啡公司:Hawaii Coffee Company
2019/09/19 全球购物
圣彼得堡鲜花配送:Semicvetic
2020/09/15 全球购物
优秀大学生的自我评价
2014/01/16 职场文书
学生安全教育材料
2014/02/14 职场文书
合作意向协议书范本
2014/03/31 职场文书
MySQL Server层四个日志的实现
2022/03/31 MySQL
4种方法python批量修改替换列表中元素
2022/04/07 Python
Python可视化神器pyecharts绘制地理图表
2022/07/07 Python