将标签追加到 URL 的状态提供程序
StateProvider that appends a label to the URL
我正在尝试通过$stateProvider将用户可识别的URL附加到URL的末尾。
例如,对于StackOverflow的问题,它变成了 stackoverflow.com/questions/(question_id)/(问题标题)。我想通过获取question_id然后相应地附加一个短语来在我的 URL 中实现这一目标。有什么想法吗?
$stateProvider
.state('question', {
url: '/question/:qid',
templateUrl: 'q.htm',
controller:'bla'
resolve: {
title: function($http, $stateParams){
return $http.get('title/'+$stateParams.qid);
}
}
});
然后以某种方式将标题附加到 url。
我想
出的一个解决方案是:(单击"位置"和此演示上的表格行)
在 $stateProvider.state 中添加了 id、name 参数
url: "location/:lid/:name",
但是,如果未指定"lid",也不会指定"name",因此,URL将显示"location//",因此,在这种情况下,使lid = "all"和name = ",这样它将"告诉"控制器显示所有位置,而不是特定位置。
lid: function($stateParams){
$stateParams.lid = $stateParams.lid || 'all';
return $stateParams.lid;
},
然后将 lid 作为依赖项并注入到 getName 中。(我使用 $q 作为 $http 的替代体,以表明 promise 在这里对下一个依赖项非常有用)请注意随机超时时间。
getName: ['$q','$timeout','lid', function($q, $timeout, lid){
var deferred = $q.defer();
$timeout(function() {
var names = ['Cool Place', 'Awesome place', 'boring place', 'I want to be here', 'Random Venue'];
deferred.resolve(names[ parseInt(lid) % 4 ]);
}, Math.round(Math.random()*200));
return deferred.promise;
}],
然后将 getName 和盖子注入名称:
name : ['lid', '$state','$stateParams','getName', function (lid, $state, $stateParams,getName) {
if($stateParams.lid.length < 1 || $stateParams.lid == 'all'){ // show all or not set Location ID
$stateParams.name = '';
return '';
}
if($stateParams.name.length > 0){ // if the name is already specified, it's ok. settle
return $stateParams.name;
}
// hyphens are better than %20 in the url
getName = getName.replace(/'s/g,'-');
$state.transitionTo('dashboard.location', {lid:lid, name:getName}, {
reload:true,
inherit:false,
notify:true
})
}]
如果名称尚未在参数中,则转换时将"reload"属性设置为 true。
这是演示(单击"位置"和此演示上的表格行)
将所有内容放在一起:
.state('dashboard.location', {
templateUrl : "apps/location/template/location_template.htm",
controller: 'LocationCtrl',
url: "location/:lid/:name",
resolve: {
ctrl: function($ocLazyLoad){
return $ocLazyLoad.load({
name: "dashboard.location",
files: ['apps/location/location_controller.js', 'apps/location/style/location.css']
});
},
lid: function($stateParams){
$stateParams.lid = $stateParams.lid || 'all';
return $stateParams.lid;
},
getName: ['$q','$timeout','lid', function($q, $timeout, lid){
var deferred = $q.defer();
$timeout(function() {
var names = ['Cool Place', 'Awesome place', 'boring place', 'I want to be here', 'Random Venue'];
deferred.resolve(names[ parseInt(lid) % 4 ]);
}, Math.round(Math.random()*200));
return deferred.promise;
}],
name : ['lid', '$state','$stateParams','getName', function (lid, $state, $stateParams,getName) {
if($stateParams.lid.length < 1 || $stateParams.lid == 'all'){ // show all or not set Location ID
$stateParams.name = '';
return '';
}
if($stateParams.name.length > 0){ // if the name is already specified, it's ok. settle
return $stateParams.name;
}
// hyphens are better than %20 in the url
getName = getName.replace(/'s/g,'-');
$state.transitionTo('dashboard.location', {lid:lid, name:getName}, {
reload:true,
inherit:false,
notify:true
})
}]
}
})
我希望这对其他人有所帮助。
相关文章:
- 在mvc应用程序中,在回发时保留最初隐藏的文本框的隐藏或可见状态
- Web应用程序,将成员状态更新为其他成员
- 在通知点击时使用Ion中的OneSignal插件路由到应用程序中的状态
- AngularJS&Google可视化-使用状态更改处理程序(Google API)在HTML页面上查看$sco
- 使用应用程序状态js和视图在angular js url上传递两个参数
- 来自应用程序状态的Jquery数据表源
- 检测Ionic中特定的应用程序状态变化
- 在基于Strophe.js的聊天应用程序中处理状态
- 检查网络驱动程序是否浏览器仍处于打开状态
- 如何保持JavaScript web应用程序的状态
- 在angular js中,每次应用程序进入状态时,重新加载状态的最佳方式是什么
- 在用于SEO的Marionette应用程序中使用推送状态
- 使用AsyncStorage实例化持久应用程序状态
- 引导程序窗体帮助程序-状态选择器-选择类
- 如何在程序或网站处于活动状态时禁用剪贴板和任务切换操作
- Twitter引导程序:删除/切换类似复选框的按钮组的活动状态
- 如何在React应用程序中处理权限检查(Redux中的状态维护)
- 消除淘汰中引导程序开关状态变化的歧义
- 如何在类似Om的不可变应用程序状态下对关系数据进行建模
- 我如何才能进入一个完整的角度状态应用程序