From 5c895d9d0805c3077485de8669c725d67695ef68 Mon Sep 17 00:00:00 2001
From: Julien LE COUPANEC <julien.le.coupanec@gmail.com>
Date: Mon, 25 Jun 2018 19:12:22 +0100
Subject: [PATCH 1/9] Add AngularJS

---
 README.md | 39 ++++++++++++++++++++-------------------
 1 file changed, 20 insertions(+), 19 deletions(-)

diff --git a/README.md b/README.md
index 967bf41..5d724e7 100644
--- a/README.md
+++ b/README.md
@@ -21,15 +21,15 @@ Feel free to browse each cheatsheet to learn new things and to keep them at hand
 
 #### Command line interface
 
-* [Bash](languages/bash.sh)
+- [Bash](languages/bash.sh)
 
 #### Imperative
 
-* [PHP](languages/php.php)
+- [PHP](languages/php.php)
 
 #### Functional
 
-* [JavaScript](languages/javascript.js)
+- [JavaScript](languages/javascript.js)
 
 </details>
 
@@ -40,13 +40,13 @@ Feel free to browse each cheatsheet to learn new things and to keep them at hand
 
 #### Python
 
-* [Django](backend/django.py)
+- [Django](backend/django.py)
 
 #### Javascript
 
-* [Feathers.js](backend/feathers.js)
-* [Moleculer](backend/moleculer.js)
-* [Node.js](backend/node.js)
+- [Feathers.js](backend/feathers.js)
+- [Moleculer](backend/moleculer.js)
+- [Node.js](backend/node.js)
   </details>
 
 ### 🌐 Frontend
@@ -56,14 +56,15 @@ Feel free to browse each cheatsheet to learn new things and to keep them at hand
 
 #### Basics
 
-* [HTML5](frontend/html5.html)
+- [HTML5](frontend/html5.html)
 
 #### Frameworks
 
-* [React.js](frontend/react.js)
-* [Vue.js](frontend/vue.js)
-* [Ember.js](frontend/ember.js)
-* [Angular](frontend/angular.js)
+- [React.js](frontend/react.js)
+- [Vue.js](frontend/vue.js)
+- [Ember.js](frontend/ember.js)
+- [Angular](frontend/angular.js)
+- [AngularJS](frontend/angularjs.js)
   </details>
 
 ### 🗃️ Databases
@@ -73,7 +74,7 @@ Feel free to browse each cheatsheet to learn new things and to keep them at hand
 
 #### NoSQL
 
-* [Redis](databases/redis.sh)
+- [Redis](databases/redis.sh)
   </details>
 
 ### 🔧 Tools
@@ -83,15 +84,15 @@ Feel free to browse each cheatsheet to learn new things and to keep them at hand
 
 #### Development
 
-* [VIM](tools/vim.txt)
-* [Xcode](tools/xcode.txt)
+- [VIM](tools/vim.txt)
+- [Xcode](tools/xcode.txt)
 
 #### Infrastructure
 
-* [Docker](tools/docker.sh)
-* [Kubernetes](tools/kubernetes.sh)
-* [Nanobox Boxfile](tools/nanobox_boxfile.yml)
-* [Nanobox CLI](tools/nanobox_cli.sh)
+- [Docker](tools/docker.sh)
+- [Kubernetes](tools/kubernetes.sh)
+- [Nanobox Boxfile](tools/nanobox_boxfile.yml)
+- [Nanobox CLI](tools/nanobox_cli.sh)
   </details>
 
 ## 🙌🏼 How to Contribute?

From faaebc08c9b21d53563f3690c1a6aa4cd82cc739 Mon Sep 17 00:00:00 2001
From: Julien LE COUPANEC <julien.le.coupanec@gmail.com>
Date: Mon, 25 Jun 2018 19:24:34 +0100
Subject: [PATCH 2/9] Improve Angular cheatsheet

---
 frontend/angular.js | 274 ++++++++++++++++++++++++++------------------
 1 file changed, 164 insertions(+), 110 deletions(-)

diff --git a/frontend/angular.js b/frontend/angular.js
index 102bfd5..f894bb8 100644
--- a/frontend/angular.js
+++ b/frontend/angular.js
@@ -4,343 +4,397 @@
  * STYLE GUIDE: https://angular.io/guide/styleguide
  * ******************************************************************************************* */
 
+
 ```
 npm install --save @angular/cli       // declarative and flexible JavaScript framework for building UI
 ng serve                              // serve the app
 ng build                              // build the release
 ```
 
+
 /* *******************************************************************************************
- * Bootstrapping 
+ * BOOSTRAPPING
+ * https://angular.io/guide/bootstrapping
  * ******************************************************************************************* */
 
+
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 
-platformBrowserDynamic().bootstrapModule(AppModule); 
 // Bootstraps the app, using the root component from the specified NgModule.
+platformBrowserDynamic().bootstrapModule(AppModule); 
+
 
 /* *******************************************************************************************
- * NgModules 
+ * NG MODULES
+ * https://angular.io/guide/ngmodules
  * ******************************************************************************************* */
+
+
 import { NgModule } from '@angular/core';
 
-@NgModule({ declarations: ..., imports: ...,
-exports: ..., providers: ..., bootstrap: ...})
-class MyModule {} 
+@NgModule({
+  declarations: ...,
+  imports: ...,
+  exports: ...,
+  providers: ...,
+  bootstrap: ...
+})
+
 // Defines a module that contains components, directives, pipes, and providers.
+class MyModule {} 
 
-declarations: [MyRedComponent, MyBlueComponent, MyDatePipe] 
 // List of components, directives, and pipes that belong to this module.
+declarations: [MyRedComponent, MyBlueComponent, MyDatePipe] 
 
-imports: [BrowserModule, SomeOtherModule] 
 // List of modules to import into this module. Everything from the imported modules is available to declarations of this module.
+imports: [BrowserModule, SomeOtherModule] 
 
-exports: [MyRedComponent, MyDatePipe] 
 // List of components, directives, and pipes visible to modules that import this module.
+exports: [MyRedComponent, MyDatePipe] 
 
-providers: [MyService, { provide: ... }]  
 // List of dependency injection providers visible both to the contents of this module and to importers of this module.
+providers: [MyService, { provide: ... }]  
 
-bootstrap: [MyAppComponent] 
 // List of components to bootstrap when this module is bootstrapped.
+bootstrap: [MyAppComponent] 
 
 
 /* *******************************************************************************************
- * Template syntax 
+ * TEMPLATE SYNTAX
+ * https://angular.io/guide/template-syntax
  * ******************************************************************************************* */
 
-// <input [value]="firstName"> 
+
 // Binds property value to the result of expression firstName.
+// <input [value]="firstName"> 
 
-// <div [attr.role]="myAriaRole">  
 // Binds attribute role to the result of expression myAriaRole.
+// <div [attr.role]="myAriaRole">  
 
-// <div [class.extra-sparkle]="isDelightful">  
 // Binds the presence of the CSS class extra-sparkle on the element to the truthiness of the expression isDelightful.
+// <div [class.extra-sparkle]="isDelightful">  
 
-// <div [style.width.px]="mySize"> 
 // Binds style property width to the result of expression mySize in pixels. Units are optional.
+// <div [style.width.px]="mySize"> 
 
-// <button (click)="readRainbow($event)">  
 // Calls method readRainbow when a click event is triggered on this button element (or its children) and passes in the event object.
+// <button (click)="readRainbow($event)">  
 
-// <div title="Hello {{ponyName}}">  
 // Binds a property to an interpolated string, for example, "Hello Seabiscuit". Equivalent to: <div [title]="'Hello ' + ponyName">
+// <div title="Hello {{ponyName}}">  
 
-// <p>Hello {{ponyName}}</p> 
 // Binds text content to an interpolated string, for example, "Hello Seabiscuit".
+// <p>Hello {{ponyName}}</p> 
 
-// <my-cmp [(title)]="name"> 
 // Sets up two-way data binding. Equivalent to: <my-cmp [title]="name" (titleChange)="name=$event">
+// <my-cmp [(title)]="name"> 
 
+// Creates a local variable movieplayer that provides access to the video element instance in data-binding and event-binding expressions in the current template.
 // <video #movieplayer ...>
 // <button (click)="movieplayer.play()">
 // </video>  
-// Creates a local variable movieplayer that provides access to the video element instance in data-binding and event-binding expressions in the current template.
 
-// <p *myUnless="myExpression">...</p> 
 // The * symbol turns the current element into an embedded template. Equivalent to: <ng-template [myUnless]="myExpression"><p>...</p></ng-template>
+// <p *myUnless="myExpression">...</p> 
 
-// <p>Card No.: {{cardNumber | myCardNumberFormatter}}</p> 
 // Transforms the current value of expression cardNumber via the pipe called myCardNumberFormatter.
+// <p>Card No.: {{cardNumber | myCardNumberFormatter}}</p> 
 
-// <p>Employer: {{employer?.companyName}}</p>  
 // The safe navigation operator (?) means that the employer field is optional and if undefined, the rest of the expression should be ignored.
+// <p>Employer: {{employer?.companyName}}</p>  
 
-// <svg:rect x="0" y="0" width="100" height="100"/>  
 // An SVG snippet template needs an svg: prefix on its root element to disambiguate the SVG element from an HTML component.
+// <svg:rect x="0" y="0" width="100" height="100"/>  
 
+// An <svg> root element is detected as an SVG element automatically, without the prefix.
 // <svg>
 // <rect x="0" y="0" width="100" height="100"/>
 // </svg>  
-// An <svg> root element is detected as an SVG element automatically, without the prefix.
+
 
 /* *******************************************************************************************
- * Built-in directives
+ * BUILT-IN DIRECTIVES
+ * https://angular.io/guide/attribute-directives
  * ******************************************************************************************* */
+
+
 import { CommonModule } from '@angular/common';
 
-// // <section *ngIf="showSection"> 
-// // Removes or recreates a portion of the DOM tree based on the showSection expression.
+// Removes or recreates a portion of the DOM tree based on the showSection expression.
+// <section *ngIf="showSection"> 
 
-// <li *ngFor="let item of list">  
 // Turns the li element and its contents into a template, and uses that to instantiate a view for each item in list.
+// <li *ngFor="let item of list">  
 
+// Conditionally swaps the contents of the div by selecting one of the embedded templates based on the current value of conditionExpression.
 // <div [ngSwitch]="conditionExpression">
 // <ng-template [ngSwitchCase]="case1Exp">...</ng-template>
 // <ng-template ngSwitchCase="case2LiteralString">...</ng-template>
 // <ng-template ngSwitchDefault>...</ng-template>
 // </div>  
-// Conditionally swaps the contents of the div by selecting one of the embedded templates based on the current value of conditionExpression.
 
-// <div [ngClass]="{'active': isActive, 'disabled': isDisabled}">  
 // Binds the presence of CSS classes on the element to the truthiness of the associated map values. The right-hand expression should return {class-name: true/false} map.
+// <div [ngClass]="{'active': isActive, 'disabled': isDisabled}">  
 
+// Allows you to assign styles to an HTML element using CSS. You can use CSS directly, as in the first example, or you can call a method from the component.
 // <div [ngStyle]="{'property': 'value'}">
 // <div [ngStyle]="dynamicStyles()"> 
-// Allows you to assign styles to an HTML element using CSS. You can use CSS directly, as in the first example, or you can call a method from the component.
+
 
 /* *******************************************************************************************
- * Forms
+ * FORMS
+ * https://angular.io/guide/forms
  * ******************************************************************************************* */
 
+
 import { FormsModule } from '@angular/forms';
 
-// <input [(ngModel)]="userName">  
 // Provides two-way data-binding, parsing, and validation for form controls.
