程序问答   发布时间:2022-06-01  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了仅在AngularJS中完成初始化后才运行控制器大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。

如何解决仅在AngularJS中完成初始化后才运行控制器?

开发过程中遇到仅在AngularJS中完成初始化后才运行控制器的问题如何解决?下面主要结合日常开发的经验,给出你关于仅在AngularJS中完成初始化后才运行控制器的解决方法建议,希望对你解决仅在AngularJS中完成初始化后才运行控制器有所启发或帮助;

更新资料

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

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

我不确定该答案的有效性,您仍然可以使用这些想法,但是请确保使用实际代码对其进行适当的测试。我将尝试从不采用最新技术来使此答案保持最新。

旧答案

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

当谈到前一个控制器被称为必须解决数据- 你可以很容易地使用resolve的选项ngRoute$routeProvIDer。但是,如果您需要在调用ANY控制器之前加载一些全局数据,则必须即兴进行。

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

1.使用 ui-router

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

我建议使用这种方法。ui-router提供了许多其他功能,包括能够分层解析依赖项的功能,并且被开发人员社区广泛接受。

@H_329_15@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。

template: '<ui-vIEw/>' 必须正确呈现嵌套视图。

2.在根控制器中作出承诺

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

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

这是一个完美的解决方案,但是,它会使代码膨胀,并使其更难以使用和理解(回调地狱)。仅当第一种方法对您不起作用时,我才建议这样做。

3.通过应用程序页面传递数据

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

虑以下示例:

<HTML>

<body>

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

</body>

</HTML>

您可以使用自init()定义application对象的方法手动引导AngularJs应用程序。

我不太喜欢这种方法,因为我确实认为Web应用程序的前端和后端应该高度隔离。理想情况下,您的前端应该是一个静态网站(例如可以通过CDN交付的一堆HTML,CSS和Js),而您的后端应该严格地是一个没有表示层的API服务器(即,它对HTML,CSS和这样)。但是,如果可以在应用程序组件之间进行紧密集成,那么这是一个可行的解决方案。

解决方法

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

例如,我有一个Userservicewith
getCurrentUser()方法,该方法向后端服务器发出请求,以获取有关当前经过身份验证的用户的数据。我有一个控制器,需要该数据才能启动另一个请求(例如,加载用户的余额)。

我该如何实现

大佬总结

以上是大佬教程为你收集整理的仅在AngularJS中完成初始化后才运行控制器全部内容,希望文章能够帮你解决仅在AngularJS中完成初始化后才运行控制器所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。
标签: