0

I'm trying to modularize a large AngularJS app (1.4.8) that is using UI-Router.

The current structure is like this:

transactionApp.config(['$stateProvider', '$urlRouterProvider', '$locationProvider', function ($stateProvider, $urlRouterProvider, $locationProvider) {
    $stateProvider
    .state('root', {
        url: '/transaction',
        views: {
            'header': {
                templateUrl: '/Partials/Shells/Header/header-partial.html',
                controller: 'headerController',
                resolve: {
                    headerItems: ['$http', function ($http) {
                        var data = {};
                        data["__RequestVerificationToken"] = $('[name=__RequestVerificationToken]').val();
                        if (dataForLayout.IsLoggedIn) {
                            return $http({
                                method: 'POST',
                                url: '/myaccount/GetHeaderAccountInfo',
                                data: data
                            });
                        }
                    }]
                }
            },
            'footer': {
                templateUrl: '/Partials/Shells/Footer/footer-partial.html',
                controller: 'footerController'
            },
            'mainPanel': {
                templateUrl: '/Partials/Shells/Transaction/transaction-partial.html',
                controller: 'mainPanelController'
            },
            'successPanel': {
                templateUrl: '/Partials/Shells/Transaction/transaction-success-panel.html',
                controller: 'successPanelController'
            }
        }
    });

    $urlRouterProvider.otherwise('/transaction');

    // Enable HTML5Mode for #-urless
    $locationProvider.html5Mode(true);

}]);

The part I want to modularize is "mainPanel." The mainPanel consists of step 1, step 2, step 3, and the final review/submit page. I'd also like to separate pop-up modals if possible/beneficial. The steps, review page, and modals are dependent on each other.

The URL has to stay "/transaction" no matter which step the user is in.

What I'm envisioning is having the parent as "mainPanel" that connects the sub modules and having sub modules that are "step 1," step 2," and so on.

I've read some articles, but can't seem to find one that talks about further modularizing a module.

3
  • For the URL part, your states don't really need URLs. The usual way is to provide an abstract parent state to your steps and adding it a URL, and then have individual steps states that don't have their separate URL but they do route to their siblings b means of $state.go([state.name]) Commented Jan 4, 2017 at 1:44
  • @RobertKoritnik Could you post it as answer with more detailed explanation? Commented Jan 4, 2017 at 16:48
  • @RobertKoritnik Also, is it possible for the steps to have separate controllers? The main reason I want to modularize it is because the controller is too big. Commented Jan 4, 2017 at 17:29

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.