Angular ui路由器:添加templateUrl破坏路由
Angular ui-router: adding templateUrl breaking routing
我遇到一个问题,一旦templateUrl
添加到ui-router
子状态,应用程序将不再执行到该状态的路由。当它只是一个模板时,它工作得很好。
app.js:
app.config(['$stateProvider', '$locationProvider', '$urlMatcherFactoryProvider', '$urlRouterProvider',
function ($stateProvider, $locationProvider, $urlMatcherFactoryProvider, $urlRouterProvider) {
$urlMatcherFactoryProvider.caseInsensitive(true);
$urlMatcherFactoryProvider.strictMode(false);
$urlRouterProvider.otherwise('/page-not-found');
$stateProvider
.state('dashboard', {
url: '/',
views: {
'header': {
template: 'header'
},
'nav': {
template: 'nav'
},
main: {
template: 'You are on the homepage'
}
}
});
$locationProvider.html5Mode(true);
}]);
app.run(['$rootScope', 'userService', '$state', function ($rootScope, user, $state) {
$rootScope.$on("$stateChangeError", console.log.bind(console));
if (!user.exists) {
$state.go('user.reg');
}
}]);
User.states.js:
.config(['$stateProvider', function ($stateProvider) {
$stateProvider
.state('user', {
url: '/users',
abstract: true,
views: {
'header': {},
'nav': {},
'main': {
template: '<ui-view/>'
}
}
})
.state('user.reg', {
url: '/register',
//template: 'This will show fine',
templateUrl: '/app/Users/User.login.html' // this will break
});
}]);
更新
若在初始页面中添加ui-sref="user.reg"
,则可以使用templateUrl
和template
导航到状态/页面精细。所以当我尝试使用state.go('user.reg');
时,这只是一个问题
这意味着解决方案正在使用$location
提供程序来更改路径。具有相同的效果,但看起来确实相当错误
问题出在相对路径上。
看看这个代码:
$locationProvider.html5Mode(true);
您启用了html5模式,为了实现这一点,您在html中设置了基本ref,它可能看起来像这样:
<base href="/">
您的问题可能是模板的路径不是"yoursite.com/app/Users/User.login.html"
有关代码的工作版本,请参阅此Plunker。然后进入html代码并取消对基本标记的注释,注意到它将中断。
相关文章:
- Emberjs应用程序加载在除Index之外的所有路由上
- 正在使用$location.path(.)路由ng视图
- 在AngularJS应用程序中使用封装指令和路由的推荐方式是什么
- 未激发路由的控制器属性上的观察者
- AngularJS ui路由器html5模式中断路由
- 发送json对象或使用express路由呈现视图
- 使用主干网和rails的静态页面路由
- 如何使用Passport保护路由终结点
- 有没有办法用routerLink/router.navigation附加查询/路由参数
- Nodejs和express路由,如何处理客户端的承诺
- TinyMCE实例在切换角度路由选项时会消失
- 什么'在Express中路由时,应用程序级中间件和路由器级中间件之间的区别是什么
- 使用Ampersand.js路由模块化应用程序
- Angular 2路由已弃用:如何检测CanActivate
- 404 Angularjs TemplateUrl路由错误
- angular js路由中提供的TemplateURL是't从节点获取响应时加载所需的文件
- Angular ui路由器:添加templateUrl破坏路由
- templateUrl路由本地.html文件
- 在UI-Router的嵌套路由中,子状态加载父状态templateUrl
- angularjs,使用路由中的一个函数作为templateUrl