# toddmotto/angularjs-styleguide

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/toddmotto-angularjs-styleguide).**

5,919 stars · 686 forks

## Links

- GitHub: https://github.com/toddmotto/angularjs-styleguide
- Homepage: https://funforms.com
- awesome-repositories: https://awesome-repositories.com/repository/toddmotto-angularjs-styleguide.md

## Topics

`angular` `angularjs` `es2015` `typescript`

## Description

This is a style guide for structuring AngularJS applications using a component-based architecture. It provides a set of conventions for organizing code into self-contained modules, each encapsulating its own logic, templates, and routing. The guide promotes a modular application structure built from root, component, common, and feature modules to improve maintainability and reusability.

The guide establishes a one-way data flow pattern where parent components pass data to children through bindings, and children communicate changes back up through events. It distinguishes between stateful components that fetch data from services and stateless components that receive data through input bindings. Business logic and API calls are encapsulated in injectable service classes, separate from component controllers.

For DOM manipulation, the guide restricts directives to attribute-based decoration for event handling and element manipulation, avoiding templates or controllers. It also recommends co-locating component-specific stylesheets within module definitions. The guide covers component-based routing with resolved data mapped directly to component bindings for view initialization.

## Tags

### Development Tools & Productivity

- [AngularJS](https://awesome-repositories.com/f/development-tools-productivity/python-development-guides/style-guides/angularjs.md) — Provides comprehensive style guidelines for structuring AngularJS applications with modular components and one-way data flow.
- [Modular](https://awesome-repositories.com/f/development-tools-productivity/code-organization/modular.md) — Provides guidelines for grouping related logic, templates, and routing into self-contained modules. ([source](https://github.com/toddmotto/angularjs-styleguide/tree/master/typescript))

### Web Development

- [Component-Based Architectures](https://awesome-repositories.com/f/web-development/component-based-architectures/component-based-architectures.md) — Organizes code into self-contained modules that each encapsulate logic, templates, and routing for maintainability.
- [Attribute-Based Directives](https://awesome-repositories.com/f/web-development/attribute-based-directives.md) — Provides conventions for attribute-only directives that handle events and manipulate elements without templates.
- [Attribute-Only Directive Restrictions](https://awesome-repositories.com/f/web-development/dom-element-manipulators/directive-based-manipulators/attribute-only-directive-restrictions.md) — Restricts directives to attribute-based DOM decoration and event handling, avoiding templates or controllers. ([source](https://github.com/toddmotto/angularjs-styleguide))
- [Component-Bound Route Resolutions](https://awesome-repositories.com/f/web-development/vue-development/route-mapping/vue-component-bindings/component-bound-route-resolutions.md) — Routes components by defining routing logic inside their module and mapping resolved data to bindings. ([source](https://github.com/toddmotto/angularjs-styleguide))

### Programming Languages & Runtimes

- [Module Organization](https://awesome-repositories.com/f/programming-languages-runtimes/module-organization.md) — Describes structuring an application into root, component, and common modules for maintainability. ([source](https://github.com/toddmotto/angularjs-styleguide))
- [AngularJS Module Organizations](https://awesome-repositories.com/f/programming-languages-runtimes/module-organization/angularjs-module-organizations.md) — Organizes AngularJS code into root, component, common, and feature modules for maintainability and scalability.
- [Component-Based Module Organizations](https://awesome-repositories.com/f/programming-languages-runtimes/module-organization/component-based-module-organizations.md) — Organizes code into self-contained modules that encapsulate logic, templates, and routing for maintainability.

### Software Engineering & Architecture

- [Stateless Functional Components](https://awesome-repositories.com/f/software-engineering-architecture/architectural-design-patterns/design-patterns/functional-design-patterns/stateless-functional-components.md) — Composes components that receive data through input bindings and emit events back to parent components without managing state. ([source](https://github.com/toddmotto/angularjs-styleguide/tree/master/typescript))
- [Data-Fetching Stateful Components](https://awesome-repositories.com/f/software-engineering-architecture/architectural-design-patterns/state-management/stateful-composables/data-fetching-stateful-components.md) — Composes components that fetch data from backend services and pass it down to child components without mutating state. ([source](https://github.com/toddmotto/angularjs-styleguide/tree/master/typescript))
- [Feature Modules with Routing](https://awesome-repositories.com/f/software-engineering-architecture/feature-based-project-structures/android-architectures/multi-module-architectures/feature-modules-with-routing.md) — Encapsulates each feature block in its own module with its own routing and logic. ([source](https://github.com/toddmotto/angularjs-styleguide))
- [Service Injection Patterns](https://awesome-repositories.com/f/software-engineering-architecture/integration-extensibility/dependency-injection/systems/service-injection-patterns.md) — Encapsulates reusable business logic and API calls in service classes injected into component controllers.
- [Module Hierarchies](https://awesome-repositories.com/f/software-engineering-architecture/module-hierarchies.md) — Structures applications into root, component, common, and low-level modules for predictable code organization.
- [Application Bootstrap Modules](https://awesome-repositories.com/f/software-engineering-architecture/pluggable-module-loading/host-defined-module-resolvers/application-bootstrap-modules.md) — Creates a top-level module that bootstraps the app, imports submodules, and defines the base component with a routing outlet. ([source](https://github.com/toddmotto/angularjs-styleguide/tree/master/typescript))
- [Modular Project Structures](https://awesome-repositories.com/f/software-engineering-architecture/project-architectures/modular-project-structures.md) — Organizes an application into root, component, common, and low-level modules with encapsulated logic. ([source](https://github.com/toddmotto/angularjs-styleguide/blob/master/README.md))
- [AngularJS](https://awesome-repositories.com/f/software-engineering-architecture/project-architectures/modular-project-structures/angularjs.md) — Divides AngularJS apps into root, common, component, and feature modules for maintainability and reusability.
- [AngularJS Component Architectures](https://awesome-repositories.com/f/software-engineering-architecture/reusable-component-architectures/angularjs-component-architectures.md) — Provides a complete component architecture for AngularJS with stateful and stateless component patterns.
- [AngularJS Modular Architectures](https://awesome-repositories.com/f/software-engineering-architecture/software-architecture/architectural-patterns/layering-presentation/application-layer-architectures/application-architecture-patterns/modular-application-architectures/angularjs-modular-architectures.md) — Defines a complete modular architecture for AngularJS applications with root, component, common, and feature modules.
- [Business Logic Encapsulations](https://awesome-repositories.com/f/software-engineering-architecture/stateful-logic-encapsulation/business-logic-encapsulations.md) — Encapsulates reusable logic, such as API calls, inside an ES2015 class and injects it into component controllers. ([source](https://github.com/toddmotto/angularjs-styleguide/blob/master/README.md))
- [Stateful and Stateless Component Separation](https://awesome-repositories.com/f/software-engineering-architecture/stateless-architectures/stateful-and-stateless-component-separation.md) — Separates components into stateful data-fetchers and stateless presenters with event-based communication. ([source](https://github.com/toddmotto/angularjs-styleguide))
- [Service-Backed Stateful Components](https://awesome-repositories.com/f/software-engineering-architecture/architectural-design-patterns/state-management/reactive-subscription-systems/component-state-bindings/service-backed-stateful-components.md) — Builds components that fetch data from a backend service and pass it to child components without mutating state directly. ([source](https://github.com/toddmotto/angularjs-styleguide/blob/master/README.md))
- [Application-Specific Container Modules](https://awesome-repositories.com/f/software-engineering-architecture/component-port-definitions/module-registration/container-module-registrations/application-specific-container-modules.md) — Groups all application-specific components into a single container module for internal use. ([source](https://github.com/toddmotto/angularjs-styleguide))
- [AngularJS](https://awesome-repositories.com/f/software-engineering-architecture/integration-extensibility/dependency-injection/systems/service-injection-patterns/angularjs.md) — Wraps AngularJS business logic and API calls in injectable service classes separate from component controllers.
- [Reusable Component Architectures](https://awesome-repositories.com/f/software-engineering-architecture/reusable-component-architectures.md) — Groups all reusable components into a single container module for easy import across applications. ([source](https://github.com/toddmotto/angularjs-styleguide))
- [App-Specific Component Separations](https://awesome-repositories.com/f/software-engineering-architecture/reusable-component-architectures/app-specific-component-separations.md) — Advocates dividing components into shared and app-specific modules for clear separation of concerns. ([source](https://github.com/toddmotto/angularjs-styleguide/tree/master/typescript))

### User Interface & Experience

- [Component Binding Resolvers](https://awesome-repositories.com/f/user-interface-experience/asynchronous-data-fetching/route-resolvers/component-binding-resolvers.md) — Defines routing logic within components and maps resolved data to component bindings for view initialization.
- [One-Way Data Bindings](https://awesome-repositories.com/f/user-interface-experience/component-utilities/ui-frameworks/component-apis/communication-data-flow/component-data-binding/one-way-data-bindings.md) — Passes data into components with one-way bindings and sends changes back up through event objects. ([source](https://github.com/toddmotto/angularjs-styleguide))
- [Route Resolvers](https://awesome-repositories.com/f/user-interface-experience/asynchronous-data-fetching/route-resolvers.md) — Defines routing logic within component modules and maps resolved data to component bindings. ([source](https://github.com/toddmotto/angularjs-styleguide/tree/master/typescript))
- [Service-Fetching Stateful Components](https://awesome-repositories.com/f/user-interface-experience/stateful-class-components/service-fetching-stateful-components.md) — Composes components that fetch data from services and delegate mutation to child components. ([source](https://cdn.jsdelivr.net/gh/toddmotto/angularjs-styleguide@master/README.md))

### Part of an Awesome List

- [Directives and Decorators](https://awesome-repositories.com/f/awesome-lists/devtools/directives-and-decorators.md) — Decorates the DOM with directives that handle events and manipulate elements without templates or controllers. ([source](https://github.com/toddmotto/angularjs-styleguide))
- [Attribute-Based DOM Decorators](https://awesome-repositories.com/f/awesome-lists/devtools/directives-and-decorators/attribute-based-dom-decorators.md) — Provides attribute-only directives for DOM event handling and manipulation without templates or controllers. ([source](https://github.com/toddmotto/angularjs-styleguide/tree/master/typescript))
- [Attribute-Only Directive Decorations](https://awesome-repositories.com/f/awesome-lists/devtools/directives-and-decorators/attribute-only-directive-decorations.md) — Decorates the DOM with attribute-only directives that add custom events or manipulate existing component templates. ([source](https://github.com/toddmotto/angularjs-styleguide/blob/master/README.md))
- [Attribute-Only DOM Directives](https://awesome-repositories.com/f/awesome-lists/devtools/directives-and-decorators/attribute-only-dom-directives.md) — Uses attribute-only directives for DOM event handling and manipulation without templates or controllers.
- [DOM-Only Directive Scopes](https://awesome-repositories.com/f/awesome-lists/devtools/directives-and-decorators/dom-only-directive-scopes.md) — Restricts directives to custom DOM events and manipulation, avoiding templates, controllers, or scope bindings. ([source](https://cdn.jsdelivr.net/gh/toddmotto/angularjs-styleguide@master/README.md))

### Testing & Quality Assurance

- [Component-Based Route Definitions](https://awesome-repositories.com/f/testing-quality-assurance/software-testing/e2e-integration-testing/routing-testing/routing-component-testing/component-based-route-definitions.md) — Defines routing logic within components and maps resolved data to component bindings for view initialization.