Angularjs организация/структурирование штатов

Question

У меня более 100 страниц. На всех страницах используются разные шаблоны.

В настоящее время у меня есть длинный список .state ('page.html'). State ('page2.html') и т. Д. После 10-15 страниц, я думаю, что это становится нечитаемым/трудно управляемым.

Есть ли более простой/лучший способ организации состояний?

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'); 
    }); 

Answer 1

Вы можете организовать свои страницы в различные модули и добавлять состояния конкретных к модулю в конфигурации соответствующего модуля. Также я предлагаю вам использовать ui-router, который поддерживает вложенные состояния и многие другие функции.

Например:

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' 
      }); 
}]); 

и вы можете иметь конфигурации вашего основного приложения, содержащие некоторые общие состояния, такие как

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' 
         } 
        } 
       }); 
    }]); 

Answer 2

Вместо добавления Al эти состояния, разве это не лучшая идея динамически добавить шаблон на основе переменной?

Вы могли бы искать для динамического имени шаблона на основе состояния Params

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

Найден этот ответ:

ui-router dynamic template path