Fatal编程技术网
  • javascript/
  • Javascript 以html格式将数据从头部传递到身体，以引导angular应用程序

Javascript 以html格式将数据从头部传递到身体，以引导angular应用程序

javascript html angular

Javascript 以html格式将数据从头部传递到身体，以引导angular应用程序,javascript,html,angular,bootstrapping,Javascript,Html,Angular,Bootstrapping,我正在开发一个应用程序，其中一部分基于mvc razor和vanilla javascript，另一部分是angular应用程序。我需要将页面头部脚本生成的一些json数据传递到主体部分，这是一个angular应用程序。格式如下所示： provide: APP_INITIALIZER, useFactory: DataFactory, multi: true, deps: [dataService] } 代码： <!DOCTYPE html> <html>

我正在开发一个应用程序，其中一部分基于mvc razor和vanilla javascript，另一部分是angular应用程序。我需要将页面头部脚本生成的一些json数据传递到主体部分，这是一个angular应用程序。格式如下所示：

provide: APP_INITIALIZER, useFactory: DataFactory, multi: true, deps: [dataService] }
代码：

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" type="text/css" href="/js/build/bundles/sharedStyles.css" />
        <link rel="stylesheet" type="text/css" href="/js/build/bundles/staticStyles.css" />
        <script>
            *** (In this script I am calling an api asyncly to get some config and bootstrap the angular app with this config)
        </script>
    </head>
    <body>
        <test-app></test-app>
        <script src="/js/build/bundles/allScripts.js" type="text/javascript </script>
</body>
</html>
但我仍然很迷茫，不知道如何将某些东西从头部传递到身体，让angular应用程序在开始引导之前等待该值以某种承诺完全获取。任何帮助或代码示例都将不胜感激

快速阅读Angular architecture overview文档可能是一个好主意，它为您提供了一个非常全面的解释，说明了它是如何工作的

具体地看服务，服务负责向组件提供数据，组件将调用一个可观察的。所有这些都将在该教程链接中解释

从这里，您可以简单地将组件中的数据绑定到html模板中。

我认为您在这里的路径是正确的<代码>应用程序初始化器是应用程序初始化函数的集合，也可以是异步的

基本上这意味着，它允许您推迟初始化过程，直到完成某项任务（例如加载某些数据）

为了使这项工作正常进行，您需要访问您想要调用的任何API，这些API将延迟您的进程。例如，如前所述，如果有一个异步调用将获取一个配置对象，那么这个异步调用需要在工厂函数中完成，而工厂函数将返回一个承诺

例如：

    {
      provide: APP_INITIALIZER,
      useFactory: () => {
        return new Promise((resolve, reject) => {
          SOME_GLOBAL_WITH_ASYNC_API.fetchConfig(resolve, reject);
        });
      },
      multi: true
    }
其中
SOME\u GLOBAL\u WITH\u ASYNC\u API.fetchConfig
是要调用以获取配置的异步函数

沿着这些路线的东西

希望这有帮助。

angular 2或angular 4是哪个角度？是angular 4你能在typescript中获得数据吗？在typescript中，你可以访问或导入json文件声音，就像只需要一个简单的回调一样。我的问题不是angular应用程序的内部以及如何在html和组件中绑定数据。这是在angular应用程序尚未启动的更高级别上发生的。非常感谢您的回复。我将api调用移动到head的原因是，api调用将花费一些时间，因此加载页面的速度会变慢。我希望将api调用移动到早期步骤，如head中，以节省一些时间，但不幸的是，我不知道如何访问并在工厂中等待结果。 
    {
      provide: APP_INITIALIZER,
      useFactory: () => {
        return new Promise((resolve, reject) => {
          SOME_GLOBAL_WITH_ASYNC_API.fetchConfig(resolve, reject);
        });
      },
      multi: true
    }