Angular js снова загружает роутер после запуска приложения

0

Мое требование - разделить маршрутизатор и загрузить его динамически. Поэтому я создал метаданные в формате:

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  ?
  • 0
    Будьте осторожны при написании кода и текста, они должны быть хорошо разделены. В вашем посте выше они объединены, и это затрудняет чтение вопроса.
Теги:

1 ответ

0

Поскольку служба $ 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'
            }
        }
    });
});

Код выше не проверен (хотя он должен работать), но вы получите мой дрейф.

Надеюсь, это поможет кому-то!

  • 0
    Пожалуйста, не отвечайте на этот вопрос (уже помеченный), дайте ему сначала отредактировать / украсить, мы уважаемые разработчики!
  • 1
    Я прокомментировал этот аспект и сам собирался украсить вопрос, но я думаю, что вы правы, он должен научиться писать читаемый текст / код.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню