[英]Angular v1+: loading different area in page by angularjs
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');
});
}
});
If you want to make sure that only after both requests complete you proceed - use $q.all: 如果要确保仅在两个请求都完成后才能继续操作,请使用$ 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];
});
});
What about a load menus procedure controlled by a promise? 如何由诺言控制的加载菜单过程?
Note on
$q.all()
Promises in AngularJs are handled by the$q
service . 关于$q.all()
注意 AngularJs中的承诺由$q
服务处理。 Promises are used to synchronize the execution of tasks on concurrent envirorments, AngularJs's$q.all
receives a list of various promises and fires thethen
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 thethen()
registered callback, eventually will fire$q.all()
as well. 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;
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.