AngularJS在应用程序之前加载数据

我有一个AngularJS应用程序，我需要一些基本信息，通过异步调用从服务器获取，然后才能继续加载或处理页面。AngularJS在应用程序之前加载数据

我知道还有其他类似的问题，但我发现的其他所有其他问题都与在初始化特定部件（指令，控制器，工厂等）之前加载数据有关。

我想要的是在多个地方使用这些数据，无论是组件，指令等都无所谓。因为如果我在其中一个中初始化时没有使用数据，我将无法继续。

例如：我在我的footer中使用Google地图显示位置的div，所以我需要位置才能运行（当前位于指令内）放置Google地图的代码。我做了一个蹩脚的例子来说明这个问题（没有解决下面提到的问题）。

https://plnkr.co/edit/2RkansVp3NQNx3Tb4lMD?p=preview

我做

我能解决使用UI路由器解决此问题，但它似乎并没有被这样做的正确方法。我正在使用“空白”状态来解析数据，并将index.html中的基本元素移至此app.html页面，这将成为我的索引，但由于需要加载数据，因此我必须移动。

这是我的代码：

.state('app', { 
    abstract: true, 
    views: { 
     'main': { 
      templateUrl: 'view/app.html' 
     } 
    }, 
    resolve: { 
     dataLoad: function($q, api, store) { 
      var promises = { 
       //[..loading more data..] 
       location: api.request('getLocation') 
      } 

      return $q.all(promises).then(function(resolve){ 
       //[..resolving more data..] 
       return store.location = resolve.location; 
      }) 
     } 
    } 
}) 
.state('home', { 
    parent: 'app', 
    url: '/Home', 
    views: { 
     'app': { 
      templateUrl: 'view/home.html' 
     } 
    } 
})

的index.html

<body ui-view="main"></body>

app.html

<header>[...]</header> 

<main ui-view="app"></main> 

<footer>[...]</footer>

这样我可以正常启动所有的数据，自app.html无线只会在父应用程序状态的解析之后加载。

但是，正如您所看到的，我的index.html完全是空的，为了解决这种情况，我必须创建app.html。

这是要走的路吗？或者在启动我的应用程序之前加载数据还是在其他区域加载数据（例如，.run），并且等到所有数据都解决为止，是否有更好的/正确的方法？

来源

2017-03-02 celsomtrindade

您需要加载的这些数据只加载一次...或者需要多次检索（例如，如果它随时间变化，然后您需要再次检索）？ – lealceldeiro

@lealceldeiro只有一次。数据可能会改变，但只有当用户自己改变时，这不是经常进行的。 – celsomtrindade

根据[解决方案的文档]（https://github.com/angular-ui/ui-router/wiki#resolve），只有在解析调用返回的承诺解决之后，才会进入状态。我注意到你的评论表明你在“$ q.all'调用的解析中”加载了更多的数据“，但没有从中返回承诺。如果是这种情况，只要您拥有所有数据，您就需要从该呼叫中返回另一个承诺。你也可以查看嵌套状态，并将'resolve'设置为“root”状态，然后使用下面的数据的状态，如“root.home”... –

EDITED：等待异步调用，然后引导你的应用程序

(function() { 
    var initInj = angular.injector(['ng']); 
    var $http = initInj.get('$http'); 
    $http.get('<your_req_url>').then(
    function (res) { 
     //set your data camming from server in 'res' 
     //bootstrap app! 
     angular.element(document).ready(function() { 
      angular.bootstrap(document, ['myApp']); 
     }); 
    } 
); 
})();

========================== =============

原帖

您应该使用运行 FUNC的AngularJS module的。在SO上有一个related question，其中详细解释了这个主题。

但基本上你可以这样做：

angular.module('app',[]) 
    .run([function(){ 
      //..load all your required data here 
    }]);

贴膜的数据后，你可以把它放在一个服务，因此，如果用户更改数据，你可以在未来使用该服务更新。

来源

2017-03-02 22:44:11 lealceldeiro

我知道.run块会在控制器和其他所有东西之前运行。但是，在数据仍在处理时，它不会阻止它继续。这就是问题。当指令被激活时，我需要已经有数据。 – celsomtrindade

当你说'数据还在被处理的时候。'......我们在谈论什么类型的处理？某种类型的异步操作（或类似操作）会在该块执行后改变数据？ – lealceldeiro

我通过$ http服务从服务器获取这些数据。 – celsomtrindade

AngularJS在应用程序之前加载数据

回答

相关问题