Question

我有超过100页。所有页面都使用不同的模板。

目前，我有很长的.state列表（＆＃39; page.html＆＃39;）。州（＆＃39; page2.html＆＃39;）等。在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 dynamic template path

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

Angularjs组织/构建状态

2 个答案: