• Stars
    star
    23,968
  • Rank 929 (Top 0.02 %)
  • Language
  • License
    MIT License
  • Created over 10 years ago
  • Updated over 2 years ago

Reviews

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

Repository Details

Angular Style Guide: A starting point for Angular development teams to provide consistency through good practices.

Angular Style Guide

Versions

There are multiple versions of Angular, and thus there are multiple versions of the guide. Choose your guide appropriately.

Angular 1 Style Guide

The Angular 1 Style Guide.

Angular 2 Style Guide

The Angular 2 Style Guide.

Angular Team Endorsed

Special thanks to Igor Minar, lead on the Angular team, for reviewing, contributing feedback, and entrusting me to shepherd this guide.

Purpose

Opinionated Angular style guide for teams by @john_papa

If you are looking for an opinionated style guide for syntax, conventions, and structuring Angular applications, then step right in. These styles are based on my development experience with Angular, presentations, Pluralsight training courses and working in teams.

The purpose of this style guide is to provide guidance on building Angular applications by showing the conventions I use and, more importantly, why I choose them.

If you like this guide, check out my Angular Patterns: Clean Code course at Pluralsight which is a companion to this guide.

Angular Patterns: Clean Code

Community Awesomeness and Credit

Never work in a vacuum. I find that the Angular community is an incredible group who are passionate about sharing experiences. Many of my styles have been from the many pair programming sessions Ward Bell and I have had. My most excellent friend Ward has helped influence the ultimate evolution of these guides.

Contributing

Open an issue first to discuss potential changes/additions. If you have questions with the guide, feel free to leave them as issues in the repository. If you find a typo, create a pull request. The idea is to keep the content up to date and use githubโ€™s native feature to help tell the story with issues and PRโ€™s, which are all searchable via google. Why? Because odds are if you have a question, someone else does too! You can learn more here at about how to contribute.

By contributing to this repository you are agreeing to make your content available subject to the license of this repository.

Process

1. Discuss the changes in a GitHub issue.
2. Open a Pull Request, reference the issue, and explain the change and why it adds value.
3. The Pull Request will be evaluated and either merged or declined.

License

tldr; Use this guide. Attributions are appreciated.

Copyright

Copyright (c) 2014-2016 John Papa

(The MIT License)

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the 'Software'), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

Back to top

More Repositories

1

lite-server

Lightweight node server
JavaScript
2,308
star
2

ng-demos

variety of angular demos
JavaScript
1,704
star
3

vscode-peacock

Subtly change the color of your Visual Studio Code workspace. Ideal when you have multiple VS Code instances, use VS Live Share, or use VS Code's Remote features, and you want to quickly identify your editor.
TypeScript
1,040
star
4

angular-ngrx-data

Angular with ngRx and experimental ngrx-data helper
TypeScript
971
star
5

generator-hottowel

Yo generator that creates an Angular app via HotTowel
JavaScript
837
star
6

angular-tour-of-heroes

Angular - Tour of Heroes - The Next Step after Getting Started
TypeScript
822
star
7

vscode-angular-snippets

Angular Snippets for VS Code
TypeScript
567
star
8

gulp-patterns

Playground for Gulp Recipes
JavaScript
501
star
9

HotTowel-Angular

HotTowel with Angular (for NuGet)
JavaScript
238
star
10

ngrx-data-lab

Sample app that can be expanded to use ngrx-data
TypeScript
216
star
11

pwa-angular

PWA Example
TypeScript
207
star
12

vue-getting-started

This project is seen in demos including the Pluralsight course "Vue: Getting Started" to help represent a fundamental app written with Vue. The heroes and villains theme is used throughout the app.
Vue
191
star
13

heroes-angular

Tour of Heroes app written with Angular
TypeScript
163
star
14

vscode-winteriscoming

Dark theme with fun and bright foreground colors
CSS
162
star
15

pluralsight-gulp

Starter Code for Pluralsight Course "JavaScript Build Automation with Gulp.js"
JavaScript
161
star
16

angular-event-view-cli

Angular Demo with a Little bit of a lot of features
TypeScript
154
star
17

vue-typescript

Vue.js with TypeScript (OLD - in process of updating)
Vue
145
star
18

hottowel-angular-typescript

As seen at //Build 2015 presented by Erich Gamma, Chris Dias and John Papa.
JavaScript
145
star
19

heroes-vue

Tour of Heroes app written with Vue
Vue
144
star
20

HotTowel

John Papa's ASP.NET MVC SPA Template (Durandal)
CSS
142
star
21

heroes-react

Tour of Heroes app written with React
JavaScript
134
star
22

vscode-angular-essentials

Dockerfile
133
star
23

shopathome

Choose from Angular, React, Svelte, and Vue applications with an Azure Functions API, that deploys to Azure Static Web Apps
TypeScript
132
star
24

PluralsightSpaJumpStartFinal

Source code for the SPA JumpStart Pluralsight course at http://jpapa.me/spajsps
JavaScript
132
star
25

hello-worlds

Hello world apps for angular, react, svelte, and vue
TypeScript
128
star
26

heroes-angular-serverless

TypeScript Node/Express ๐Ÿ‘‰TypeScript Serverless โž•Angular
TypeScript
125
star
27

angular2-force

ngConf 2016 live coding demo
JavaScript
115
star
28

vscode-cloak

Cloak allows you to hide/show environment keys, to avoid accidentally sharing them with everyone who sees your screen.
TypeScript
106
star
29

angular-preload-and-interceptors