+// <input [(ngModel)]="userName">  
+
 
 /* *******************************************************************************************
- * Class decorators
+ * CLASS DECORATORS
  * ******************************************************************************************* */
 
+
 import { Directive, ... } from '@angular/core';
 
+// Declares that a class is a component and provides metadata about the component.
 @Component({...})
 class MyComponent() {}  
-// Declares that a class is a component and provides metadata about the component.
 
+// Declares that a class is a directive and provides metadata about the directive.
 @Directive({...})
 class MyDirective() {}  
-// Declares that a class is a directive and provides metadata about the directive.
 
+// Declares that a class is a pipe and provides metadata about the pipe.
 @Pipe({...})
 class MyPipe() {} 
-// Declares that a class is a pipe and provides metadata about the pipe.
 
+// Declares that a class has dependencies that should be injected into the constructor when the dependency injector is creating an instance of this class.
 @Injectable()
 class MyService() {}  
-// Declares that a class has dependencies that should be injected into the constructor when the dependency injector is creating an instance of this class.
+
 
 /* *******************************************************************************************
- * Directive configuration
+ * DIRECTIVE CONFIGURATION
  * ******************************************************************************************* */
 
+
 @Directive({ property1: value1, ... })
 
-selector: '.cool-button:not(a)' 
 // Specifies a CSS selector that identifies this directive within a template. Supported selectors include element, [attribute], .class, and :not().
+selector: '.cool-button:not(a)' 
 
 // Does not support parent-child relationship selectors.
 
-providers: [MyService, { provide: ... }]  
 // List of dependency injection providers for this directive and its children.
+providers: [MyService, { provide: ... }]  
+
 
 /* *******************************************************************************************
- * Component configuration
+ * COMPONENT CONFIGURATION
+ * https://angular.io/api/core/Component
  * ******************************************************************************************* */
 
+
 @Component extends @Directive, so the @Directive configuration applies to components as well
 
-moduleId: module.id 
 // If set, the templateUrl and styleUrl are resolved relative to the component.
+moduleId: module.id 
 
-viewProviders: [MyService, { provide: ... }]  
 // List of dependency injection providers scoped to this component's view.
+viewProviders: [MyService, { provide: ... }]  
 
+// Inline template or external template URL of the component's view.
 template: 'Hello {{name}}'
 templateUrl: 'my-component.html'  
-// Inline template or external template URL of the component's view.
 
+// List of inline CSS styles or external stylesheet URLs for styling the component’s view.
 styles: ['.primary {color: red}']
 styleUrls: ['my-component.css'] 
-// List of inline CSS styles or external stylesheet URLs for styling the component’s view.
+
 
 /* *******************************************************************************************
- * Class field decorators for directives and components
+ * CLASS FIELD DECORATORS FOR DIRECTIVES AND COMPONENTS
  * ******************************************************************************************* */
 
+
 import { Input, ... } from '@angular/core';
 
-@Input() myProperty;  
 // Declares an input property that you can update via property binding (example: <my-cmp [myProperty]="someExpression">).
+@Input() myProperty;  
 
-@Output() myEvent = new EventEmitter(); 
 // Declares an output property that fires events that you can subscribe to with an event binding (example: <my-cmp (myEvent)="doSomething()">).
+@Output() myEvent = new EventEmitter(); 
 
-@HostBinding('class.valid') isValid;  
 // Binds a host element property (here, the CSS class valid) to a directive/component property (isValid).
+@HostBinding('class.valid') isValid;  
 
-@HostListener('click', ['$event']) onClick(e) {...} 
 // Subscribes to a host element event (click) with a directive/component method (onClick), optionally passing an argument ($event).
+@HostListener('click', ['$event']) onClick(e) {...} 
 
-@ContentChild(myPredicate) myChildComponent;  
 // Binds the first result of the component content query (myPredicate) to a property (myChildComponent) of the class.
+@ContentChild(myPredicate) myChildComponent;  
 
-@ContentChildren(myPredicate) myChildComponents;  
 // Binds the results of the component content query (myPredicate) to a property (myChildComponents) of the class.
+@ContentChildren(myPredicate) myChildComponents;  
 
-@ViewChild(myPredicate) myChildComponent; 
 // Binds the first result of the component view query (myPredicate) to a property (myChildComponent) of the class. Not available for directives.
+@ViewChild(myPredicate) myChildComponent; 
 
-@ViewChildren(myPredicate) myChildComponents; 
 // Binds the results of the component view query (myPredicate) to a property (myChildComponents) of the class. Not available for directives.
+@ViewChildren(myPredicate) myChildComponents; 
+
 
 /* *******************************************************************************************
- * Directive and component change detection and lifecycle hooks
+ * DIRECTIVE AND COMPONENT CHANGE DETECTION AND LIFECYCLE HOOKS
  * ******************************************************************************************* */
 
 // (implemented as class methods)
 
-constructor(myService: MyService, ...) { ... }  
 // Called before any other lifecycle hook. Use it to inject dependencies, but avoid any serious work here.
+constructor(myService: MyService, ...) { ... }  
 
-ngOnChanges(changeRecord) { ... } 
 // Called after every change to input properties and before processing content or child views.
+ngOnChanges(changeRecord) { ... } 
 
-ngOnInit() { ... }  
 // Called after the constructor, initializing input properties, and the first call to ngOnChanges.
+ngOnInit() { ... }  
 
-ngDoCheck() { ... } 
 // Called every time that the input properties of a component or a directive are checked. Use it to extend change detection by performing a custom check.
+ngDoCheck() { ... } 
 
-ngAfterContentInit() { ... }  
 // Called after ngOnInit when the component's or directive's content has been initialized.
+ngAfterContentInit() { ... }  
 
-ngAfterContentChecked() { ... } 
 // Called after every check of the component's or directive's content.
+ngAfterContentChecked() { ... } 
 
