Question

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

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

我想要的是在多个地方使用这些数据，如果它是组件，指令等并不重要。因为如果我在没有数据的情况下初始化其中一个，我将无法继续。

例如：我的footer中有一个div，我使用Google地图显示位置，因此我需要该位置才能运行（目前在指令中）放置Google地图的代码。我做了一个问题来解释这个问题（没有下面提到的修复）。

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

我做了什么

我可以通过使用ui-router解决方案来解决这个问题，尽管它似乎不是正确的方法。我正在使用＆＃34;空白＆＃34;声明仅解析数据并将基本元素从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）并等待所有数据都被解析？

AngularJS在应用之前加载数据

0 个答案: