1

suppose when first time web site load then i need to load left and top menu.

both menu will load independently and so anyone may load and show first. so tell me the trick which i need to apply to show both left and top menu at same time if top or left menu load first. some how i need to show both the menu at same time.

tell me what code i need to change in below. below code is just a sample code and not tested.

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');  
        });  
    }      
});
Mou
  • 15,673
  • 43
  • 156
  • 275

2 Answers2

1

If you want to make sure that only after both requests complete you proceed - use $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];
    });
});
PiniH
  • 1,901
  • 13
  • 20
  • just curious to know then is javascript general keyword or it is angular specific? – Mou Apr 27 '17 at 08:25
  • what is $q ? what it does `return $q.all([ GetTopMenu(), GetLeftMenu() ]);` – Mou Apr 27 '17 at 09:03
  • $q is angular's service, it's a replacement for Promise, nowadays ES6 or babel transpiled supports this out of the box with Promise.all – PiniH Apr 27 '17 at 09:03
  • then keyword is specific to $q keyword. i mean we can use then function when we use $q keyword? new in angular. so not aware about all. please share the knowledge. thanks – Mou Apr 27 '17 at 09:04
1

What about a load menus procedure controlled by a 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;
    }      
});
lenilsondc
  • 9,590
  • 2
  • 25
  • 40
  • just curious to know then is javascript general keyword or it is angular specific? – Mou Apr 27 '17 at 08:25
  • what is $q ? what it does `return $q.all([ GetTopMenu(), GetLeftMenu() ]);` – Mou Apr 27 '17 at 09:03
  • then keyword is specific to $q keyword. i mean we can use then function when we use $q keyword? new in angular. so not aware about all. please share the knowledge. thanks – Mou Apr 27 '17 at 09:04
  • @Mou, `$q` is the angularjs implementation of the promise pattern and `$q.all` handles the life cycle of various promises, I've added a note on that, if you have any doubts yet, let me know. – lenilsondc Apr 27 '17 at 11:22
  • thanks for your info. we know that get request is often cache by browser. when we use `$http.get("/employee/getLeftMenu"); ` to call web service which return json then what we can do as a result browser will not cache my get request. please advise me. thanks – Mou Apr 27 '17 at 11:43
  • 1
    @Mou usually we force a `no-cache` header or add a timestamp param to the url `param: { v: new Date().getTime() }` but you can find more detailed errors here in SO http://stackoverflow.com/questions/16098430/angular-ie-caching-issue-for-http – lenilsondc Apr 27 '17 at 11:54
  • one last question is :- ngroute which is angular core routing always inject # in url ? what i need to do if i do not want to show # in url? ui-routing does the same # technique? – Mou Apr 27 '17 at 12:22
  • 1
    You can use `$locationProvider.hmlt5Mode(true)`, if your browser supports the History API it'll render route urls without `#`. Disclaimer, this talk is now going out of context, I suggest you to search on SO or open up a new question, this thread doesn't belong to this issue therefore shouldn't be discussed here. Ask a new question, or find out the answer in one existing question on SO I'll be glad to help. Cheers :{D – lenilsondc Apr 27 '17 at 13:04