Question

我正在构建一个有趣和实践的应用程序，并且在应用程序中有一个仪表板模块。该仪表板模块包含其他模块。我这样做是因为仪表板是其中模块的父状态，我认为将它们放在外部文件夹中与所有其他无关模块一起是不对的，因为它们属于仪表板。例如：

/login
/signup
/logout
/profile
/dashboard
    /home
    /settings
    /foo
    /bar

...他们的状态为dashboard.home，其网址为/dashboard/home，依此类推。

在设置文件夹中，我有一个有效的当前设置，但我不知道它是否被视为良好做法。

在设置目录下，我有一些部分和控制器。例如：

/login
/signup
/logout
/profile
/dashboard
    /home
    /settings
        /controllers
            settingsAccount.controller.js
            settingsPassword.controller.js
            settingsPersonal.controller.js
        /partials
            _account.html
            _password.html
            _personal.html
        settings.html
        settings.module.js
    /foo
    /bar

这些部分内容将在settings.html上浏览。我目前这样做是这样的..

settings.html：

<div class="row" ng-controller="LeftSidebarController as sidebar">
    <div class="col-sm-3">
        <div class="page-title">
            <h1 view-title>Settings</h1>
        </div>

        <ul class="list-group">
            <li class="list-group-item" ng-class="{'active': sidebar.currentTab(1)}" ng-click="sidebar.setTab(1)">
                <a href>Account</a> <i class="fa fa-chevron-right list-group-item__arrow-right"></i>
            </li>
            <li class="list-group-item" ng-class="{'active': sidebar.currentTab(2)}" ng-click="sidebar.setTab(2)">
                <a href>Password</a> <i class="fa fa-chevron-right list-group-item__arrow-right"></i>
            </li>
            <li class="list-group-item" ng-class="{'active': sidebar.currentTab(3)}" ng-click="sidebar.setTab(3)">
                <a href>Personal</a> <i class="fa fa-chevron-right list-group-item__arrow-right"></i>
            </li>
        </ul>
    </div>

    <div class="col-sm-7">
        <div class="widget-container widget-container--settings fluid-height">
            <div ng-if="sidebar.currentTab(1)"
                 ng-include src="'app/dashboard/settings/partials/_account.html'"
                 ng-controller="SettingsAccountController as account"></div>

            <div ng-if="sidebar.currentTab(2)"
                 ng-include src="'app/dashboard/settings/partials/_password.html'"
                 ng-controller="SettingsPasswordController as password"></div>

            <div ng-if="sidebar.currentTab(3)"
                 ng-include src="'app/dashboard/settings/partials/_personal.html'"
                 ng-controller="SettingsPersonalController as personal"></div>
        </div>
    </div>
</div>

...我有一个全局控制器 LeftSidebarController ，如下所示：

(function() {

    'use strict';

    angular
        .module('app.controllers')
        .controller('LeftSidebarController', LeftSidebarController);

    function LeftSidebarController() {
        var vm = this;

        vm.tab = 1;

        vm.setTab = function(tabId) {
            vm.tab = tabId;
        };

        vm.currentTab = function(tabId) {
            return vm.tab === tabId;
        };
    }

})();

正如您所看到的，我基本上只是加载其中一个部分并根据侧边栏中单击的选项卡将其附加到控制器上。

有没有人曾经做过这样的事情并且知道更好的方法？我真的很感激一些很好的指导，我不想这样做，因为它对我来说似乎很麻烦。

我想有子子模块，状态类似dashboard.settings.account，网址为/dashboard/settings/account。如果我找不到更好的方法，我可能会走这条路，对我来说似乎有点好，因为一切都有它自己的状态，我将不再包含多个文件和控制器在一个状态。唯一的问题是我不知道我如何处理侧边栏。

谢谢！

Answer 1

当我使用ui-router构建应用时，我通常会这样构建它：

/app
  /components
  /states
    /login
    /signup
    /logout
    /profile
    /dashboard
    states.module.js
  index.html
  app.module.js
  app.config.js

我在components文件夹中放置了按功能组织的所有自定义指令，服务，过滤器等。例如，我可能有一个包含服务和指令的notifications子文件夹。

我的states文件夹中有一个名为states.module.js的文件，如下所示：

angular.module('app.states', [
  'app.states.login',
  'app.states.signup',
  'app.states.logout',
  // etc.
]);

然后每个州子文件夹都有一个模块和与该状态相关的所有文件。它还有一个{state}.config.js文件，可以将状态添加到$stateProvider。

所有这些与您所做的类似（尽管我不会将控制器和模板放在不同的文件夹中）。关键区别在于，在仪表板状态下，我会使用视图。

<强> dashboard.config.js

angular.module('app.states.dashboard')
  .config(stateConfig)
;

function stateConfig($stateProvider) {
  $stateProvider
    .state('dashboard', {
      url: '/dashboard/:view',
      views: {
        'home@dashboard': {
          controller  : 'DashboardHomeViewController',
          controllerAs: 'home',
          templateUrl : 'states/dashboard/home.html'
        },
        'settings@dashboard': {
          controller  : 'DashboardSettingsViewController',
          controllerAs: 'settings',
          templateUrl : 'states/dashboard/settings.html'
        },
        '': {
          controller  : 'DashboardViewController',
          controllerAs: 'dashboard',
          templateUrl : 'states/dashboard/dashboard.html'
        },
      }
    )
  ;
}

我会在该文件夹中为每个视图控制器和模板以及模块文件提供文件。主视图模板文件如下所示：

<强> dashboard.html

<ui-view name="{{dashboard.view}}@dashboard"></ui-view>

希望能回答你的问题。

AngularJS：侧边栏和子页面的模块化方法是什么？

1 个答案: