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

2024-10-30 17:59:07

前言

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

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

这里，我想向您演示，如何在 Angular 应用初始化期间，使用 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 中查看如下输出

注意：

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

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

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

参考资料

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

总结

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

Angular.js基础学习之初始化

一.绑定初始化,自动加载通过绑定来进行angular的初始化,会把js代码侵入到html中. ng-app是angular的一个指令,代表一个angular应用(也叫模块).使用ng-app或ng-app=""来标记一个DOM结点,让框架会自动加载.也就是说,ng-app是可以带属性值的. <body ng-app="myApp"> <div ng-controller="myCtrl"> {{ hello }} <
AngularJS初始化过程分析(引导程序)

概览这一节解释了AngularJS初始化的过程,以及需要的时候你该如何修改AngularJS的初始化. AngularJS的 <script> 标签这个示例展示了我们推荐的整合AngularJS的方法,它被称之为"自动初始化". 复制代码代码如下: <!doctype html> <html xmlns:ng="http://angularjs.org" ng-app> <body> ..
AngularJS使用ng-Cloak阻止初始化闪烁问题的方法

本文实例讲述了AngularJS使用ng-Cloak阻止初始化闪烁问题的方法.分享给大家供大家参考,具体如下: 在做angular的SPA开发时,我们经常会遇见在如Chrome这类能够快速解析的浏览器上出现表达式({% raw %} {{ express }} {% endraw %} ),或者是模块(div)的闪烁.对于这个问题由于JavaScript去操作DOM,都会等待DOM加载完成(DOM ready).对于angular会在DOM ready完会才回去解析html view Templ
Angularjs在初始化未完毕时出现闪烁问题的解决方法分析

本文实例讲述了Angularjs在初始化未完毕时出现闪烁问题的解决方法.分享给大家供大家参考,具体如下: 方法1: 使用ng-cloak指令,在绑定数据的区域使用该指令并设置该指令的样式为隐藏即可,如下所示: Html: <body ng-controller="QuberController" ng-cloak class="ng-cloak"> Css: .ng-cloak { display: none; } 方法2: 使用ng-bind指令来代替
Angular.js初始化之ng-app的自动绑定与手动绑定详解

前言众所周知在传统的angularJS应用中,都是通过ng-app把angular应用绑定到某个dom上,这样做会把js代码入侵到html上,angular提供了手动启动的API--angular.bootstrap() . 本文将给大家详细介绍关于Angular.js初始化之ng-app自动与手动绑定的相关内容,分享出来供大家参考学习,下面话不多说,来一起看看详细的介绍. 一.传统的绑定初始化 <html> <head> <meta http-equiv="Co
手动初始化Angular的模块与控制器

在上面的文章中,都是在html元素上绑定ng-app="myApp",然後使用angular.module('myApp',[]);来初始化模块的操作,下面我们来用angular.bootstrap方法手动初始化模块. <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8&quo
AngularJS初始化静态模板详解

AngularJS可以通过ng-app来自动初始化模块,也可以通过angular.bootstrap(document, [module])手动启动应用,不管用哪种方法,应用启动后,动态往dom树里面添加的dom元素,无法执行angular指令,即无法通过ng-model.ng-click给动态添加的dom元素绑定数据和事件,怎么办? 动态添加dom元素的场景非常常见,如点击某页面上修改用户资料的按钮,发送ajax请求去查询用户资料,然后通过模板引擎将事先写在页面里的静态模板编译成HTML字符串
Angular如何在应用初始化时运行代码详解

前言想象一下,您的应用需要一些动态配置信息,这些信息在应用启动之前需要动态获取,并在应用运行中使用. 显然不能直接写道静态配置文件中,但是从客户端发出的请求又是一个异步请求,如何协调这个问题呢? 这里,我想向您演示,如何在 Angular 应用初始化期间,使用 APP_INITIALIZER 注入器来获取应用的动态配置信息. 什么是 APP_INITIALIZER注入器 APP_INITIALIZER 是允许您在 Angular 初始化七千处理您自己任务的机制.它既可以用于 AppModule
springboot启动时运行代码详解

Intellij IDEA开发工具,基于Maven框架的SpringBoot简单示例演示启动. Maven工程pom.xml配置,主要引入spring-boot-starter-web等依赖,如下图所示. SpringBoot主程序入口,通过该类启动SpringBoot应用. 通过@Component.@RestController等注解,实现在SpringBoot启动时,自动运行相应的代码块.如下图.为其中一示例.
使用AngularJS编写多选按钮选中时触发指定方法的指令代码详解