-ngAfterViewInit() { ... } 
 // Called after ngAfterContentInit when the component's views and child views / the view that a directive is in has been initialized.
+ngAfterViewInit() { ... } 
 
-ngAfterViewChecked() { ... }  
 // Called after every check of the component's views and child views / the view that a directive is in.
+ngAfterViewChecked() { ... }  
 
-ngOnDestroy() { ... } 
 // Called once, before the instance is destroyed.
+ngOnDestroy() { ... } 
+
 
 /* *******************************************************************************************
- * Dependency injection configuration
+ * DEPENDENCY INJECTION CONFIGURATION
+ * https://angular.io/guide/dependency-injection
  * ******************************************************************************************* */
 
-{ provide: MyService, useClass: MyMockService } 
+
 // Sets or overrides the provider for MyService to the MyMockService class.
+{ provide: MyService, useClass: MyMockService } 
 
-{ provide: MyService, useFactory: myFactory } 
 // Sets or overrides the provider for MyService to the myFactory factory function.
+{ provide: MyService, useFactory: myFactory } 
 
-{ provide: MyValue, useValue: 41 }  
 // Sets or overrides the provider for MyValue to the value 41.
+{ provide: MyValue, useValue: 41 }  
+
 
 /* *******************************************************************************************
- * Routing and navigation
+ * ROUTING AND NAVIGATION
+ * https://angular.io/guide/router
  * ******************************************************************************************* */
 
+
 import { Routes, RouterModule, ... } from '@angular/router';
 
 const routes: Routes = [
-{ path: '', component: HomeComponent },
-{ path: 'path/:routeParam', component: MyComponent },
-{ path: 'staticPath', component: ... },
-{ path: '**', component: ... },
-{ path: 'oldPath', redirectTo: '/staticPath' },
-{ path: ..., component: ..., data: { message: 'Custom' } }
+  { path: '', component: HomeComponent },
+  { path: 'path/:routeParam', component: MyComponent },
+  { path: 'staticPath', component: ... },
+  { path: '**', component: ... },
+  { path: 'oldPath', redirectTo: '/staticPath' },
+  { path: ..., component: ..., data: { message: 'Custom' } }
 ]);
 
-const routing = RouterModule.forRoot(routes); 
 // Configures routes for the application. Supports static, parameterized, redirect, and wildcard routes. Also supports custom route data and resolve.
+const routing = RouterModule.forRoot(routes); 
 
+// Marks the location to load the component of the active route.
 // <router-outlet></router-outlet>
 // <router-outlet name="aux"></router-outlet>
-// Marks the location to load the component of the active route.
-
 
+// Creates a link to a different view based on a route instruction consisting of a route path, required and optional parameters, query parameters, and a fragment. To navigate to a root route, use the / prefix; for a child route, use the ./prefix; for a sibling or parent, use the ../ prefix.
 // <a routerLink="/path">
 // <a [routerLink]="[ '/path', routeParam ]">
 // <a [routerLink]="[ '/path', { matrixParam: 'value' } ]">
 // <a [routerLink]="[ '/path' ]" [queryParams]="{ page: 1 }">
 // <a [routerLink]="[ '/path' ]" fragment="anchor">
-// Creates a link to a different view based on a route instruction consisting of a route path, required and optional parameters, query parameters, and a fragment. To navigate to a root route, use the / prefix; for a child route, use the ./prefix; for a sibling or parent, use the ../ prefix.
 
-// <a [routerLink]="[ '/path' ]" routerLinkActive="active">  
 // The provided classes are added to the element when the routerLink becomes the current active route.
+// <a [routerLink]="[ '/path' ]" routerLinkActive="active">  
 
 class CanActivateGuard implements CanActivate {
-canActivate(
-route: ActivatedRouteSnapshot,
-state: RouterStateSnapshot
-): Observable<boolean>|Promise<boolean>|boolean { ... }
+  canActivate(
+    route: ActivatedRouteSnapshot,
+    state: RouterStateSnapshot
+  ): Observable<boolean>|Promise<boolean>|boolean { ... }
 }
 
-{ path: ..., canActivate: [CanActivateGuard] }  
 // An interface for defining a class that the router should call first to determine if it should activate this component. Should return a boolean or an Observable/Promise that resolves to a boolean.
+{
+  path: ...,
+  canActivate: [CanActivateGuard]
+}  
 
 class CanDeactivateGuard implements CanDeactivate<T> {
-canDeactivate(
-component: T,
-route: ActivatedRouteSnapshot,
-state: RouterStateSnapshot
-): Observable<boolean>|Promise<boolean>|boolean { ... }
+  canDeactivate(
+    component: T,
+    route: ActivatedRouteSnapshot,
+    state: RouterStateSnapshot
+  ): Observable<boolean>|Promise<boolean>|boolean { ... }
 }
 
-{ path: ..., canDeactivate: [CanDeactivateGuard] }  
 // An interface for defining a class that the router should call first to determine if it should deactivate this component after a navigation. Should return a boolean or an Observable/Promise that resolves to a boolean.
+{
+  path: ...,
+  canDeactivate: [CanDeactivateGuard]
+}
 
 class CanActivateChildGuard implements CanActivateChild {
-canActivateChild(
-route: ActivatedRouteSnapshot,
-state: RouterStateSnapshot
-): Observable<boolean>|Promise<boolean>|boolean { ... }
+  canActivateChild(
+    route: ActivatedRouteSnapshot,
+    state: RouterStateSnapshot
+  ): Observable<boolean>|Promise<boolean>|boolean { ... }
 }
 
-{ path: ..., canActivateChild: [CanActivateGuard],
-children: ... } 
 // An interface for defining a class that the router should call first to determine if it should activate the child route. Should return a boolean or an Observable/Promise that resolves to a boolean.
