Cle*_*eoR 9 meteor angular-ui-router
我正在使用我的网络应用程序的Angular-Meteor解决方案,我选择使用angular-ui:路由器而不是铁路由器.当我决定使用休斯顿管理员时,我遇到了问题.有没有办法将铁路由器限制为/ admin/*路由？
当我正常浏览我的应用程序时,我从视图中的铁路由器收到一条消息,说该路由不存在,但它在angular-ui:rouer下进行.
编辑:定义铁路由器内的路线让我在某处,但现在我的角度ui视图显示两次.
//Iron-Router
Router.route('/(.*)', function (){});
//UI-Router
angular.module("test").config(
function($urlRouterProvider, $stateProvider, $locationProvider){
$locationProvider.html5Mode(true);
$stateProvider
.state('main', {
url: '/',
templateUrl: 'client/app/main/views/main.ng.html',
controller: 'MainCtrl'
})
.state('profile',{
url: '/profile/:user_id',
templateUrl: 'client/app/main/views/profile.ng.html',
controller: 'ProfileCtrl',
resolve: {
currentUser: function($meteor){
return $meteor.requireUser();
}
}
});
$urlRouterProvider.otherwise("/");
});
EDIT2:当页面刷新时,它不会双重显示视图.这是在我通过ui-router更改路由后发生的.我想我可能需要给铁路由器提供像空标签一样的东西.
解决方案:请参阅下面的答案,有关编码示例,请访问https://github.com/cleor41/router-example查看github .
编辑:如果有人想看一个例子,请看这里的链接https://github.com/cleor41/router-example
而不是试图回避铁路由器,我不得不使用它,至少对于初始页面加载.我的初始index.html改变了这一点.
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<base href="/">
<title>test</title>
</head>
<body>
<navbar></navbar>
<div ui-view></div>
</body>
对此
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<base href="/">
<title>test</title>
</head>
<body>
</body>
我创建了一个封装主体的模板.
<template name="default">
<navbar></navbar>
<div ui-view></div>
</template>
最后但并非最不重要的是,我不得不改变我的铁路.
Router.route('/(.*)', function(){
this.render('default');
});
这是有效的,因为铁路由器只会渲染一次模板,然后ui路由器才会启动.我的视图不显示两次,我可以使用休斯顿管理员,两个路由器玩得很好.
注意:应该注意的是,如果你想使用休斯顿管理员和ui路由器,ui路由器将需要捕获所有的admin/*路由,然后在$ stateChangeStart中捕获event.preventDefault().这种方式"urlRouterProvider.otherwise("/")"当你在Meteor方面时,不会弄乱地址栏.