toddmotto/angular-architecture

Stars
262
Rank 156,136 (Top 4 %)
Language
Created over 7 years ago
Updated almost 2 years ago

toddmotto/angular-architecture

toddmotto

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Angular architecture guide for teams.

Angular Architecture Guide

A cohesive guide for building Angular applications for teams.

⚠️ Work In Progress ⚠️

Folder Structure

index.html
app/
│    app.component.scss
│    app.component.spec.ts
│    app.component.ts
│    app.module.ts
└──  meal-planner/
   │         meal-planner.module.ts
   │         meal-planner.service.spec.ts
   │         meal-planner.service.ts
   ├── components/
   │         meal-viewer/
   │             meal-viewer.component.scss
   │             meal-viewer.component.spec.ts
   │             meal-viewer.component.ts
   │         meal-editor/
   │             meal-editor.component.scss
   │             meal-editor.component.spec.ts
   │             meal-editor.component.ts
   │         meal-recipe/
   │             meal-recipe.component.scss
   │             meal-recipe.component.spec.ts
   │             meal-recipe.component.ts
   ├── containers/
   │         meal-planner/
   │             meal-planner.component.scss
   │             meal-planner.component.spec.ts
   │             meal-planner.component.ts
   └── models/
              meal.interface.ts
              recipe.interface.ts

Stuff I wanna include

Root + feature module architecture
Directory structure
TypeScript models/interfaces
CSS options (Sass/etc)
Component architecture
Container + Presentational components
State management (ngrx/store etc)
Route configuration
Structure practices (maybe lifecycle hooks/DI practices)
Tooling (AoT/Webpack/etc)
Build process info (platforms)
Resources section

angularjs-styleguide

AngularJS styleguide for teams

echo

Lazy-loading images with data-* attributes

fireshell

Fiercely quick front-end boilerplate and workflows, HTML5, Grunt, Sass.

angular-1-5-components-app

A Contacts Manager application built on Angular 1.5 components, ui-router 1.0.0, Firebase.

flare

Unobtrusive event emitter API for Google Universal Analytics event tracking

angular-pizza-creator

Source code for Angular advanced Form APIs pizza builder

fluidvids

Fluid width (responsive) videos module, 1KB, custom players, dynamic elements/XHR support.

angular-dynamic-forms

Configurable Reactive Forms in Angular with dynamic components

apollo

Standalone cross-browser DOM class manipulation module

angular-component

Fully featured .component() polyfill for Angular v1.3+

reactive-pizza

Angular v4.1.1 - Reactive Forms, Observables, Component Architecture. Pizza. 🍕

axis

Simple JavaScript type checking module. Returns a Boolean for each type check.

superbox

Superbox, the lightbox, reimagined

flaunt-js

Flaunt JS, stylish responsive navigations with nested click to reveal

linkjuice

Automatically wraps and creates anchor links for <h1-h6> headings

foreach

forEach implementation for Objects/NodeLists/Arrays, automatic type loops and context options

lunar

SVG class module for has/add/remove/toggleClass

stratos

Object manipulation module, simplified extends, keys, add/remove methods and more.

interpolate

Micro templating engine, maps Object property values to a String template

console.loge

Doge-driven debugging. Such console, many logs. Wow.

jbar

jBar, the lightweight jQuery notification banner.

superfast-angular-2

A super simple setup for Angular 2 to prototype or play around. Components, TypeScript and Routing.

gulp-oss

My Gulp.js boilerplate for creating new JavaScript projects

NoFi

No WiFi, detecting offline states with HTML5

switch-messages

switchMessages for Angular 1.2+, partial functionality from Angular 1.3+ "ngMessages"

fluidvids-react

React.js implementation of fluidvids.js

track-digests

A simple Directive to track $digest counts

psswrd

Show/hide toggling for password inputs.

ac-store

Simple Redux Store

angular-connect-2016

Final code for AngularConnect Angular 1 & 2 demos.

suave

Re-engineering the HTML5 <video> tag for semantics and modularity.

ac-boilerplate

mapify

Map iteration for Arrays and Objects

fluidvids-polymer

Web Component for fluidvids.js built with Polymer

ngrx-workshop

data-tabs

Simple HTML5 data-* jQuery tabs. Markup free and relative to their container for ultimate re-use.

workspaces-grunt

Using Grunt and Chrome Workspaces for in-browser development

fowa2014

FOWA 2014 workshop

ngWorkshop2015

[this is really old, wouldn't bother using it] Falsy Values AngularJS Workshop 2015

babel-private-properties-methods-classes

🔥 Babel + ESLint + Private Properties and Methods in Classes

imgShufflr

jQuery random image shufflr, inline img and background CSS

ngbe-2016

Source code moved here: https://github.com/toddmotto/angular-pizza-creator

selectnav

JavaScript select navigation for responsive projects

fitdevcomments

aot-loader

[BETA/Work In Progress] Ahead-of-Time Compiler for Webpack.

web-platform-angular-2

required-fallback

A robust HTML5 'required' attribute fallback, client-side jQuery script.

bounceThis

jQuery plugin that mimics CSS3 keyframes animations of bouncing headers

kendo-html-editor

fowd