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