Question

如何同步引导angularjs app

我在app对象上定义了几个常量值。其中一些值需要通过调用服务来设置，这些调用需要在我的任何控制器实例化之前完成。

在下面的示例中，我在名为config的对象上定义了一个值数组。我需要在实例化任何控制器之前设置名为PostIndexMenuID的值。我该怎么做？

我尝试过手动引导（从html中删除ng-app）。我没有使用路由。

理想情况下，我不需要学习，下载，安装，配置，测试和维护另一个框架来实现这一目标。

(function()
{
    angular.module('app', []);
    var app = angular.module('app');
    app.controller('controller', ['$scope', 'config', '$http', controller]);
    app.service('menusService', ['$http', 'config', menusService]);

    // Create config object. Some values are set in app.run

    app.value('config', {
        siteID:             100,
        webRoot:            '',
        apiRoot:            '/api',
        imageRoot:          '/Content/images',
        PostIndexMenuID:    0
    });


    app.run(['$http', 'config','menusService', function ($http, config, menusService) {

        menusService.GetMenuIDByName("PostIndex", function (data) {
            config.PostIndexMenuID = data;  // Need to complete this BEFORE GetPosts on the controller is called
        });

    }]);

    function controller($scope, config, $http) {
        var vm = this;
        vm.Posts = 0;  

        function GetPosts() {
            // In prod we call a service here get posts based on config.PostIndexMenuID
            // for this example just return PostIndexMenuID.  

            vm.Posts = config.PostIndexMenuID;
        };

        GetPosts();  // need to delay calling this until AFTER PostIndexMenuID is set
    };

    function menusService($http, config) {
        this.GetMenuIDByName = function (menuName, callBack) {
            var uri = config.apiRoot + '/menu/GetMenuByName?menuName=' + menuName + '&siteID=' + config.siteID;

            // use a timeout to simulate a slow service for this example and return a dummy value
            var menuID = 99;
            setTimeout(function () {
               callBack(menuID);  
            }, 2000);

        };
    };

})()

// html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="app" >
<head>
    <title></title>
</head>
<body >
    <div ng-controller = "controller as vm">
        <p>PostIndexMenuId is {{ vm.Posts }}</p>
    </div>
    <script src="Scripts/jquery-1.8.2.js"></script>
    <script src="Scripts/angular.js"></script>
    <script src="Scripts/angular-route.js"></script>
    <script src="app/app.js"></script>
</body>
</html>

Answer 1

在Angular.js中有一个非常好的技巧，你可以推迟改变一条路线，直到所有的承诺都得到解决。您可能需要稍微调整一下您的应用程序以满足此方法，但我自己使用它并且它就像一种享受！

$rootScope.$on('$routeChangeStart', function $routeChangeStart(event, next) {

    // Extend the resolution of the route promise to wait for the user authentication
    // process to determine if there's a valid session available.
    next.resolve = angular.extend( next.resolve || {}, {
        authenticating: api.isSession
    });

});

通过使用next.resolve，您可以扩展Angular的承诺序列，这些承诺在路由更改被视为成功之前已解决。在上面的例子中，只要api.isSession返回一个承诺，那么一切都会很好地工作。

只要api.isSession承诺得到解决，路由更改就会成功，在您的情况下，您的控制器将被加载。

如何同步引导angularjs应用程序

1 个答案: