Angular.js Project Structure
A scalable and maintainable folder structure for Angular.js applications
File Structure
- app
- app.module.js
- app.config.js
- app.routes.js
- index.html
- components
- home
- home.component.js
- home.controller.js
- home.html
- home.css
- about
- about.component.js
- about.controller.js
- about.html
- about.css
- services
- data.service.js
- auth.service.js
- filters
- custom.filter.js
- directives
- custom.directive.js
- shared
- shared.module.js
- constants.js
- assets
- images
- fonts
- tests
- unit
- e2e
- package.json
- bower.json
- gulpfile.js
- karma.conf.js
- protractor.conf.js
- .gitignore
- README.md
Directory Structure Explanation
app/
The main application folder containing all Angular.js related files and folders.
app/app.module.js
Defines the main Angular.js module and its dependencies.
app/app.config.js
Contains configuration settings for the Angular.js application.
app/app.routes.js
Defines the routes for the application using UI-Router or ngRoute.
app/index.html
The main HTML file that serves as the entry point for the Angular.js application.
app/components/
Contains individual components of the application, each with its own folder and multiple files.
app/components/home/
Folder for the home component, containing its JavaScript, HTML, and CSS files.
app/components/home/home.component.js
Component definition for the home page.
app/components/home/home.controller.js
Controller logic for the home component.
app/components/home/home.html
HTML template for the home component.
app/components/home/home.css
CSS styles specific to the home component.
app/components/about/
Folder for the about component, containing its JavaScript, HTML, and CSS files.
app/components/about/about.component.js
Component definition for the about page.
app/components/about/about.controller.js
Controller logic for the about component.
app/components/about/about.html
HTML template for the about component.
app/components/about/about.css
CSS styles specific to the about component.
app/services/
Houses service files that handle data and business logic separate from components.
app/services/data.service.js
Service file for handling data operations.
app/services/auth.service.js
Service file for handling authentication-related operations.
app/filters/
Contains custom Angular.js filters used for data transformation in views.
app/filters/custom.filter.js
Custom filter for data transformation in views.
app/directives/
Stores custom Angular.js directives for extending HTML with new attributes and elements.
app/directives/custom.directive.js
Custom directive for extending HTML functionality.
app/shared/
Contains shared modules, constants, and other common utilities used across the application.
app/shared/shared.module.js
Defines a shared module with common dependencies.
app/shared/constants.js
Defines constant values used throughout the application.
assets/
Stores static assets like images and fonts.
assets/images/
Contains image files used in the application.
assets/fonts/
Stores custom fonts used in the application.
tests/
Contains unit and end-to-end tests for the application.
tests/unit/
Houses unit tests for individual components and services.
tests/e2e/
Contains end-to-end tests for testing the application as a whole.
package.json
Defines the project dependencies and scripts for Node.js and npm.
bower.json
Specifies frontend dependencies managed by Bower.
gulpfile.js
Configuration file for Gulp, a task runner often used in Angular.js projects for automation.
karma.conf.js
Configuration file for Karma, the test runner for unit tests.
protractor.conf.js
Configuration file for Protractor, used for end-to-end testing.
.gitignore
Specifies files and directories that should be ignored by Git version control.
README.md
Documentation file providing an overview and instructions for the project.