+{
+  path: ...,
+  canActivateChild: [CanActivateGuard],
+  children: ...
+}
 
 class ResolveGuard implements Resolve<T> {
-resolve(
-route: ActivatedRouteSnapshot,
-state: RouterStateSnapshot
-): Observable<any>|Promise<any>|any { ... }
+  resolve(
+    route: ActivatedRouteSnapshot,
+    state: RouterStateSnapshot
+  ): Observable<any>|Promise<any>|any { ... }
 }
 
-{ path: ..., resolve: [ResolveGuard] }  
 // An interface for defining a class that the router should call first to resolve route data before rendering the route. Should return a value or an Observable/Promise that resolves to a value.
+{
+  path: ...,
+  resolve: [ResolveGuard]
+}
 
 class CanLoadGuard implements CanLoad {
-canLoad(
-route: Route
-): Observable<boolean>|Promise<boolean>|boolean { ... }
+  canLoad(
+    route: Route
+  ): Observable<boolean>|Promise<boolean>|boolean { ... }
 }
 
-{ path: ..., canLoad: [CanLoadGuard], loadChildren: ... } 
-// An interface for defining a class that the router should call first to check if the lazy loaded module should be loaded. Should return a boolean or an Observable/Promise that resolves to a boolean.
\ No newline at end of file
+// An interface for defining a class that the router should call first to check if the lazy loaded module should be loaded. Should return a boolean or an Observable/Promise that resolves to a boolean.
+{
+  path: ...,
+  canLoad: [CanLoadGuard],
+  loadChildren: ...
+}

From e999e919429ba1cd84499101825a5f1408a0afd9 Mon Sep 17 00:00:00 2001
From: CSTom <lethalwire@users.noreply.github.com>
Date: Mon, 25 Jun 2018 15:08:17 -0500
Subject: [PATCH 3/9] Lines longer than 100 characters are formatted to have
 fewer than 100 characters.

---
 frontend/angular.js | 114 ++++++++++++++++++++++++++++++--------------
 1 file changed, 78 insertions(+), 36 deletions(-)

diff --git a/frontend/angular.js b/frontend/angular.js
index f894bb8..f9e9b99 100644
--- a/frontend/angular.js
+++ b/frontend/angular.js
@@ -6,7 +6,7 @@
 
 
 ```
-npm install --save @angular/cli       // declarative and flexible JavaScript framework for building UI
+npm install --save @angular/cli       // install command line interface (CLI) for Angular apps
 ng serve                              // serve the app
 ng build                              // build the release
 ```
@@ -46,13 +46,15 @@ class MyModule {}
 // List of components, directives, and pipes that belong to this module.
 declarations: [MyRedComponent, MyBlueComponent, MyDatePipe] 
 
-// List of modules to import into this module. Everything from the imported modules is available to declarations of this module.
+// List of modules to import into this module. Everything from the imported modules is available 
+// to declarations of this module.
 imports: [BrowserModule, SomeOtherModule] 
 
 // List of components, directives, and pipes visible to modules that import this module.
 exports: [MyRedComponent, MyDatePipe] 
 
-// List of dependency injection providers visible both to the contents of this module and to importers of this module.
+// List of dependency injection providers visible both to the contents of this module and to 
+// importers of this module.
 providers: [MyService, { provide: ... }]  
 
 // List of components to bootstrap when this module is bootstrapped.
@@ -71,16 +73,19 @@ bootstrap: [MyAppComponent]
 // Binds attribute role to the result of expression myAriaRole.
 // <div [attr.role]="myAriaRole">  
 
-// Binds the presence of the CSS class extra-sparkle on the element to the truthiness of the expression isDelightful.
+// Binds the presence of the CSS class extra-sparkle on the element to the truthiness of the 
+// expression isDelightful.
 // <div [class.extra-sparkle]="isDelightful">  
 
 // Binds style property width to the result of expression mySize in pixels. Units are optional.
 // <div [style.width.px]="mySize"> 
 
-// Calls method readRainbow when a click event is triggered on this button element (or its children) and passes in the event object.
+// Calls method readRainbow when a click event is triggered on this button element (or its
+// children) and passes in the event object.
 // <button (click)="readRainbow($event)">  
 
-// Binds a property to an interpolated string, for example, "Hello Seabiscuit". Equivalent to: <div [title]="'Hello ' + ponyName">
+// Binds a property to an interpolated string, for example, "Hello Seabiscuit". 
+// Equivalent to: <div [title]="'Hello ' + ponyName">
 // <div title="Hello {{ponyName}}">  
 
 // Binds text content to an interpolated string, for example, "Hello Seabiscuit".
@@ -89,21 +94,25 @@ bootstrap: [MyAppComponent]
 // Sets up two-way data binding. Equivalent to: <my-cmp [title]="name" (titleChange)="name=$event">
 // <my-cmp [(title)]="name"> 
 
-// Creates a local variable movieplayer that provides access to the video element instance in data-binding and event-binding expressions in the current template.
+// Creates a local variable movieplayer that provides access to the video element instance in 
+// data-binding and event-binding expressions in the current template.
 // <video #movieplayer ...>
 // <button (click)="movieplayer.play()">
 // </video>  
 
-// The * symbol turns the current element into an embedded template. Equivalent to: <ng-template [myUnless]="myExpression"><p>...</p></ng-template>
+// The * symbol turns the current element into an embedded template. 
+// Equivalent to: <ng-template [myUnless]="myExpression"><p>...</p></ng-template>
 // <p *myUnless="myExpression">...</p> 
 
 // Transforms the current value of expression cardNumber via the pipe called myCardNumberFormatter.
 // <p>Card No.: {{cardNumber | myCardNumberFormatter}}</p> 
 
-// The safe navigation operator (?) means that the employer field is optional and if undefined, the rest of the expression should be ignored.
+// The safe navigation operator (?) means that the employer field is optional and if undefined, 
+// the rest of the expression should be ignored.
 // <p>Employer: {{employer?.companyName}}</p>  
 