最近在做项目时,遇到了需要用到多选按钮选中触发事件的功能,因此我查找了一下AngularJS的提供的指令,但是没有发现相应的指令.而一个看起来很像的指令就是ng-checked,但是这个指令是用来代替标签里面checked属性的,所以也用不了.因此我就自己动手试着写一个这样的指令,相应的代码如下: <form name="test_form" ng-controller="TestCtrl"> <input type="checkbox&
Angular4表单验证代码详解

背景: 最近在itoo页面调整的时候,发现页面表单或者是文本框没有做基本的判断操作,所以着手demo一篇,希望对大家有帮助!! -------------------------------------------------------------------------------- 1.创建表单组件: ng g c login1 2.1单规则验证: <label>用户名:</label> <input type="text" #userNameRe
Java多线程之线程通信生产者消费者模式及等待唤醒机制代码详解

前言前面的例子都是多个线程在做相同的操作,比如4个线程都对共享数据做tickets–操作.大多情况下,程序中需要不同的线程做不同的事,比如一个线程对共享变量做tickets++操作,另一个线程对共享变量做tickets–操作,这就是大名鼎鼎的生产者和消费者模式. 正文一,生产者-消费者模式也是多线程生产者和消费者模式也是多线程的范例.所以其编程需要遵循多线程的规矩. 首先,既然是多线程,就必然要使用同步.上回说到,synchronized关键字在修饰函数的时候,使用的是"this"
Yii2中事务的使用实例代码详解

前言一般我们做业务逻辑,都不会仅仅关联一个数据表,所以,会面临事务问题. 数据库事务(Database Transaction) ,是指作为单个逻辑工作单元执行的一系列操作,要么完全地执行,要么完全地不执行. 事务处理可以确保除非事务性单元内的所有操作都成功完成,否则不会永久更新面向数据的资源.通过将一组相关操作组合为一个要么全部成功要么全部失败的单元,可以简化错误恢复并使应用程序更加可靠.一个逻辑工作单元要成为事务,必须满足所谓的ACID(原子性.一致性.隔离性和持久性)属性.事务是数据库运
Java中的数组复制（clone与arraycopy）代码详解

JAVA数组的复制是引用传递,而并不是其他语言的值传递. 1.clone protectedObjectclone() throwsCloneNotSupportedException创建并返回此对象的一个副本."副本"的准确含义可能依赖于对象的类.这样做的目的是,对于任何对象x,表达式: x.clone()!=x为true,表达式: x.clone().getClass()==x.getClass()也为true,但这些并非必须要满足的要求.一般情况下: x.clone().equa
Java多线程同步器代码详解

同步器为每种特定的同步问题提供了解决方案,同步器是一些使线程能够等待另一个线程的对象,允许它们协调动作.最常用的同步器是CountDownLatch和Semaphore,不常用的是Barrier 和Exchanger Semaphore Semaphore[信号标:旗语],通过计数器控制对共享资源的访问. 测试类: package concurrent; import concurrent.thread.SemaphoreThread; import java.util.concurrent.
Java编程实现对象克隆（复制）代码详解

克隆,想必大家都有耳闻,世界上第一只克隆羊多莉就是利用细胞核移植技术将哺乳动物的成年体细胞培育出新个体,甚为神奇.其实在Java中也存在克隆的概念,即实现对象的复制. 本文将尝试介绍一些关于Java中的克隆和一些深入的问题,希望可以帮助大家更好地了解克隆. 假如说你想复制一个简单变量.很简单: int apples = 5; int pears = apples; 不仅仅是int类型,其它七种原始数据类型(boolean,char,byte,short,float,double.long)同样适
Java动态代理（设计模式）代码详解

基础:需要具备面向对象设计思想,多态的思想,反射的思想: Java动态代理机制的出现,使得Java开发人员不用手工编写代理类,只要简单地指定一组接口及委托类对象,便能动态地获得代理类.代理类会负责将所有的方法调用分派到委托对象上反射执行,在分派执行的过程中,开发人员还可以按需调整委托类对象及其功能,这是一套非常灵活有弹性的代理框架.通过阅读本文,读者将会对Java动态代理机制有更加深入的理解.本文首先从Java动态代理的运行机制和特点出发,对其代码进行了分析,推演了动态生成类的内部实现. 代理模

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

相关推荐

随机推荐