christopherthielen / ui-router-extras

THIS PROJECT IS NO LONGER MAINTAINED -- Extras for UI-Router for AngularJS. Sticky States (a.k.a. parallel states), Deep State Redirect (for tab-like navigation), Future States (async state definition)
http://christopherthielen.github.io/ui-router-extras/
MIT License
915 stars 211 forks source link

Cant get StateFactory to work the right way #364

Open ashiquemohammed opened 7 years ago

ashiquemohammed commented 7 years ago

I am using $futureStateProvider to load the states in the server and define it in runtime . Below is how my routes file looks like . What my understanding with futureStateProvider was that , when the /url is hit corresponding states are defined for futureState placeholders that are already defined . I need to load some files and I am $ocLazyLoad for that .

var lazyLoad = {};
(function () {
    'use strict';

    /* Setup Rounting For All Pages */
    angular.module("JRAdminApp")

        .config(['$stateProvider', '$urlRouterProvider', '$futureStateProvider', 'apiHost', '$locationProvider', function ($stateProvider, $urlRouterProvider, $futureStateProvider, apiHost, $locationProvider) {

            $urlRouterProvider.otherwise("/");

            // Define the landing and sidebar states
            $stateProvider
                // The Parent State contains all the rest of the state
                .state('landing', {
                    url: "/",
                    data: { pageTitle: 'Landing Page' },
                    resolve: {
                        user: ['$ocLazyLoad', 'UserFactory', function ($ocLazyLoad, UserFactory) {
                            return UserFactory.loginCheck();
                        }]
                    },
                    sticky: true,
                    deepStateRedirect: true,
                    views: {
                        'landing': {
                            templateUrl: "/js/modules/landing/landing.html",
                            controller: "LandingController",
                            controllerAs: "landing",
                            resolve: {
                                preferences: ['user', 'PreferenceFactory', function (user, preference) {
                                    return preference.getUserPreferences().then(function (result) {
                                        // FutureStateResolve.futureStateDeclaration();
                                        return result;
                                    })
                                }]
                            }
                        },
                        'sidebar@landing': {
                            templateUrl: '/js/modules/sidebar/sidebar.html',
                            controller: 'SidebarController',
                            controllerAs: 'sidebar',
                            resolve: {
                                menus: ['user', 'MenuService', '$timeout', function (user, MenuService, $timeout) {
                                    return MenuService.getMenus().then(function (result) {
                                        return result;
                                    });
                                }]
                            }
                        }
                    }
                })

            // Define the future states
            function buildStates($http, $state, $q) {
                return $http.get(apiHost + 'getMenues').then(function (result) {
                    if (result.data.response != "Request not authorized") {
                        proceed(result.data.response)
                    } else {
                  //login page
                    }
                });
            }

            // Build the state
            function proceed(result) {
                angular.forEach(result, function (menus) {
                    angular.forEach(menus.menu, function (state) {
                        var assets = [];
                        var controllerName = state.controller_path.split('/').reverse()[0].replace('.js', '');
                        if (state.asset) {
                            assets = state.asset.map(function (item) {
                                return item.asset;
                            })
                        }

                        assets.push(state.controller_path);

                        var futureState = {
                            name: state.state_name,
                            url: state.url.substring(1),
                            type: 'ngLoad',
                            src: assets,
                            state: { partial_path: state.partial_path, controllerName: controllerName }
                        }

                        console.log(futureState);
                        $futureStateProvider.futureState(futureState)
                        // lazyLoad.stateProvider.state('landing.' + state.state_name, newState)
                    });
                });
            }

            $futureStateProvider.stateFactory('ngLoad', ngLoadStateFactory);

            function ngLoadStateFactory($q, futureState) {

                var defer = $q.defer();

                defer.resolve({
                    url: futureState.url,
                    // data: { tree: [menus.module.name, state.name], pageTitle: state.name, stateId: state.id },
                    reloadOnSearch: true,
                    // resolve: {
                    //     deps: ['$ocLazyLoad', function ($ocLazyLoad) {
                    //         return $ocLazyLoad.load({
                    //             name: 'JRAdminApp',
                    //             files: futureState.assets
                    //         });
                    //     }]
                    // },
                    views: {
                        'main_content': {
                            templateUrl: futureState.state.partial_path,
                            controller: futureState.state.controllerName,
                            controllerAs: futureState.state.controllerName.replace('Ctrl', '')
                        }
                    }
                });
                return defer.promise;
            }

            // Start loading the states
            $futureStateProvider.addResolve(buildStates);
        }])
})();

In the above snippet on runtime , it does not even reach inside the stateFactory definition .