-// An SVG snippet template needs an svg: prefix on its root element to disambiguate the SVG element from an HTML component.
+// An SVG snippet template needs an svg: prefix on its root element to disambiguate the SVG 
+// element from an HTML component.
 // <svg:rect x="0" y="0" width="100" height="100"/>  
 
 // An <svg> root element is detected as an SVG element automatically, without the prefix.
@@ -123,20 +132,24 @@ import { CommonModule } from '@angular/common';
 // Removes or recreates a portion of the DOM tree based on the showSection expression.
 // <section *ngIf="showSection"> 
 
-// Turns the li element and its contents into a template, and uses that to instantiate a view for each item in list.
+// Turns the li element and its contents into a template, and uses that to instantiate a view for
+// each item in list.
 // <li *ngFor="let item of list">  
 
-// Conditionally swaps the contents of the div by selecting one of the embedded templates based on the current value of conditionExpression.
+// Conditionally swaps the contents of the div by selecting one of the embedded templates based on 
+// the current value of conditionExpression.
 // <div [ngSwitch]="conditionExpression">
 // <ng-template [ngSwitchCase]="case1Exp">...</ng-template>
 // <ng-template ngSwitchCase="case2LiteralString">...</ng-template>
 // <ng-template ngSwitchDefault>...</ng-template>
 // </div>  
 
-// Binds the presence of CSS classes on the element to the truthiness of the associated map values. The right-hand expression should return {class-name: true/false} map.
+// Binds the presence of CSS classes on the element to the truthiness of the associated map 
+// values. The right-hand expression should return {class-name: true/false} map.
 // <div [ngClass]="{'active': isActive, 'disabled': isDisabled}">  
 
-// Allows you to assign styles to an HTML element using CSS. You can use CSS directly, as in the first example, or you can call a method from the component.
+// Allows you to assign styles to an HTML element using CSS. You can use CSS directly, as in the
+// first example, or you can call a method from the component.
 // <div [ngStyle]="{'property': 'value'}">
 // <div [ngStyle]="dynamicStyles()"> 
 
@@ -172,7 +185,8 @@ class MyDirective() {}
 @Pipe({...})
 class MyPipe() {} 
 
-// Declares that a class has dependencies that should be injected into the constructor when the dependency injector is creating an instance of this class.
+// Declares that a class has dependencies that should be injected into the constructor when the 
+// dependency injector is creating an instance of this class.
 @Injectable()
 class MyService() {}  
 
@@ -184,7 +198,8 @@ class MyService() {}
 
 @Directive({ property1: value1, ... })
 
-// Specifies a CSS selector that identifies this directive within a template. Supported selectors include element, [attribute], .class, and :not().
+// Specifies a CSS selector that identifies this directive within a template. Supported selectors
+// include element, [attribute], .class, and :not().
 selector: '.cool-button:not(a)' 
 
 // Does not support parent-child relationship selectors.
@@ -223,28 +238,36 @@ styleUrls: ['my-component.css']
 
 import { Input, ... } from '@angular/core';
 
-// Declares an input property that you can update via property binding (example: <my-cmp [myProperty]="someExpression">).
+// Declares an input property that you can update via property binding 
+// (example: <my-cmp [myProperty]="someExpression">).
 @Input() myProperty;  
 
-// Declares an output property that fires events that you can subscribe to with an event binding (example: <my-cmp (myEvent)="doSomething()">).
+// Declares an output property that fires events that you can subscribe to with an event binding 
+// (example: <my-cmp (myEvent)="doSomething()">).
 @Output() myEvent = new EventEmitter(); 
 
-// Binds a host element property (here, the CSS class valid) to a directive/component property (isValid).
+// Binds a host element property (here, the CSS class valid) to a directive/component property 
+// (isValid).
 @HostBinding('class.valid') isValid;  
 
-// Subscribes to a host element event (click) with a directive/component method (onClick), optionally passing an argument ($event).
+// Subscribes to a host element event (click) with a directive/component method (onClick), 
+// optionally passing an argument ($event).
 @HostListener('click', ['$event']) onClick(e) {...} 
 
-// Binds the first result of the component content query (myPredicate) to a property (myChildComponent) of the class.
+// Binds the first result of the component content query (myPredicate) to a property 
+// (myChildComponent) of the class.
 @ContentChild(myPredicate) myChildComponent;  
 
-// Binds the results of the component content query (myPredicate) to a property (myChildComponents) of the class.
+// Binds the results of the component content query (myPredicate) to a property 
+// (myChildComponents) of the class.
 @ContentChildren(myPredicate) myChildComponents;  
 
-// Binds the first result of the component view query (myPredicate) to a property (myChildComponent) of the class. Not available for directives.
+// Binds the first result of the component view query (myPredicate) to a property 
+// (myChildComponent) of the class. Not available for directives.
 @ViewChild(myPredicate) myChildComponent; 
 
-// Binds the results of the component view query (myPredicate) to a property (myChildComponents) of the class. Not available for directives.
+// Binds the results of the component view query (myPredicate) to a property (myChildComponents)
+// of the class. Not available for directives.
 @ViewChildren(myPredicate) myChildComponents; 
 
 
@@ -254,7 +277,8 @@ import { Input, ... } from '@angular/core';
 
 // (implemented as class methods)
 
-// Called before any other lifecycle hook. Use it to inject dependencies, but avoid any serious work here.
+// Called before any other lifecycle hook. Use it to inject dependencies, but avoid any serious 
+// work here.
 constructor(myService: MyService, ...) { ... }  
 
 // Called after every change to input properties and before processing content or child views.
@@ -263,7 +287,8 @@ ngOnChanges(changeRecord) { ... }
 // Called after the constructor, initializing input properties, and the first call to ngOnChanges.
 ngOnInit() { ... }  
 
-// Called every time that the input properties of a component or a directive are checked. Use it to extend change detection by performing a custom check.
+// Called every time that the input properties of a component or a directive are checked. Use it
+// to extend change detection by performing a custom check.
 ngDoCheck() { ... } 
 
 // Called after ngOnInit when the component's or directive's content has been initialized.
@@ -272,10 +297,12 @@ ngAfterContentInit() { ... }
 // Called after every check of the component's or directive's content.
 ngAfterContentChecked() { ... } 
 
-// Called after ngAfterContentInit when the component's views and child views / the view that a directive is in has been initialized.
+// Called after ngAfterContentInit when the component's views and child views / the view that a 
+// directive is in has been initialized.
 ngAfterViewInit() { ... } 
 
-// Called after every check of the component's views and child views / the view that a directive is in.
+// Called after every check of the component's views and child views / the view that a directive 
+// is in.
 ngAfterViewChecked() { ... }  
 
 // Called once, before the instance is destroyed.
@@ -315,21 +342,26 @@ const routes: Routes = [
   { path: ..., component: ..., data: { message: 'Custom' } }
 ]);
 
-// Configures routes for the application. Supports static, parameterized, redirect, and wildcard routes. Also supports custom route data and resolve.
+// Configures routes for the application. Supports static, parameterized, redirect, and wildcard 
+// routes. Also supports custom route data and resolve.
 const routing = RouterModule.forRoot(routes); 
 
 // Marks the location to load the component of the active route.
 // <router-outlet></router-outlet>
 // <router-outlet name="aux"></router-outlet>
 
-// Creates a link to a different view based on a route instruction consisting of a route path, required and optional parameters, query parameters, and a fragment. To navigate to a root route, use the / prefix; for a child route, use the ./prefix; for a sibling or parent, use the ../ prefix.
+// Creates a link to a different view based on a route instruction consisting of a route path, 
+// required and optional parameters, query parameters, and a fragment. To navigate to a root 
+// route, use the / prefix; for a child route, use the ./prefix; for a sibling or parent, use the 
+// ../ prefix.
 // <a routerLink="/path">
 // <a [routerLink]="[ '/path', routeParam ]">
 // <a [routerLink]="[ '/path', { matrixParam: 'value' } ]">
 // <a [routerLink]="[ '/path' ]" [queryParams]="{ page: 1 }">
 // <a [routerLink]="[ '/path' ]" fragment="anchor">
 
-// The provided classes are added to the element when the routerLink becomes the current active route.
+// The provided classes are added to the element when the routerLink becomes the current active
+// route.
 // <a [routerLink]="[ '/path' ]" routerLinkActive="active">  
 
 class CanActivateGuard implements CanActivate {
@@ -339,7 +371,9 @@ class CanActivateGuard implements CanActivate {
   ): Observable<boolean>|Promise<boolean>|boolean { ... }
 }
 
-// An interface for defining a class that the router should call first to determine if it should activate this component. Should return a boolean or an Observable/Promise that resolves to a boolean.
+// An interface for defining a class that the router should call first to determine if it should 
+// activate this component. Should return a boolean or an Observable/Promise that resolves to a 
+// boolean.
 {
   path: ...,
   canActivate: [CanActivateGuard]
@@ -353,7 +387,9 @@ class CanDeactivateGuard implements CanDeactivate<T> {
   ): Observable<boolean>|Promise<boolean>|boolean { ... }
 }
 
-// An interface for defining a class that the router should call first to determine if it should deactivate this component after a navigation. Should return a boolean or an Observable/Promise that resolves to a boolean.
+// An interface for defining a class that the router should call first to determine if it should 
+// deactivate this component after a navigation. Should return a boolean or an Observable/Promise 
+// that resolves to a boolean.
 {
   path: ...,
   canDeactivate: [CanDeactivateGuard]
@@ -366,7 +402,9 @@ class CanActivateChildGuard implements CanActivateChild {
   ): Observable<boolean>|Promise<boolean>|boolean { ... }
 }
 
-// An interface for defining a class that the router should call first to determine if it should activate the child route. Should return a boolean or an Observable/Promise that resolves to a boolean.
+// An interface for defining a class that the router should call first to determine if it should 
+// activate the child route. Should return a boolean or an Observable/Promise that resolves to a 
+// boolean.
 {
   path: ...,
   canActivateChild: [CanActivateGuard],
@@ -380,7 +418,9 @@ class ResolveGuard implements Resolve<T> {
   ): Observable<any>|Promise<any>|any { ... }
 }
 
-// An interface for defining a class that the router should call first to resolve route data before rendering the route. Should return a value or an Observable/Promise that resolves to a value.
+// An interface for defining a class that the router should call first to resolve route data 
+// before rendering the route. Should return a value or an Observable/Promise that resolves to a 
+// value.
 {
   path: ...,
   resolve: [ResolveGuard]
@@ -392,7 +432,9 @@ class CanLoadGuard implements CanLoad {
   ): Observable<boolean>|Promise<boolean>|boolean { ... }
 }
 
