AngularJS 1.5组件化项目应遵循的标准项目目录结构咨询

Great question! When working on a componentized AngularJS 1.5 project, the goal is to create a structure that’s modular, maintainable, and aligns with the component-first mindset AngularJS 1.5 introduced (as a stepping stone to modern Angular). Let’s walk through a standard folder structure and key rules to follow:

Here’s a scalable, widely adopted structure that keeps components self-contained and separates concerns:

your-project/
├── package.json          # Dependencies, npm scripts
├── webpack.config.js     # Or gulpfile.js, build configuration
├── index.html            # Application entry point
└── src/
    ├── app/
    │   ├── app.module.js # Root application module
    │   ├── components/   # Reusable global components (shared across features)
    │   │   ├── app-button/
    │   │   │   ├── app-button.component.js
    │   │   │   ├── app-button.template.html
    │   │   │   ├── app-button.scss
    │   │   │   └── app-button.spec.js
    │   │   └── app-modal/
    │   ├── features/     # Business feature modules (self-contained functionality)
    │   │   ├── dashboard/
    │   │   │   ├── dashboard.module.js
    │   │   │   ├── dashboard.routes.js
    │   │   │   ├── components/ # Feature-specific components
    │   │   │   │   └── dashboard-widget/
    │   │   │   ├── services/   # Feature-specific data services
    │   │   │   │   └── dashboard-data.service.js
    │   │   │   └── dashboard.spec.js
    │   │   └── user-profile/
    │   ├── core/         # Global core functionality (single-use, app-wide)
    │   │   ├── core.module.js
    │   │   ├── config/
    │   │   │   ├── app.routes.js
    │   │   │   └── app.config.js
    │   │   ├── services/
    │   │   │   └── auth.service.js
    │   │   └── interceptors/
    │   │       └── http-auth.interceptor.js
    │   └── shared/       # Shared utilities/helpers (non-component assets)
    │       ├── filters/
    │       │   └── date-format.filter.js
    │       ├── utils/
    │       │   └── string-utils.js
    │       └── constants/
    │           └── app.constants.js
    └── assets/
        ├── css/
        │   ├── reset.scss
        │   └── main.scss
        ├── images/
        └── fonts/

To make the most of AngularJS 1.5’s component system, follow these best practices:

1. Keep Components Self-Contained #

Every component (global or feature-specific) lives in its own folder with all its assets:

• Component logic (*.component.js)
• Template (*.template.html)
• Styles (SCSS/CSS)
• Unit tests (*.spec.js)
  This makes components portable—you can drag-and-drop them into other projects without hunting for scattered dependencies.

2. Separate Global vs. Feature-Specific Components #

• Use app/components/ for components reused across multiple features (e.g., buttons, modals, form inputs).
• Use features/[feature-name]/components/ for components that only make sense within that feature (e.g., a dashboard-widget tied to the dashboard’s data structure).

3. Follow Clear Naming Conventions #

• Component names: Use kebab-case for folders and selectors (e.g., app-user-profile), and CamelCase for the component definition in JS:

  angular.module('app').component('appUserProfile', {
    templateUrl: 'app/components/app-user-profile/app-user-profile.template.html',
    bindings: {
      user: '<'
    }
  });
  

• File names: Be explicit: [component-name].component.js, [component-name].template.html—avoid vague names like script.js or template.html.

4. Embrace One-Way Data Binding #

AngularJS 1.5 introduced the < one-way binding for component inputs. Use this instead of = (two-way binding) whenever possible. It reduces coupling between parent and child components and makes data flow easier to track.

5. Keep Components Focused #

Each component should have a single responsibility:

• A user-list component only displays a list of users—don’t put API calls inside it. Instead, pass user data via bindings and handle fetching in a service.
• If a component grows too large, split it into smaller sub-components (e.g., user-list → user-list + user-item).

6. Route Directly to Components #

Instead of using templateUrl in route config, use the component property (AngularJS 1.5+ feature) to map routes directly to components:

angular.module('app').config(function($routeProvider) {
  $routeProvider
    .when('/dashboard', {
      component: 'dashboard'
    })
    .when('/user/:id', {
      component: 'appUserProfile'
    });
});

This keeps route config clean and ties routing directly to your component architecture.

7. Minimize Global State #

Avoid using $rootScope for sharing data between components. Instead, use:

• Component bindings (< for inputs, & for output events)
• Services to hold shared state (e.g., an authService tracking user login status)

8. Test Components Thoroughly #

Write unit tests for every component to validate:

• Input bindings work as expected
• Component logic (like $onInit hooks) runs correctly
• Output events are emitted when triggered

内容的提问来源于stack exchange，提问作者Akash Gadhiya