我正在创建一个 CMS 系统,因此我希望动态创建状态。由于您无法在配置阶段发出 http 请求,因此我决定在 .run() 函数中添加路由,如下所述:http://blog.brunscopelliti.com/how-to-defer-route-definition-in-an-angularjs-web-app http://blog.brunoscopelliti.com/how-to-defer-route-definition-in-an-angularjs-web-app
现在,当我使用 ui-sref 指令在导航部分中显示链接列表时,附加的 url 有 2 个正斜杠,而不是一个。控制器和所有内容都被相应地调用,但我似乎无法摆脱双斜杠。有任何想法吗?
这是相关代码:
app.js
var $stateProviderReference;
angular.module('app', [
'ui.router', // Angular UI Routing
'ngStorage', // Angular Storage (local, cookies, session)
'ngAnimate', // Angular Animation
'angular-loading-bar', // Angular Loading Bar
'restangular', // Restangular
'angular.assets.injector', // Custom assets injector
])
.config(function($stateProvider, $urlRouterProvider, RestangularProvider, $httpProvider, cfpLoadingBarProvider){
// Save a reference of our stateProvider
$stateProviderReference = $stateProvider;
// Irrelevant configuration
// States (routes)
$stateProvider
/*
|
| Frontend
|
*/
.state('frontend', {
url: '/',
views: {
'': {
templateUrl: 'app/views/frontend/templates/default/bootstrap.html',
controller: 'FrontendCtrl'
},
'nav@frontend': {
templateUrl: 'app/views/frontend/templates/default/partials/navigation.html',
controller: 'NavCtrl',
resolve: {
pages: function(PageService){
return PageService.all();
}
}
},
'footer@frontend': {
templateUrl: 'app/views/frontend/templates/default/partials/footer.html',
controller: 'FooterCtrl'
},
'page@frontend': {
templateUrl: 'app/views/frontend/pages/page.html',
controller: 'PageCtrl'
}
}
});
.run(function($rootScope, $location, $state, $stateParams, AuthService, CSRF_TOKEN, PageService){
// Retrieve all the pages
PageService.all().then(function(pages){
// Loop through all the pages
angular.forEach(pages, function(page){
// If this is not the homepage
if( page.routeName !== 'frontend' )
{
// Add a state to our stateProvider
$stateProviderReference.state(page.routeName, {
// Set the desired url
url: page.url,
// Views that we are populating
views: {
// Override the page view partial
'page@frontend': {
templateUrl: 'app/views/frontend/pages/page.html',
controller: 'PageCtrl'
}
}
});
}
});
});
navigation.html 部分
<ul class="nav navbar-nav">
<li ng-repeat="page in pages">
<a ng-class="{'active': isActive({{page.routeName}})}" ui-sref="{{ page.routeName }}">{{ page.title }}</a>
</li>
</ul>
从数据库检索的页面数据的格式如下:
{
id: 1,
routeName 'frontend.home',
title: 'Homepage',
url: '/home',
metaData: {
tags: "some random tags",
desc: "some random description"
},
content: "Html goes here",
deletable: 'yes' // or 'no'
}
所以除了双斜杠之外,一切似乎都有效。当我单击为上述示例代码生成的链接时,它会将我发送到以下网址:
http://localhost/CMSv2/public/#//home
代替
http://localhost/CMSv2/public/#/home
我尝试从routeName 属性中删除正斜杠,然后它不会附加双斜杠,但无法再访问控制器,并且一切似乎都中断了。