-// An interface for defining a class that the router should call first to check if the lazy loaded module should be loaded. Should return a boolean or an Observable/Promise that resolves to a boolean.
+// An interface for defining a class that the router should call first to check if the lazy loaded 
+// module should be loaded. Should return a boolean or an Observable/Promise that resolves to a 
+// boolean.
 {
   path: ...,
   canLoad: [CanLoadGuard],

From e0e1c82dde357b924811e358d3f3b1d05b369342 Mon Sep 17 00:00:00 2001
From: Julien LE COUPANEC <julien.le.coupanec@gmail.com>
Date: Mon, 25 Jun 2018 23:01:12 +0100
Subject: [PATCH 4/9] Rename files for angular cheatsheets

---
 README.md                                | 4 ++--
 frontend/{angular.js => angular-io.js}   | 0
 frontend/{angularjs.js => angular-js.js} | 0
 3 files changed, 2 insertions(+), 2 deletions(-)
 rename frontend/{angular.js => angular-io.js} (100%)
 rename frontend/{angularjs.js => angular-js.js} (100%)

diff --git a/README.md b/README.md
index 5d724e7..f085dae 100644
--- a/README.md
+++ b/README.md
@@ -63,8 +63,8 @@ Feel free to browse each cheatsheet to learn new things and to keep them at hand
 - [React.js](frontend/react.js)
 - [Vue.js](frontend/vue.js)
 - [Ember.js](frontend/ember.js)
-- [Angular](frontend/angular.js)
-- [AngularJS](frontend/angularjs.js)
+- [Angular (2+)](frontend/angular-io.js)
+- [AngularJS](frontend/angular-js.js)
   </details>
 
 ### 🗃️ Databases
diff --git a/frontend/angular.js b/frontend/angular-io.js
similarity index 100%
rename from frontend/angular.js
rename to frontend/angular-io.js
diff --git a/frontend/angularjs.js b/frontend/angular-js.js
similarity index 100%
rename from frontend/angularjs.js
rename to frontend/angular-js.js

From b539d713b73b6f011c55d45967a70c9d4c964635 Mon Sep 17 00:00:00 2001
From: Ben Elliott <4996462+benelliott@users.noreply.github.com>
Date: Mon, 25 Jun 2018 23:38:03 +0100
Subject: [PATCH 5/9] Angular: clarify meaning of `@Injectable` decorator

---
 frontend/angular-io.js | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/frontend/angular-io.js b/frontend/angular-io.js
index f9e9b99..863d4e6 100644
--- a/frontend/angular-io.js
+++ b/frontend/angular-io.js
@@ -185,8 +185,7 @@ class MyDirective() {}
 @Pipe({...})
 class MyPipe() {} 
 
-// Declares that a class has dependencies that should be injected into the constructor when the 
-// dependency injector is creating an instance of this class.
+// Declares that a class can be injected into the constructor of another class by the dependency injector.
 @Injectable()
 class MyService() {}  
 

From 122d5eed2dbbc263f6e7ef5bdc93eedb34760abf Mon Sep 17 00:00:00 2001
From: Julien LE COUPANEC <julien.le.coupanec@gmail.com>
Date: Tue, 26 Jun 2018 09:06:55 +0100
Subject: [PATCH 6/9] Rename link to avoid breaking Reddit

---
 README.md                                | 4 ++--
 frontend/{angular-io.js => angular.js}   | 0
 frontend/{angular-js.js => angularjs.js} | 0
 3 files changed, 2 insertions(+), 2 deletions(-)
 rename frontend/{angular-io.js => angular.js} (100%)
 rename frontend/{angular-js.js => angularjs.js} (100%)

diff --git a/README.md b/README.md
index f085dae..7e06c58 100644
--- a/README.md
+++ b/README.md
@@ -63,8 +63,8 @@ Feel free to browse each cheatsheet to learn new things and to keep them at hand
 - [React.js](frontend/react.js)
 - [Vue.js](frontend/vue.js)
 - [Ember.js](frontend/ember.js)
-- [Angular (2+)](frontend/angular-io.js)
-- [AngularJS](frontend/angular-js.js)
+- [Angular (2+)](frontend/angular.js)
+- [AngularJS](frontend/angular.js)
   </details>
 
 ### 🗃️ Databases
diff --git a/frontend/angular-io.js b/frontend/angular.js
similarity index 100%
rename from frontend/angular-io.js
rename to frontend/angular.js
diff --git a/frontend/angular-js.js b/frontend/angularjs.js
similarity index 100%
rename from frontend/angular-js.js
rename to frontend/angularjs.js

From 743e49ff6c38b9dd91b5bfaffd5e41edae31a4af Mon Sep 17 00:00:00 2001
From: Julien LE COUPANEC <julien.le.coupanec@gmail.com>
Date: Tue, 26 Jun 2018 09:10:13 +0100
Subject: [PATCH 7/9] Update angularjs.js link for README.md

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 7e06c58..7b5dc86 100644
--- a/README.md
+++ b/README.md
@@ -64,7 +64,7 @@ Feel free to browse each cheatsheet to learn new things and to keep them at hand
 - [Vue.js](frontend/vue.js)
 - [Ember.js](frontend/ember.js)
 - [Angular (2+)](frontend/angular.js)
-- [AngularJS](frontend/angular.js)
+- [AngularJS](frontend/angularjs.js)
   </details>
 
 ### 🗃️ Databases

From a3b9824c4c9c9fe8243c2ab1311157fd23033ae0 Mon Sep 17 00:00:00 2001
From: Julien LE COUPANEC <julien.le.coupanec@gmail.com>
Date: Tue, 26 Jun 2018 09:50:13 +0100
Subject: [PATCH 8/9] Angular: clarify meaning of `@Injectable` decorator
 thanks to @benelliott

---
 frontend/angular.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/frontend/angular.js b/frontend/angular.js
index 863d4e6..9229cf8 100644
--- a/frontend/angular.js
+++ b/frontend/angular.js
@@ -185,7 +185,8 @@ class MyDirective() {}
 @Pipe({...})
 class MyPipe() {} 
 
-// Declares that a class can be injected into the constructor of another class by the dependency injector.
+// Declares that a class can be injected into the constructor of another class
+// by the dependency injector.
 @Injectable()
 class MyService() {}  
 

From 83a91ce2d3d0b5fbbec43b8b3dd1a208bfff2365 Mon Sep 17 00:00:00 2001
From: Julien LE COUPANEC <julien.le.coupanec@gmail.com>
Date: Tue, 26 Jun 2018 09:51:58 +0100
Subject: [PATCH 9/9] Update Angular (2+) cheatsheet

---
 frontend/angular.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/angular.js b/frontend/angular.js
index 9229cf8..34c6731 100644
--- a/frontend/angular.js
+++ b/frontend/angular.js
@@ -1,5 +1,5 @@
 /* *******************************************************************************************
- * ANGULAR CHEATSHEET
+ * ANGULAR (2+) CHEATSHEET
  * DOCUMENTATION: https://angular.io/docs
  * STYLE GUIDE: https://angular.io/guide/styleguide
  * ******************************************************************************************* */