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

除了添加這些狀態以外，基於變量動態添加模板不是更好的主意嗎？

您可能正在根據狀態參數尋找動態模板名稱

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

在以下位置找到了此答案：

ui-router動態模板路徑

Answer 2

您可以將頁面組織到不同的模塊中，並在相應模塊的配置中添加特定於該模塊的狀態。 我也建議您使用支持嵌套狀態和許多其他功能的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'
                        }
                    }
                 });
    }]);