AngularJS UI路由器命名视图延迟加载
[英]AngularJS UI router named views lazy loading
问题描述
AngularJS UI router named views loading based on user access rather than loading at the time of state route access. 
AngularJS UI路由器命名视图基于用户访问加载而不是在状态路由访问时加载。
Example: 例：
$stateProvider
.state("login",
{
url: "/login",
templateUrl: getTemplateUrl("login/Index")
})
.state("main",
{
url: "/main",
views:
{
'': { templateUrl: getTemplateUrl('home/shell') },
'test1@main': { templateUrl: 'home/test1' },
'test2@main': { templateUrl: 'home/test2' },
'test3@main': { templateUrl: getTemplateUrl('home/test3') }
}
});
In the above example, when a user accesses the state main the UI-router loads all the named views html from server. 在上面的示例中，当用户访问状态main ，UI路由器从服务器加载所有命名视图html。
Question: 题：
Can we load named-views when required below? 我们可以在下面需要时加载命名视图吗？ I mean whenever we add new tab dynamically then only loading respected view html from server. 我的意思是每当我们动态添加新标签然后只从服务器加载尊重的视图html。
<tab ng-repeat="tab in tabs">
<div>
<div ui-view='{{tab.view}}'></div>
</div>
</tab>
1 个解决方案
解决方案1
5 已采纳 2015-05-23 23:47:12
If you are looking to load your tab content dynamically from template urls based on the value of tabs available to the user as defined in $scope.tabs , you should consider using a simple directive rather than ui-router views. 如果您希望根据$scope.tabs定义的用户可用选项卡的值从模板URL动态加载选项卡内容，则应考虑使用简单指令而不是ui-router视图。
As you have already discovered ui-router will try and load the subviews regardless of whether they are referenced in the main view for that state. 正如您已经发现的那样，ui-router将尝试加载子视图，无论它们是否在该状态的主视图中被引用。
We can however use our own directive to load templates, and therefore because the directive only runs when present in the main view, the templates load on demand. 但是，我们可以使用自己的指令来加载模板，因为该指令仅在主视图中存在时运行，模板按需加载。
template Directive: template指令：
We create a template directive, that allows us to pull in a template into an html element. 我们创建了一个template指令，允许我们将模板插入到html元素中。
.directive('template', ['$compile', '$http', function($compile, $http) {
return {
restrict: 'A',
replace: false,
link: function($scope, element, attrs) {
var template = attrs['template'];
var controller = attrs['controller'];
if(template!==undefined){
// Load the template
$http.get(template).success(function(html){
// Set the template
var e = angular.element(controller === undefined || controller.length === 0 ? html : "<span ng-controller='" + controller + "'>" + html + "</span>");
var compiled = $compile(e);
element.html(e);
compiled($scope);
});
}
}
};
}]);
So this code uses the $http service to get the template from the server. 所以这段代码使用$http服务从服务器获取模板。 Then it uses the $compile service to apply the scope to the angular template, and renders it into the target element. 然后，它使用$compile服务将范围应用于角度模板，并将其呈现到目标元素中。
Usage: 用法：
Update the format of your main tabs template as below. 更新主选项卡模板的格式，如下所示。 Note we no longer reference ui-view , instead we call our template directive passing in the url we want to load in the div . 注意我们不再引用ui-view ，而是调用我们的template指令传递我们想要在div加载的url 。 With the current content of the div being the loading indicator. div的当前内容是加载指示符。
(If the controller attribute is set the template will be wrapped with an <span> having the ng-controller attribute, so a template controller can be applied. This is optional.) （如果设置了controller属性，模板将使用具有ng-controller属性的<span>包装，因此可以应用模板控制器。这是可选的。）
in home/shell : 在home/shell ：
<tab ng-repeat="(tabName,tab) in tabs">
<div template='{{tab.template}}' controller="{{tab.controller}}">Loading {{tabName}} ...</div>
</tab>
Then set the tabs you want to display: 然后设置要显示的选项卡：
$scope.tabs = {
'tab1': { template: 'home/tab1'},
'tab2': { template: 'home/tab2', controller: 'Tab2Controller' },
'tab3': { template: 'home/tab3'}
};
Full source: 完整来源：
This just puts the code given above, as an example AngularJS app. 这只是将上面给出的代码作为AngularJS应用程序的示例。 Assumes the template paths are valid ie home/shell , home/tab1 etc. 假设模板路径有效，即home/shell ， home/tab1等。
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.js"></script>
<meta charset="utf-8">
<title>Angular Views</title>
</head>
<body ng-app="myTabbedApp">
<div ui-view></div>
<script>
angular.module('myTabbedApp', ['ui.router'])
/* Controller for the Main page ie. home/shell */
.controller('MainPageTabController', ['$scope', function($scope) {
// Set the page tabs dynamically as required by your code
$scope.tabs = {
'tab1': { template: 'home/tab1'},
'tab2': { template: 'home/tab2', controller: 'Tab2Controller' },
'tab3': { template: 'home/tab3'}
};
}])
/* Example controller for Tab 2 */
.controller('Tab2Controller', ['$scope', function($scope) {
$scope.hello = "world";
}])
/* State provider for ui router */
.config(['$stateProvider', function($stateProvider){
$stateProvider
.state("login",
{
url: "/login",
templateUrl: "login/index"
})
.state("main",
{
url: "/main",
templateUrl: 'home/shell',
controller: 'MainPageTabController'
});
}])
/* Directive to load templates dynamically */
.directive('template', ['$compile', '$http', function($compile, $http) {
return {
restrict: 'A',
replace: false,
link: function($scope, element, attrs) {
var template = attrs['template'];
if(template!==undefined){
// Load the template
$http.get(template).success(function(html){
// Set the template
var e = angular.element(html);
var compiled = $compile(e);
element.html(e);
compiled($scope);
});
}
}
};
}]);
</script>
</body>
</html>
I hope this helps. 我希望这有帮助。 If you have questions about something just ask. 如果您对某事有疑问，请询问。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.