正在从服务器加载 angular ui-路由

Question

我正在尝试从服务器加载路由。当用户通过 link 导航到路线时，它工作得很好，但是当用户点击 F5 或从书签页面打开路线时，页面将是空的。我在 for 循环后尝试了 $state.reload() 但它导致 "Cannot transition to abstract state '[object Object]'" 错误

var app = angular
    .module("app ", ["ui.router"])
    .config(function ($stateProvider, $urlRouterProvider) {
        app.stateProvider = $stateProvider;
        app.urlRouterProvider = $urlRouterProvider;
    })
    .run(function ($http, $state, $stateParams) {
        $http({
            method: 'POST',
            url: '/Config/GetRoutes'
        }).success(function (data, status) {

            for (i in data.routes) {
                app.stateProvider.state(data.routes[i].name, {
                    url: "/" + data.routes[i].name,
                    templateUrl: data.routes[i].url,
                    controller: 'sectionController'
                });
            }

        });

    })
;

Answer 1

终于找到答案了！

var app = angular
    .module("app ", ["ui.router"])
    .config(function ($stateProvider, $urlRouterProvider) {
        app.stateProvider = $stateProvider;
        app.urlRouterProvider = $urlRouterProvider;

        //defer intecepting 
        $urlRouterProvider.deferIntercept();
    })
    .run(function ($http, $state, $stateParams) {
        $http({
            method: 'POST',
            url: '/Config/GetRoutes'
        }).success(function (data, status) {

            for (i in data.routes) {
                app.stateProvider.state(data.routes[i].name, {
                    url: "/" + data.routes[i].name,
                    templateUrl: data.routes[i].url,
                    controller: 'sectionController'
                });
            }

            // intecepting again 
            $urlRouter.sync();
            $urlRouter.listen();

        });

    })
;

Answer 2

您好，我认为更好的解决方案是编写一个动态添加路由的提供程序，然后在运行函数中使用它。

http://plnkr.co/edit/C2gXMo?p=preview

app.provider("DinamicRouteProvider", DinamicRouteProvider);
function DinamicRouteProvider($stateProvider) {
  return { 
      $get: function( $state ) {
        return {
        addRoute: function (route){
              $stateProvider
                        .state(route.name, {
                        url: '/' + route.name,
                        template: '<div><h2>This is '+route.name+'</h2></div>',
                        controller: 'DynCtrl'

                    });
            console.log('State added', route)
            }
        };
  }
  };
}

正在从服务器加载 angular ui-路由

Loading angular ui-routes from server

angularjs

angular-ui-router