TypeScript
104
star
30

angular-first-look-examples

angular first look for pluralsight
HTML
89
star
31

angular-first-look-hosted

Hosted Code from Pluralsight Course "Angular First Look"
HTML
86
star
32

angular-cosmosdb

Cosmos DB, Express.js, Angular, and Node.js app
TypeScript
81
star
33

CodeCamper

JavaScript
73
star
34

pluralsight-vscode-samples

VS Code samples for Pluralsight course on Code
JavaScript
70
star
35

docker-angular-cli

Dockerfile and image for node plus angular CLI
Dockerfile
69
star
36

awesome-angular-workshop

Angular: The Awesome Parts - Workshop
TypeScript
68
star
37

angular.breeze.storagewip

Save Work in Progress to Local Storage for Angular and Breeze apps
JavaScript
66
star
38

Pluralsight-CC-Angular-Breeze-Extra

Supporting files for the Pluralsight "SPA with Angular and Breeze" course by John Papa.
JavaScript
64
star
39

node-hello

Hello World for Node.js
JavaScript
63
star
40

one-with-angular

TypeScript
61
star
41

node-ts

Simple Node app Written with TypeScript
TypeScript
59
star
42

http-interceptors

The Web apps in this monorepo make HTTP requests and require uniform consistency in how they are executed and handled. This monorepo demonstrates the same app written with Angular and with Svelte. Each app uses HTTP interceptors. The Angular app uses HttpClient and its interceptors while the Svelte app uses Axios and its interceptors.
TypeScript
58
star
43

angular-what-if

TypeScript
57
star
44

vikings

TypeScript
53
star
45

express-to-functions

TypeScript Node/Express ๐Ÿ‘‰TypeScript Serverless โž• Angular
TypeScript
53
star
46

vue-guide

Super Simple Vue Samples
HTML
51
star
47

ngrx-demo

NgRx demo
TypeScript
50
star
48

ng-patterns-testing

JavaScript
48
star
49

typescript-async

Creating Asynchronous Code with TypeScript
TypeScript
47
star
50

vscode-angular1-snippets

vscode-angular1-snippets
41
star
51

vscode-pwa

VS Code Extension for PWA Tools
TypeScript
39
star
52

angular-lazy-load-demo

Lazy loading Angular components
TypeScript
32
star
53

github-templates

31
star
54

angular-2-first-look-launcher

deprecated
JavaScript
30
star
55

heroes-svelte

Tour of Heroes app written with Svelte
Svelte
30
star
56

kis-requirejs-demo

Keep It Simple RequireJS Demo. Shows simple demo of require.js before and after
JavaScript
30
star
57

heroes-node-api

node api for the heroes apps
JavaScript
29
star
58

heroes-vue-node-api

As seen in Vue Conf 2019
Vue
28
star
59

toastr-bower

toastr's bower repo
CSS
24
star
60

star-wars-api

Star Wars API
JavaScript
23
star
61

vue-workshop

Vue Fundamentals Workshops
Vue
23
star
62

vue-simple

This project was created to help represent a fundamental app written with Vue. The heroes and villains theme is used throughout the app.
Vue
22
star
63

typescript-fundamentals

HTML
21
star
64

vscode-read-time

TypeScript
19
star
65

vue-intro

Vue.js app using Vue's CLI
Vue
19
star
66

angular-rxjs-shared-examples

rxjs examples
TypeScript
17
star
67

serverless-thank-you

Say thank you to everyone who takes the time to create and discus or a pull request in your Github repository, using Azure Functions
TypeScript
17
star
68

swa-workshop

TypeScript
16
star
69

cloud-coding-with-codespaces

Live demo using Angular, github.dev, codespaces, copilot, azure static web apps, and devcontainers
TypeScript
13
star
70

vscode-azure-functions-tools

Azure Functions Tools for VS Code - DEPRECATED
12
star
71

vue-cli-preset-all-javascript

Vue CLI Preset for All JavaScript Prompts
12
star
72

vscode-presenter-pro

11
star
73

vue-ts

simple repro of master details with vue 3, composition api, and typescript
Vue
10
star
74

ios-play

iOS Playground
Swift
8
star
75

security-strategy-essentials

JavaScript
8
star
76

telekinesis

"Think" code
JavaScript
7
star
77

johnpapa

7
star
78

house-bot

Home automation with AI, LUIS, Serverless
JavaScript
7
star
79

first-serverless-api

Create your first serverless API endpoints with Azure Functions
JavaScript
7
star
80

innersource

6
star
81

Angular-NuGet

NuGet Repo for Angular Packages
JavaScript
6
star
82

angular-expiring-http-cache

TypeScript
5
star
83

ng-ai-hackathon

TypeScript
5
star
84

starwars-ios

Swift
5
star
85

one-with-angular-api

JavaScript
5
star
86

shopping-for-codespaces

CSS
4
star
87

typescript-hello-world

Simple hello world project for running TypeScript with Node.js
TypeScript
4
star
88

svelte-intro

JavaScript
3
star
89

glimpse.toastr

JavaScript
3
star
90

react-book-repo

3
star
91

pluralsight-ng-testing

pluralsight-ng-testing
CSS
2
star
92

skills-copilot-codespaces-vscode

My clone repository
1
star
93

dotfiles

1
star
94

aggregator-app

serverless function with api aggregator with azure
JavaScript
1
star
95

.github

1
star
96

vscode-import-bug

referencing https://github.com/microsoft/TypeScript/issues/35591
TypeScript
1
star