loading different area in page by angular

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

4 Replies

Know the answer? Post it — somebody with the same question will find it here.

Bharath Peggem9y ago
Accepted answer
Hi,

It's better to connect server single time to get the topmenu,leftmenu data at a time.
try to use below code its helps you.
1. app.service("MenuService", function ($http) {
2. this.getMenu = function () {
3. debugger;
4. return $http.get("/employee/getALLMenuMaster");
5. };
6. });
In Controller :
app.controller("EmpCtrl", function ($scope, MenuService) {

GetMenu();

function GetMenu() {

debugger;
var _getTopMenu = MenuService.getMenu();
_getTopMenu.then(function (menuMSTr) {
$scope.topmenu = menuMSTr.TopmenuData;
$scope.leftmenu = menuMSTr.LefMenuData;
}, function () {
alert('Data not found');
});
}
});

Thanks,

Bharath peggem
Bharath Peggem9y ago
Sure tri_inn,

Please follow the steps, you get the result,
In Service :
app.factory("MenuService", function ($http) {
return {
GetMenuMaster : function(){
var GetResult = $http.get('/employee/getTopMenu').then(function(data){
            return data.data;
         },function(error){})
    return GetResult;
    }
}
});

In Controller :


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

MenuService.GetMenuMaster().then(function(data){
$scope.TopMenuList = data._topMenuMaster;
         $scope.LeftMenuList = data._leftMenuMaster;
      },function(error){
      });
});

MVC Controller Return Json Result :

public JsonResult GetAllMasters()
{
     TopMenuModel[] topmenuList = TopMenuInfo.ToArray();     ----take TopMenu master details Array
      LefMenuModel[] leftmenuList = LeftMenu.ToArray(); ----take LeftMenu master details Array
      var jsonResult = Json(new
      {
               _topMenuMaster = topmenuList,
              _leftMenuMaster = leftmenuList
       }, JsonRequestBehavior.AllowGet);
      jsonResult.MaxJsonLength = int.MaxValue;
      return jsonResult;
}

Enjoy the coding ,

Thanks,
Bharath Peggem
9y ago
how to write server side code which will return two menu data as a json?

you show load all menu data in single trip ?

so show me a asp.net mvc action which will return top and left menu data in single json and als show how angular extract top menu and left menu data from single json.

thanks
9y ago
_getTopMenu.then()

tell me what then function does ?

is it any angular specific function ?