Question

目前我有一个这样的文件：

app.config([
    '$locationProvider',
    '$sceDelegateProvider',
    '$sceProvider',
    '$stateProvider',
    ($locationProvider,
     $sceDelegateProvider,
     $sceProvider,
     $stateProvider) => {

        $locationProvider.html5Mode(true);
        $sceProvider.enabled(false);

        var home = {
            name: 'home',
            //template: '<div data-ui-view></div>',
            url: '/home/'
        };

        var homeAccess = {
            name: 'home.access',
            url: 'access',
            views: {
                'home@': {
                    templateUrl: 'app/access/partials/webapi.html'
                }
            },
            onExit: ['accessService', (acs: IAccessService) => {
                acs.clear();
            }]
        };



    $stateProvider
        .state(homeAccess)
        .state(home);
}])

问题是我有这么多州，它现在已经发展到超过1,200行。

是否可以将app.config拆分为多个文件，如果可以，我该怎么办呢？

Answer 1

您可以看看这个，以了解如何在Angular中构建代码 Best Practices Directory Structure。您可以使用状态创建不同的文件，并在每个功能文件夹中将它们分开。如果您不想按文件夹分隔它们，只需将它们放在单独的文件中即可。在每个文件中，您只需导出您注册为配置的功能。

这是本国路线（home-route.js）：

function stateConfig ($locationProvider, $sceDelegateProvider, $sceProvider, $stateProvider) {
        $locationProvider.html5Mode(true);
        $sceProvider.enabled(false);

        var home = {
            name: 'home',
            template: 'Home',
            url: '/home'
        };



    $stateProvider
        .state(home);
}

module.exports = stateConfig;

这将是访问路由（home-access-route.js）：

    function stateConfig ($locationProvider, $sceDelegateProvider, $sceProvider, $stateProvider) {
        $locationProvider.html5Mode(true);
        $sceProvider.enabled(false);

        var homeAccess = {
            name: 'home.access',
            url: '/access',
            template: 'Access',
            parent: 'home'
        };



    $stateProvider
        .state(homeAccess)
}

module.exports = stateConfig;

然后在您的模块/应用程序的index.js文件中，您将执行以下操作：

var TestsRoute  = require('./home-route.js');
var HomeAccessRoute  = require('./home-access-route.js');

var app = angular.module('HomeAccess', []);

app.config(['$locationProvider', '$sceDelegateProvider', '$sceProvider', '$stateProvider', HomeRoute]);    
app.config(['$locationProvider', '$sceDelegateProvider', '$sceProvider', '$stateProvider', HomeAccessRoute]);

module.exports = app.name

因此，在您初始化应用程序的位置，您将拥有已创建的所有单独模块，并将其注册为应用程序的依赖项

Answer 2

这些是我的路线配置文件。我已将dashboard.home和dashboard.settings 州配置 分成两个不同的文件。我确定您可以在三个不同的文件中创建三个文件，如dashboard（父级）和两个子级状态 - dashboard.home和dashboard.settings。请注意，我已将dashboard和dashboard.home放在同一个文件中。

<强>仪表板home.ts

(() => {
   'use strict';
   //
   angular
      .module('app')
      .config(function($urlRouterProvider, $stateProvider: angular.ui.IStateProvider) {
         let
            publicPath = 'app/state/core/public/',
            dashboard = 'app/state/core/dashboard/';
         $stateProvider
            // DASHBOARD
            .state('core.dashboard', {
               url: '/dashboard',
               abstract: true,
               templateUrl: dashboard + 'view.html',
               controller: 'DBCtrl',
               controllerAs: 'dashboard'
            })
            .state('core.dashboard.home', {
               url: '/home',
               views: {
                  content: {
                     templateUrl: dashboard + 'home/view.html',
                     controller: 'DBHomeCtrl',
                     controllerAs: 'vm'
                  }
               }
            });
      });
})();

<强>仪表盘 - 设置 - route.ts

(() => {
   'use strict';
   angular
      .module('app')
      .config(function($urlRouterProvider, $stateProvider: angular.ui.IStateProvider) {
         let
            publicPath = 'app/state/core/public/',
            dashboard = 'app/state/core/dashboard/';

         $stateProvider
            .state('core.dashboard.settings', {
               url: '/settings',
               views: {
                  content: {
                     templateUrl: dashboard + 'settings/view.html',
                     controller: 'DBSettingsCtrl',
                     controllerAs: 'vm'
                  }
               }
            });
      });
})();

祝你好运。

如何使用angular-ui-router将路由配置拆分为多个文件？

2 个答案: