javascript - Angular v1+ : loading different area in page by 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

由 promise 控制的加载菜单过程怎么样？

Note on $q.all() Promises in AngularJs are handled by the $q service. Promises are used to synchronize the execution of tasks on concurrent envirorments, AngularJs's $q.all receives a list of various promises and fires the then callback when all promises on the list gets resolved, in this case, the two promises are the $http.get() of each menu, it's an async promise case so that when the response is sent, it resolves the promise and fires the then() registered callback, eventually will fire $q.all() as well.

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;
    }      
});