文章详情

短信预约信息系统项目管理师 报名、考试、查分时间动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

专家解读:利用Angular项目与数据库融合实例

2021-04-14 20:19

关注

专家解读:利用Angular项目与数据库融合实例

摘要:面对如何在现有的低版本的框架服务上,运行新版本的前端服务问题,华为云前端推出了一种融合方案,该方案能让独立的Angular项目整体运行在低版本的框架服务上,通过各种适配手段,让Angular项目也能获取到外层框架服务的资源。

华为云前端服务前期采用AngularJs作为框架技术栈,技术较为老旧,性能较差,在华为云快速发展的今天,显然不能满足要求。因此我们必须要升级前端技术栈,使用Angular2+来承载我们的前端服务。GeminiDB作为新服务,也是数据库乃至华为云未来的重点服务,作为前端部分,必须在技术上使用最前沿的框架,以最大地提高用户体验。

但是技术栈的升级不是一蹴而就的,尤其是在华为云,所有的云服务必须在框架服务的底座上运行,而框架服务承载了所有的云服务,如果要进行技术栈升级,必然是一个缓慢的过程。GeminiDB作为华为云服务里的一员,也不可能脱离框架服务而存在。因此存在一个问题,就是如何在现有的低版本的框架服务上,运行新版本的前端服务。

为了解决以上问题,华为云前端推出了一种融合方案,该方案能让独立的Angular项目整体运行在低版本的框架服务上,通过各种适配手段,让Angular项目也能获取到外层框架服务的资源。

底层项目

底层项目使用webpack打包,打包后通过在index.html里引入businessAll.js文件,以该文件为入口启动整个框架服务。

在底层框架服务启动后,再渲染出具体云服务内容。

Angular项目

Angular项目支持独立运行,有单独的index.html,也有单独的main.ts入口。但是如果希望Angular项目运行在底层框架服务上,就必须把Angular项目看作是一个独立的模块,把项目整体引入到底层项目中。因此,我们可以预先把Angular项目编译好,放到底层项目的一个目录下。在运行底层项目时,在index.html里将Angular项目引进来,独立运行。




项目融合

底层项目和Angular项目均能独立,但是要让两者融合起来,会遇到以下几个问题:

1.底层项目中如何渲染出Angular项目。

2.Angular项目依赖底层项目的资源,如何保证Angular项目在底层项目运行起来后再运行。

3.如何解决底层项目和Angular项目的路由冲突问题。

渲染Angular项目

底层项目分为两部分,一部分是底层框架服务,另一部分是具体云服务。现在我们要做的是把老的云服务项目替换成新的Angular项目,因此我们可以直接在渲染老的云服务的地方替换成新的Angular项目的渲染容器。

底层框架服务对页面渲染上做了一些体验上的优化,因此必须保留原模板中的ui-view,使底层项目正常运行起来,实际上老的云服务项目的渲染内容已经转发到新的Angular项目上面。

Angular项目对底层项目的依赖

底层框架服务给云服务提供了很多公共变量与服务,这些变量和服务是各个云服务必须要使用的,否则云服务将不能正常运作。

启动顺序问题

对于Angular项目来说,要使用底层框架服务提供的内容,首先要求Angular项目在底层项目运行起来之后再运行。这里采用Augular中的APP_INITIALIZER令牌来解决这个问题。APP_INITIALIZER是一个函数,在程序初始化的时候被调用。这里在根模块的providers中以factory的形式来配置。

import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";

import { AppInitService } from "./services/app-init.service";
import { AppComponent } from "./app.component";

@NgModule({
 declarations: [AppComponent],
 imports: [BrowserModule],
 providers: [
     AppInitService,
    {
         provide: APP_INITIALIZER,
         useFactory: initializeApp,
         deps: [AppInitService],
         multi: true
    }
],
 bootstrap: [AppComponent]
})
export class AppModule {}

export function initializeApp(appInitService: AppInitService) {
   return (): Promise => {
       return appInitService.Init();
  };
}

在appInitService里,先获取到底层框架的资源,再进行Angular项目的初始化。

import { Injectable } from "@angular/core";

@Injectable()
export class AppInitService {
   constructor() {}

   Init() {
       return new Promise((resolve, reject) => {
           // 获取到底层框架服务的资源
           resolve();
      });
  }
}

资源依赖问题

底层项目使用的是AngularJs,Angular项目获取底层框架服务提供的资源不能通过Angular的方式引入,因此需要借助AngularJS的注入器获取在底层框架中注册的服务组件:

static get(inject: string): any {
return (window as any).angular.element("html").injector().get(inject);}
如,要获取 $rootScope:
 rootScope = (window as any).angular.element("html").injector().get(‘$rootScope’);

路由冲突问题

Angular项目本身有自己的路由,但是Angular项目是运行在底层框架之上的,Angular项目的路由将会被底层框架所拦截。因此,我们也需要在底层框架的项目中配置相同的路由,以免Angular项目中的有效路由被底层框架识导向为404。

Angular项目路由:

{
   path: "",
   redirectTo: "ng2app1",
   pathMatch: "full"
},
{
   path: "ng2app1",
   loadChildren: "./ng2app1/ng2app1.module#Ng2app1Module",
},
{
   path: "ng2app2",
   loadChildren: "./ng2app2/ng2app2.module#Ng2app2Module",
}
 
底层框架路由:
var configArr = [
  {
       name: "ng2app1",
       url: "/ng2app1"
  },
  {
       name: "ng2app2",
       url: "/ng2app2"
  }
];

另外,由于底层项目使用的是hash路由,Angular项目中也要做相应的配置,默认是使用的是PathLocationStrategy,需要切换到hash模式。

import { LocationStrategy, HashLocationStrategy } from "@angular/common";

...
providers: [
  {
       provide: LocationStrategy,
       useClass: HashLocationStrategy
  }
]

总结

以上方案是在底层框架升级周期长的前提下的一个临时方案,实际上还是存在着不少的问题。比如底层框架对于老的云服务容器是有统一管理的,老的云服务容器会针对不同的场景能够自适应,而融合方案中的Angular项目则不能;每次启动整个项目时,必须要预先编译好里面的Angular项目,再去启动外层的底层框架,开发效率比较低。因此,后续GeminiDB服务应该在底层框架升级后,尽快适应到新的底层框架体系中,提高服务的可用性和稳定性。

 

点击关注,第一时间了解华为云新鲜技术~

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-数据库
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