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

而不是增加人這些狀態的，是不是一個更好的主意來動態地添加基於一個變量的模板？

你可能會尋找基於狀態的動態模板名稱PARAMS

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

發現這個答案：

ui-router dynamic template path