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

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

angularjs

AngularJS在应用程序之前加载数据,angularjs,Angularjs,我有一个AngularJS应用程序，在继续加载或处理页面之前，我需要一些基本信息，这些信息是通过异步调用从服务器获得的我知道还有其他类似的问题，但我发现的所有其他问题都与在初始化特定部分（指令、控制器、工厂等）之前加载数据有关我想要的是在多个地方使用这些数据，不管它是组件、指令等。因为如果我在其中一个没有数据的地方初始化，我将无法继续例如：我在我的页脚中有一个div，其中我使用谷歌地图显示了一个位置，因此我需要该位置，然后才能运行（当前在指令中）代码来放置谷歌地图。我制作了一个plunke

我有一个AngularJS应用程序，在继续加载或处理页面之前，我需要一些基本信息，这些信息是通过异步调用从服务器获得的

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

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

例如：我在我的

页脚中有一个div，其中我使用谷歌地图显示了一个位置，因此我需要该位置，然后才能运行（当前在指令中）代码来放置谷歌地图。我制作了一个plunker来说明这个问题（没有下面提到的修复）


我所做的
我可以通过使用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


app.html
[…]
[...]

这样，我可以正确地初始化所有数据，因为app.html将仅在父应用程序状态解析后加载
但是，正如你所看到的，我的index.html是完全空的，我不得不创建app.html来解决这个问题

这是路吗？还是有更好/正确的方法在启动应用程序之前加载数据，或者在其他区域加载（例如，.run
）并等待所有数据得到解决？
您需要加载的数据只加载一次。。。或者它需要多次检索（例如，如果它在时间上发生变化，然后您需要再次检索）？@Lealcelderio，仅检索一次。数据可能会更改，但仅当用户自己更改时才会更改，这不是经常做的事情。根据您的状态，在解析调用返回的承诺得到解决之前，不会输入数据。我确实注意到，您的评论表明您在$q.all
调用的解析中“加载了更多数据”，但没有从中返回承诺。如果是这样的话，您只需要在获得所有数据后从该调用返回另一个承诺。您还可以查看嵌套状态并将解析置于“根”状态，然后是使用下面数据的状态，如“root.home”…@MikeMcCaughan我理解这个概念。也许我写错了，但是所有加载的数据都被正确解析了。如果我按照我展示的方式做，效果会很好。但问题是，我需要创建一个新文件，将我通常直接放在索引上的内容放在索引上，以避免这些数据尚未准备好的错误。是的，这就是我提到嵌套状态的原因。您不需要对单独的文件执行任何操作，只要您明智地配置您的状态。
<body ui-view="main"></body>

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

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

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