[英]AngularJs: stateful client-side routing
Here is the demo I have created for asking this question and the inline code as requested: http://jsfiddle.net/Gncja/1/ 这是我为询问此问题而创建的演示,以及按要求提供的内联代码: http : //jsfiddle.net/Gncja/1/
<script type='text/ng-template' id='root.html'>
<list template-id='sidebar.templateId' selected-item-id='sidebar.selectedItemId'></list>
</script>
<script type='text/ng-template' id='sidebar.html'>
<ul style='width:100%;' class='nav nav-list bs-docs-sidenav'>
<li ng-repeat='item in data' ng-class="{active:item.id==selectedItemId}">
<a ng-href='#/{{item.id}}'>
<i class=icon-chevron-right></i>
<span ng-bind='item.text'></span>
</a>
</li>
</ul>
</script>
<body ng-app='main'>
<div ng-view></div>
</body>
function RootCtrl($scope, $routeParams){
$scope.sidebar = {
templateId: 'sidebar',
selectedItemId: $routeParams.navItemId
};
}
RootCtrl.$inject = ['$scope','$routeParams'];
angular.module('main', []).
config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/:navItemId', {
templateUrl: 'root.html',
controller: RootCtrl
}).
otherwise({redirectTo: '/1'});
}]).
directive('list', function(){
return {
restrict: 'E',
replace: true,
scope:{
'templateId': '=',
'selectedItemId':'='
},
template:'<ng-include src="templateUrl"></ng-include>',
controller: function($scope, $element, $attrs){
$scope.templateUrl = $scope.templateId + '.html';
$scope.data = [
{'id':'1', text:'lorem ipsum'},
{'id':'2', text:'dolor sit amet'},
];
}
};
});
This is a small piece of the application I have been working on, but it clearly shows what it is doing. 这只是我一直在研究的应用程序的一小部分,但清楚地显示了它在做什么。 There is the navigation menu in the page, the menu item is a link to the hash that is handled by angular.js routing that initializes the root controller, etc., it's quite tricky to describe, but the code sample clearly shows it.
页面中有导航菜单,菜单项是指向由hash.js路由处理的哈希的链接,该路由初始化了根控制器等,要描述起来非常棘手,但是代码示例清楚地显示了它。 The problem the entire page content is re-rendered each time when I click the navigation menu item - the routing is stateless and it does know nothing about the previous state.
每次单击导航菜单项时,都会重新呈现整个页面内容的问题-路由是无状态的,它对先前的状态一无所知。 I would like to avoid this by re-using the navigation menu data/template rendering result when a user just navigates between the menu items(or browser history).
我想通过在用户只是在菜单项(或浏览器历史记录)之间导航时重新使用导航菜单数据/模板呈现结果来避免这种情况。 Is it possible?
可能吗? I am sure that it is, just want to check out whether someone has good ideas.
我敢肯定,只是想看看某人是否有好主意。 Thanks!
谢谢!
UPDATE: I have found something that might help me: http://www.bennadel.com/blog/2420-Mapping-AngularJS-Routes-Onto-URL-Parameters-And-Client-Side-Events.htm 更新:我发现了一些可能对我有帮助的东西: http : //www.bennadel.com/blog/2420-Mapping-AngularJS-Routes-Onto-URL-Parameters-And-Client-Side-Events.htm
I would put the navigation menu outside ng-view (so it doesn't re-render), but use ng-class in conjunction with location.path() to differentiate the currently selected item. 我将导航菜单放在ng-view之外(因此它不会重新渲染),但是将ng-class与location.path()结合使用来区分当前选择的项目。 Eg,
例如,
<div ng-controller="navCtrl">
<ul ...>
<li ng-repeat='item in navData' ng-class="{active:isActiveRoute(item.id)}">
...
</ul>
</div>
<div ng-view></div>
Then in navCtrl: 然后在navCtrl中:
$scope.navData = [
{'id':'1', text:'lorem ipsum'},
{'id':'2', text:'dolor sit amet'},
];
$scope.isActiveRoute = function(route) {
return '/' + route === $location.path();
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.