Мое требование - разделить маршрутизатор и загрузить его динамически. Поэтому я создал метаданные в формате:
var routetable = {
"records": [
{
'Type': 'CustomView',
"KeyName": "nav/downloads",
"PageUrls": 'Templates/my-downloads.html',
},
{
'Type': 'ListView',
"KeyList": [ "779", "153", "819"],
"RouteName" : "listview-group",
"PageUrls": "Templates/ListView.html"
}
]
};
And i am forming the router using following code :
var iLoop = 0, currentRoute;
for (iLoop = 0; iLoop < rtable.records.length; iLoop++) {
currentRoute = rtable.records[iLoop];
if (currentRoute.Type == "CustomView") {
var routeName = "/" + currentRoute.KeyName;
$routeSegmentProvider.when(routeName, 'nav.' + currentRoute.KeyName)
$routeSegmentProvider.within().segment(currentRoute.KeyName, {
templateUrl: currentRoute.PageUrls,
// controller: 'CookingAndBlastController',
resolve: {
data: function ($timeout) {
return $timeout(function () { return 'SLOW DATA CONTENT'; }, 300);
}
},
untilResolved: {
templateUrl: 'Templates/loading.html'
}
})
}
else if (currentRoute.Type == "ListView") {
for (var j = 0; j < currentRoute.KeyList.length ; j++) {
var routeName = "/" + currentRoute.KeyList[j];
$routeSegmentProvider.when(routeName, 'nav.' + currentRoute.RouteName)
}
$routeSegmentProvider.within().segment(currentRoute.RouteName, {
templateUrl: currentRoute.PageUrls,
// controller: 'CookingAndBlastController',
resolve: {
data: function ($timeout) {
return $timeout(function () { return 'SLOW DATA CONTENT'; }, 300);
}
},
untilResolved: {
templateUrl: 'Templates/loading.html'
}
})
}
}
It works fine when "routetable" metadata is available within app.js .
Но мое требование состоит в том, чтобы получить эти "маршрутизируемые" метаданные при запуске приложения, я буду загружать маршрут маршрутизации с сервера на разные страницы и перезагружать маршрутизатор.
I want to know how to reload router, once the application is started ?
Поскольку служба $ http недоступна на этапе конфигурации вашего приложения (при настройке маршрутизатора), вы не можете запросить массив маршрутизации из API сервера в то время.
Для этого существует несколько обходных путей, но самым простым вариантом является включение js файла с сервера (он может быть динамически генерирован, конечно). Он будет содержать ваши данные маршрутизации и все, что вам может понадобиться.
Ваш js файл может выглядеть так (или как в вашем коде):
angular.module('shared')
.constant('ROUTETABLE', "records": [
{
'Type': 'CustomView',
"KeyName": "nav/downloads",
"PageUrls": 'Templates/my-downloads.html',
},
{
'Type': 'ListView',
"KeyList": [ "779", "153", "819"],
"RouteName" : "listview-group",
"PageUrls": "Templates/ListView.html"
}
]
);
то вы импортируете файл js в index.html:
<script src="https://your-server/path/dynamic-routes.js"></script>
и тогда вы можете использовать свой код маршрутизации, как вы делали до сих пор.
Если вы используете UI Router с состояниями, вы можете создать свои динамические маршруты следующим образом:
ROUTETABLE.records.forEach(function(myRoute) {
$stateProvider.state('main.state' + myRoute['Type'], {
url: '/' + 'some-dynamic-path',
params: {
KeyName: {
value: myRoute['KeyName']
}
},
resolve: {
data: function ($timeout) {
return $timeout(function () { return 'SLOW DATA CONTENT'; }, 300);
}
},
views: {
'main.content@': {
templateUrl: myRoute['PageUrls'],
controller: 'SomeCtrl'
}
}
});
});
Код выше не проверен (хотя он должен работать), но вы получите мой дрейф.
Надеюсь, это поможет кому-то!