So I am writing an angular front end app for an enterprise client and my file structure is as such:

- 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)

So far this has worked out alright (though tips are welcome) the issue i am running into is, if I have two modules (let's say HR and IT) then my main index page needs to utilize the routes from both, but you can only have one angular module per page. I could put all routes in a common app.js file, but that kind of messes with my seperation layout. Is there a solution to this? Or should I use a more elegant file sctructure?

Edit1 - routing

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

Related posts

Recent Viewed