在Angular应用启动前获取数据并注入到应用中
2017-03-20 11:19
274 查看
在Angular应用启动前获取数据并注入到应用中
在部分业务场景下,我们在启动客户端Angular应用时,可能需要将一些数据注入到Angular应用中,比如:配置文件信息-让应用根据不同的配置信息进行初始化操作,应用的遗留数据信息-实现应用的平滑升级等等。如何实现这样的需求呢
要实现这样的需求,我们需要改变一下Angular应用的启动方式。我们将启动入口函数封装到另外的函数中,并将这个函数导出,导出的函数和普通的函数并没有任何区别。具体示例代码如下:
import { platformBrowserDynamic } from "@angular/platform-browser-dynamic"; import { AppModule } from "./src/app"; export function runAngular2App(legacyModel: any) { platformBrowserDynamic([ { provide: "legacyModel", useValue: legacyModel } ]).bootstrapModule(AppModule) .then(success => console.log("Ng2 Bootstrap success")) .catch(err => console.error(err)); }
接下来,我们可以在Angular的服务,组件,指令中采用Angular提供的依赖注入模引用到我们注入的数据。
import { Injectable } from "@angular/core"; @Injectable() export class MyService { constructor(@Inject("legacyModel") private legacyModel) { console.log("Legacy data — ", legacyModel); } }
接下来,我们可以在任何地方调用我们导出的函数来启动Angular应用程序,例如:
// 启动1 require(["myAngular2App"], function(app) { app.runAngular2App(legacyModel); }); // 启动2 Promise.resolve({data: 'example'}).then((legacyModel) => { app.runAngular2App(legacyModel); })
相关文章推荐
- struts ajax应用二 自动更新获取服务器数据
- 简单应用:通过经纬度获取Google天气数据
- servlet request常见应用一(二):获取表单数据的注意事项
- 获取咕咚运动移动应用中的数据——非官方API
- 使用spring框架,应用启动时,加载数据
- Windows Vista 性能分析:如何使用 xperf 获取精确的启动性能数据
- 我们的应用或多或少都会从网络获取图片数据然后进行显示,下面就将实现一个这样的例子,获取网络中的图片!
- 区分异步和多线程应用场景(IO操作包括获取网络数据用异步,大量耗时的计算用线程)
- Android开发使用run-as获取应用数据
- 【Android应用开发】-(17)获取Google天气预报通过Xml和JSON解析数据
- Android应用开发之获取网络数据
- 推荐制作精良的笔记软件Wire Note 应用键盘钩子技术获取即时数据 资料查阅的好工具 建立代码片段数据库
- servlet request常见应用一(一):各种表单输入项数据的获取
- Android应用开发之获取网络数据
- DirectInput之MouseState应用|鼠标数据获取的大致思路
- [原]as3 flash web 应用 (8)图片批量上传之 向服务器发送和获取额外数据
- 在其他应用中获取SharedPreferences 保存的数据
- 获取本机安装的应用及启动
- 获取当前RCP应用路径数据存储路径