javascript - 问题用 Angular 划分每个模块的路线

Question

所以我正在为企业客户端编写一个 Angular 前端应用程序，我的文件结构如下:

- App (root)
  - Assets
    - CSS
    - JS (plugins, libraries, etc)
    - Images
    - Fonts
  - Common
    - Header
      -header.html
    - Sidebar, etc
  - Modules
    - HR
      - HR.module.js (the module, for this module, yeah kinda confusing)
      - HR.routes.js (the routes for this module)
      - Employees
        - EmployeesController.js (the controller for this specific peice of thsis module)
        - EmployeesRepository.js (the factory/service for this app)

到目前为止，这已经解决了(尽管欢迎提供提示)，我遇到的问题是，如果我有两个模块(比如说 HR 和 IT)，那么我的主索引页面需要利用这两个模块的路由，但是每页只能有一个 Angular 模块。我可以将所有路由放在一个通用的 app.js 文件中，但这会扰乱我的分离布局。有针对这个的解决方法吗？或者我应该使用更优雅的文件结构？

编辑1 - 路由

var hrModule = angular.module("hrModule", ['ngRoute', 'ngResource'])
    .config(function ($routeProvider, $locationProvider) {
        $routeProvider.when('/HR/Employees', { templateUrl: '/Modules/HR/Employees/Employees.html', controller: 'EmployeesController' });
        $locationProvider.html5Mode(true);
    });

Answer 1

这有点棘手。

您需要:

1. 将所有模块合并到一个应用程序中，以便从一个文件完成路由(这是我在评论中建议的内容；这可能需要一个简单的构建系统，该系统将基于包含的 json 文件构建路由在构建中)。

2. 或者您的窗口中有多个 ng-app，每个都有自己的 View (如下所示:plnkr.co/edit/wpS8LVeEc5gVPS87n5AN?p=preview)。这种方式意味着您需要一个路由系统，该系统根据显示的模块隐藏 View ，但您可以破解此功能。

如果您正在考虑创建一个小型构建系统，该系统在一个文件中定义了路由，我这里有一个入门模板:grunt-angular template 。如果你想获取多条路线，你需要在任务中稍微修改一下。

自述文件应该涵盖大部分内容，否则请随时给我留言。