Angularjs 구성/구조화 상태

Question

나는 100 쪽 이상 있습니다. 모든 페이지는 다른 템플릿을 사용합니다.

현재, 나는 .state ('page.html'). state ('page2.html') 등의 긴 목록을 가지고있다. 10-15 페이지가 지나면 이것을 읽을 수 없거나 관리하기가 어려워진다.

주를 구성하는 더 쉽고/더 좋은 방법이 있습니까?

자바 스크립트 : 대신 알에게 이러한 상태를 추가

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

당신은 다른 모듈로 페이지를 구성하고 특정 상태를 추가 할 수 있습니다

는 당신은 상태에 따라 동적 템플릿 이름을 찾고 될 수

는

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

이이 답을 찾을 수 PARAMS 해당 모듈의 구성에있는 모듈로 전송합니다. 또한 중첩 된 상태와 다른 많은 기능을 지원하는 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

, 그것은 변수를 기반으로 템플릿을 추가이 동적으로 더 좋은 생각이 아니다?

ui-router dynamic template path