当前位置: 首页 > 知识库问答 >
问题:

仅在AngularJS中完成初始化后运行控制器

桑睿识
2023-03-14

在我的AngularJS应用程序中执行任何控制器之前,我有一些全局数据需要加载(即在AngularJS中全局解析依赖项)。

例如,我有一个UserService,它带有getCurrentUser()方法,它向后端服务器发出请求,以获取关于当前通过身份验证的用户的数据。我有一个控制器需要这些数据来启动另一个请求(例如加载用户的余额)。

我怎样才能做到呢?

共有1个答案

太叔经赋
2023-03-14

如果可能,请考虑使用“使用服务器端数据的异步引导AngularJS应用程序”文章中指定的方法。

您现在可以使用angular-deferred-bootstrap模块来实现这一点!

我不确定这个答案的有效性,您仍然可以使用这些想法,但一定要用您的实际代码正确地测试它。我将尝试用never Technologies保持这个答案的最新性。

异步应用程序初始化问题有几种方法。

当涉及到在调用单个控制器之前必须解析的数据时-您可以轻松地使用ngroute$routeProviderresolve选项。但是,当您需要在任何控制器调用之前加载一些全局数据时--您就得即兴发挥了。

我试图在这个答案中收集所有可能的解决方案。我是按优先顺序提供的。

当使用ui-router而不是本机ngroute时,您可以在激活子状态之前创建一个抽象根状态并解析其中的所有数据。

我建议使用这种方法。UI-Router提供了许多额外的特性,包括分层解析依赖关系的能力,并被开发人员社区所接受。

module.config(function($urlRouterProvider, stateHelperProvider) {
    $urlRouterProvider.otherwise('/404');
    stateHelperProvider.setNestedState({
        name: 'root',
        template: '<ui-view/>',
        abstract: true,
        resolve: {
            user: function(UserService) {
                // getCurrentUser() returns promise that will be resolved
                // by ui-router before nested states are activated.
                return UserService.getCurrentUser();
            }
        },
        children: [{
            name: 'index',
            url: '/',
            templateUrl: '/partials/index'
        }, {
            name: 'not-found',
            url: '/404',
            templateUrl: '/partials/404'
        }, {
            name: 'balance',
            url: '/balance',
            templateUrl: '/partials/balance',
            resolve: {
                balance: function(UserService, user) {
                    // Using data resolved in parent state.
                    return UserService.getBalanceByAccountId(user.accountId);
                }
            }
        }]
    });
});

在使用抽象根作用域方法时,statehelper将大大有助于减少代码。

根范围被定义为抽象的,因此不能直接激活,并且它没有URL。

模板:需要“ 才能正确呈现嵌套视图。

您可以做出承诺并将其添加到根控制器内部的$rootscope中,即run()函数。

我创建了一个Plunk来演示这个想法:http://plnkr.co/edit/gpgug5y2s4koz1kokzxe?p=preview

这是一个完美的解决方案,但是,它会使代码膨胀,使其更难使用和理解(回调地狱)。只有当第一种方法对你不起作用时,我才会推荐它。

您可以将所有初始化数据直接包含到服务器上生成的HTML页面中,并从您的应用程序访问它。

请考虑以下示例:

<html>

<body>

    <script src="application.js"></script>
    <script type="text/javascript">
        application.init({
            // Pass your data here.
            userData: { ... }
        });
    </script>

</body>

</html>

并且可以在自定义application对象的init()方法中手动引导AngularJS应用程序。

 类似资料:
  • 问题内容: 在AngularJS应用程序中执行任何控制器之前,我需要加载一些全局数据(即,在AngularJS中全局解析依赖项)。 例如,我有一个with 方法,该方法向后端服务器发出请求,以获取有关当前经过身份验证的用户的数据。我有一个控制器,需要该数据才能启动另一个请求(例如,加载用户的余额)。 我该如何实现? 问题答案: 如果可能,请考虑使用《使用服务器端数据异步引导AngularJS应用程

  • 我有一个JavaFX应用程序,它与用Java编写的控制器类一起使用FXML。在Java控制器中,在FXML节点初始化之前,我需要小心不要对其进行操作(否则我会得到一个NullPointerException),这在运行初始化方法之前是无法保证的。所以我发现自己经常这样做: 控制器在FXML文件中设置如下: 然后是Java文件中的控制器。 这是可行的,但它笨重且重复。我必须创建globalValue

  • 问题内容: 我通过以下方式初始化了SunPKCS11提供程序: 然后,我使用此提供程序初始化KeyStore,以将密钥用于密码操作。 密码操作完成后, 如何使用PKCS11令牌完成会话? 我曾尝试删除该提供程序,但没有成功。 下次我尝试与令牌通信时,我从令牌 CKR_CRYPTOKI_ALREADY_INITIALIZED* 抛出此异常 * 更新 : 我努力了 但它也不起作用。 我有一个用例,其中

  • 问题内容: 我有一个AngularJs应用程序,我想在其中一开始就加载消息和应用程序版本,并将它们保存在本地存储中,然后再在控制器中使用它们。我现在所拥有的是每个控制器中的服务调用(目前为三个): 我只想获取一次应用程序版本并将其存储在此处。我不必每次都检查版本,对(如果新版本中添加了新消息)? 我发现使用$routeProvider的建议,但我的应用程序不是SPA。所以我需要其他想法/建议。对你

  • 问题内容: 有没有办法从纯JavaScript使用$ compile?我正在将基本的javascript和使用Angular的地方结合起来,无法找到一种方法来做这样的事情:http : //jsfiddle.net/DavidSlavik/bFdcJ/1/ 我想我需要使用$ compile,但是从没有任何作用域的地方使用。 问题答案: 说明: 第一个参数设置应用程序的根元素,否则将通过使用伪指令执

  • 问题内容: 我有3个执行类似任务的控制器: PastController 向API查询过去的系统中断。 CurrentController 向API查询当前系统中断 FutureController 向API查询将来的系统中断 它们每个都是唯一的(尽管它们具有相似的功能)。但是,它们都从定义相同的变量开始: 我可以使用服务或工厂在一处初始化这些变量,而不用重复代码吗? 问题答案: 我没有测试代码,