Tengo más de 100 páginas. Todas las páginas usan plantillas diferentes.

Actualmente, tengo una larga lista de .state ('page.html'). State ('page2.html') etc. Después de 10-15 páginas, creo que esto se vuelve ilegible / difícil de administrar.

¿Existe una manera más fácil / mejor de organizar los estados?

Javascript:

angular.module('app', ['ionic', 'ngCordova', 'app.controllers', 'app.directives', 'app.services', 'app.factories'])

    .run(function ($ionicPlatform) {
        $ionicPlatform.ready(function () {
            // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
            // for form inputs)
            if (window.cordova && window.cordova.plugins.Keyboard) {
                cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
            }
            if (window.StatusBar) {
                // org.apache.cordova.statusbar required
                StatusBar.hide();
            }
            if (typeof navigator.splashscreen !== 'undefined') {
                // org.apache.cordova.statusbar required
                navigator.splashscreen.hide();
            }
        });
    })
    .config(function ($stateProvider, $urlRouterProvider) {
        $stateProvider
            .state('app', {
                url: '/app',
                abstract: true,
                templateUrl: 'templates/main.html',
                controller: 'AppCtrl'
            })

            .state('app.home', {
                url: '/home',
                views: {
                    'menuContent': {
                        templateUrl: 'templates/pages/home.html',
                        controller: 'PageCtrl'
                    }
                }
            }) 
            .state('app.page2', {
                url: '/page2',
                views: {
                    'menuContent': {
                        templateUrl: 'templates/pages/page2.html',
                        controller: 'PageCtrl'
                    }
                }
            })

            //100 .state('page.html')

        // if none of the above states are matched, use this as the fallback
        $urlRouterProvider.otherwise('/app/home');
    });
3
CharliePrynn 4 sep. 2014 a las 17:17

2 respuestas

La mejor respuesta

Puede organizar sus páginas en diferentes módulos y agregar estados específicos del módulo en la configuración del módulo correspondiente. También le sugiero que use ui-router que admite estados anidados y muchas otras características.

Por ejemplo:

angular.module('myapp.appointments', ['ui.router', 'myapp'])
    .config(['$stateProvider', function ($stateProvider) {
        var templatePath = ROOT_PATH + 'scripts/modules/appointments/views/';

        $stateProvider
            .state('appointments', {
                url: '/appointments',
                abstract: true,
                views: {
                    "containerView": {
                        template: '<div ui-view></div>'
                    }
                }
            })
            .state('appointments.list', {
                url: '/list',
                controller: "AppointmentsListCtrl",
                templateUrl: templatePath + '/appointments-list.html' 
            })
            .state('appointments.add', {
                url: '/add/:fromPopup',
                controller: "AppointmentsAddCtrl",
                templateUrl: templatePath + '/add-appointment.html'
            })
    }]);

angular.module('myapp.customers', ['ui.router', 'myapp'])
    .config(['$stateProvider', function ($stateProvider) {
         var templatePath = ROOT_PATH + 'scripts/modules/customers/views/';
         $stateProvider
            .state('customers', {
                url: '/customers',
                abstract: true,
                views: {
                    "containerView": {
                        templateUrl: templatePath + '/index.html'
                    }
                }
            })
            .state('customers.list', {
                url: '/',
                controller: "CustomersListCtrl",
                templateUrl: templatePath + '/list.html'
            });
}]);

Y puede tener la configuración de su aplicación principal que contiene algunos estados comunes como

angular.module('myapp', ['ui.router', 'myapp.appointments', 'myapp.customers'])
       .config(['$stateProvider', function ($stateProvider) {
            $stateProvider
                .state('home', {
                    url: '/',
                    views: {
                        "containerView": {
                            controller: "DashboardCtrl",
                            templateUrl: ROOT_PATH + 'scripts/modules/dashboard/views/dashboard.html'
                        }
                    }
                })
                .state('404', {
                    url: '/404',
                    views: {
                        "containerView": {
                            templateUrl: ROOT_PATH + 'scripts/modules/common/views/404.html'
                        }
                    }
                 });
    }]);
3
Prasad 4 sep. 2014 a las 13:42

En lugar de agregar todos estos estados, ¿no es una mejor idea agregar dinámicamente la plantilla basada en una variable?

Es posible que esté buscando un nombre de plantilla dinámico basado en los parámetros de estado

 $stateProvider.state('app.page', {
   templateUrl: function ($stateParams){
     return 'templates/pages/page/' + $stateParams.pageid+ '.html';
   }
 })

Encontré esta respuesta en:

ruta de plantilla dinámica del enrutador ui

3
Community 23 may. 2017 a las 10:26