Angular v1 +：通過angularjs在頁面中加載不同區域

Question

假設第一次加載網站時，我需要加載左側和頂部菜單。

這兩個菜單都將獨立加載，因此任何人都可以先加載並顯示。 因此，請告訴我如果頂部或左側菜單先加載，則需要同時顯示左側和頂部菜單的技巧。 我需要如何同時顯示兩個菜單。

告訴我我需要在下面更改什么代碼。 以下代碼僅是示例代碼，未經測試。

app.service("TopMenuService", function ($http) {  
    this.getTopMenu = function () {  
        debugger;  
        return $http.get("/employee/getTopMenu");  
    };  
});  

app.service("LeftMenuService", function ($http) {  
    this.getLeftMenu = function () {  
        debugger;  
        return $http.get("/employee/getLeftMenu");  
    };  
});  

app.controller("EmpCtrl", function ($scope, TopMenuService,LeftMenuService) {  

    GetTopMenu();  
    GetLeftMenu();  

    function GetTopMenu() {  

        debugger;  
        var _getTopMenu = EmployeeService.getTopMenu();  
        _getTopMenu.then(function (topmenu) {  
            $scope.topmenu = topmenu.data;  
        }, function () {  
            alert('Data not found');  
        });  
    }  

    function GetLeftMenu() {  

        debugger;  
        var _getLeftMenu = EmployeeService.getLeftMenu();  
        _getLeftMenu.then(function (leftmenu) {  
            $scope.leftmenu = leftmenu.data;  
        }, function () {  
            alert('Data not found');  
        });  
    }      
});  

Answer 1

如果要確保僅在兩個請求都完成后才能繼續操作，請使用$ q.all：

app.controller('EmpCtrl', function($scope, TopMenu, LeftMenu, $q) {
    $q.all([TopMenu.get(), LeftMenu.get()]).then(function(both) {
       var top = both[0];
       var left = both[1];
    });
});

Answer 2

如何由諾言控制的加載菜單過程？

關於$q.all()注意 AngularJs中的承諾由$q服務處理。 Promises用於在並發環境中同步任務的執行，AngularJs的$q.all接收各種promise的列表，並在列表上的所有promise都得到解析后觸發then回調，在這種情況下，兩個promise是$http.get()每個菜單的$http.get()都是異步諾言，因此在發送響應時，它將解析諾言並觸發then()注冊的回調，最終也將觸發$q.all() 。

app.controller("EmpCtrl", function ($scope, $q, TopMenuService, LeftMenuService) {

    $scope.shouldDisplayMenus = false;

    LoadMenus().then(function () {
        $scope.shouldDisplayMenus = true;
    });

    function LoadMenus() {
        return $q.all([
            GetTopMenu(),  
            GetLeftMenu()
        ]);
    }

    function GetTopMenu() {  

        debugger;  
        var _getTopMenu = EmployeeService.getTopMenu();  
        _getTopMenu.then(function (topmenu) {  
            $scope.topmenu = topmenu.data;  
        }, function () {  
            alert('Data not found');  
        });

        return _getTopMenu;
    }  

    function GetLeftMenu() {  

        debugger;  
        var _getLeftMenu = EmployeeService.getLeftMenu();  
        _getLeftMenu.then(function (leftmenu) {  
            $scope.leftmenu = leftmenu.data;  
        }, function () {  
            alert('Data not found');  
        });

        return _getLeftMenu;
    }      
});