docs(style-guide): make each style clickable for easier referencing

This commit is contained in:
Brian Olore 2016-05-09 15:45:40 -04:00 committed by Ward Bell
parent 074a33a622
commit ce05f9b4f9
1 changed files with 108 additions and 162 deletions

View File

@ -65,9 +65,8 @@ a(id='toc')
We apply the [Single Responsibility Principle](https:\/\/en.wikipedia.org/wiki/Single_responsibility_principle) to all Components, Services, and other symbols we create. This helps make our app cleaner, easier to read and maintain, and more testable.
### Rule of One
<a id="01-01"></a>
#### Style 01-01
### <a id="01-01"></a>Rule of One
#### <a href="#01-01">Style 01-01</a>
.s-rule.do
:marked
**Do** define one thing (e.g. service or component) per file.
@ -118,9 +117,8 @@ a(href="#toc") Back to top
.l-main-section
:marked
### Small Functions
<a id="01-02"></a>
#### Style 01-02
### <a id="01-02"></a>Small Functions
#### <a href="#01-02">Style 01-02</a>
.s-rule.do
:marked
**Do** define small functions
@ -159,9 +157,8 @@ a(href="#toc") Back to top
.l-main-section
:marked
### General Naming Guidelines
<a id="02-01"></a>
#### Style 02-01
### <a id="02-01"></a>General Naming Guidelines
#### <a href="#02-01">Style 02-01</a>
.s-rule.do
:marked
@ -187,9 +184,8 @@ a(href="#toc") Back to top
.l-main-section
:marked
### Separate File Names with Dots and Dashes
<a id="02-02"></a>
#### Style 02-02
### <a id="02-02"></a>Separate File Names with Dots and Dashes
#### <a href="#02-02">Style 02-02</a>
.s-rule.do
:marked
@ -229,9 +225,8 @@ a(href="#toc") Back to top
.l-main-section
:marked
### Components and Directives
<a id="02-03"></a>
#### Style 02-03
### <a id="02-03"></a>Components and Directives
#### <a href="#02-03">Style 02-03</a>
.s-rule.do
:marked
@ -310,9 +305,8 @@ a(href="#toc") Back to top
.l-main-section
:marked
### Service Names
<a id="02-04"></a>
#### Style 02-04
### <a id="02-04"></a>Service Names
#### <a href="#02-04">Style 02-04</a>
.s-rule.do
:marked
@ -375,9 +369,8 @@ a(href="#toc") Back to top
.l-main-section
:marked
### Bootstrapping
<a id="02-05"></a>
#### Style 02-05
### <a id="02-05"></a>Bootstrapping
#### <a href="#02-05">Style 02-05</a>
.s-rule.do
:marked
@ -399,9 +392,8 @@ a(href="#toc") Back to top
.l-main-section
:marked
### Directive Selectors
<a id="02-06"></a>
#### Style 02-06
### <a id="02-06"></a>Directive Selectors
#### <a href="#02-06">Style 02-06</a>
.s-rule.do
:marked
@ -419,9 +411,8 @@ a(href="#toc") Back to top
.l-main-section
:marked
### Custom Prefix for Components
<a id="02-07"></a>
#### Style 02-07
### <a id="02-07"></a>Custom Prefix for Components
#### <a href="#02-07">Style 02-07</a>
.s-rule.do
:marked
@ -456,9 +447,8 @@ a(href="#toc") Back to top
:marked
:marked
### Custom Prefix for Directives
<a id="02-08"></a>
#### Style 02-08
### <a id="02-08"></a>Custom Prefix for Directives
#### <a href="#02-08">Style 02-08</a>
.s-rule.do
:marked
@ -482,9 +472,8 @@ a(href="#toc") Back to top
.l-main-section
:marked
### Pipe Names
<a id="02-09"></a>
#### Style 02-09
### <a id="02-09"></a>Pipe Names
#### <a href="#02-09">Style 02-09</a>
.s-rule.do
:marked
@ -523,9 +512,8 @@ a(href="#toc") Back to top
.l-main-section
:marked
### Unit Test File Names
<a id="02-10"></a>
#### Style 02-10
### <a id="02-10"></a>Unit Test File Names
#### <a href="#02-10">Style 02-10</a>
.s-rule.do
:marked
@ -588,9 +576,8 @@ a(href="#toc") Back to top
.l-main-section
:marked
### End to End Test File Names
<a id="02-11"></a>
#### Style 02-11
### <a id="02-11"></a>End to End Test File Names
#### <a href="#02-11">Style 02-11</a>
.s-rule.do
:marked
@ -634,9 +621,8 @@ a(href="#toc") Back to top
.l-main-section
:marked
### Classes
<a id="03-01"></a>
#### Style 03-01
### <a id="03-01"></a>Classes
#### <a href="#03-01">Style 03-01</a>
.s-rule.do
:marked
@ -660,9 +646,8 @@ a(href="#toc") Back to top
.l-main-section
:marked
### Constants
<a id="03-02"></a>
#### Style 03-02
### <a id="03-02"></a>Constants
#### <a href="#03-02">Style 03-02</a>
.s-rule.do
:marked
@ -686,9 +671,8 @@ a(href="#toc") Back to top
.l-main-section
:marked
### Interfaces
<a id="03-03"></a>
#### Style 03-03
### <a id="03-03"></a>Interfaces
#### <a href="#03-03">Style 03-03</a>
.s-rule.do
:marked
@ -712,9 +696,8 @@ a(href="#toc") Back to top
.l-main-section
:marked
### Properties and Methods
<a id="03-04"></a>
#### Style 03-04
### <a id="03-04"></a>Properties and Methods
#### <a href="#03-04">Style 03-04</a>
.s-rule.do
:marked
@ -746,9 +729,8 @@ a(href="#toc") Back to top
.l-main-section
:marked
### Import Destructuring Spacing
<a id="03-05"></a>
#### Style 03-05
### <a id="03-05"></a>Import Destructuring Spacing
#### <a href="#03-05">Style 03-05</a>
.s-rule.do
:marked
@ -768,9 +750,8 @@ a(href="#toc") Back to top
.l-main-section
:marked
### Import Line Spacing
<a id="03-06"></a>
#### Style 03-06
### <a id="03-06"></a>Import Line Spacing
#### <a href="#03-06">Style 03-06</a>
.s-rule.do
:marked
@ -812,9 +793,8 @@ a(href="#toc") Back to top
.l-main-section
:marked
### LIFT
<a id="04-01"></a>
#### Style 04-01
### <a id="04-01"></a>LIFT
#### <a href="#04-01">Style 04-01</a>
.s-rule.do
:marked
@ -832,9 +812,8 @@ a(href="#toc") Back to top
.l-main-section
:marked
### Locate
<a id="04-02"></a>
#### Style 04-02
### <a id="04-02"></a>Locate
#### <a href="#04-02">Style 04-02</a>
.s-rule.do
:marked
@ -848,9 +827,8 @@ a(href="#toc") Back to top
.l-main-section
:marked
### Identify
<a id="04-03"></a>
#### Style 04-03
### <a id="04-03"></a>Identify
#### <a href="#04-03">Style 04-03</a>
.s-rule.do
:marked
@ -876,9 +854,8 @@ a(href="#toc") Back to top
.l-main-section
:marked
### Flat
<a id="04-04"></a>
#### Style 04-04
### <a id="04-04"></a>Flat
#### <a href="#04-04">Style 04-04</a>
.s-rule.do
:marked
@ -896,9 +873,8 @@ a(href="#toc") Back to top
.l-main-section
:marked
### T-DRY (Try to be DRY)
<a id="04-05"></a>
#### Style 04-05
### <a id="04-05"></a>T-DRY (Try to be DRY)
#### <a href="#04-05">Style 04-05</a>
.s-rule.do
:marked
@ -916,9 +892,8 @@ a(href="#toc") Back to top
.l-main-section
:marked
### Overall Structural Guidelines
<a id="04-06"></a>
#### Style 04-06
### <a id="04-06"></a>Overall Structural Guidelines
#### <a href="#04-06">Style 04-06</a>
.s-rule.do
:marked
@ -984,9 +959,8 @@ a(href="#toc") Back to top
.l-main-section
:marked
### Shared Folder
<a id="04-07"></a>
#### Style 04-07
### <a id="04-07"></a>Shared Folder
#### <a href="#04-07">Style 04-07</a>
.s-rule.do
:marked
@ -1045,9 +1019,8 @@ a(href="#toc") Back to top
.l-main-section
:marked
### Folders-by-Feature Structure
<a id="04-08"></a>
#### Style 04-08
### <a id="04-08"></a>Folders-by-Feature Structure
#### <a href="#04-08">Style 04-08</a>
.s-rule.do
:marked
@ -1120,9 +1093,8 @@ a(href="#toc") Back to top
.l-main-section
:marked
### Layout Components
<a id="04-09"></a>
#### Style 04-09
### <a id="04-09"></a>Layout Components
#### <a href="#04-09">Style 04-09</a>
.s-rule.do
:marked
@ -1171,9 +1143,8 @@ a(href="#toc") Back to top
.l-main-section
:marked
### Create and Import Barrels
<a id="04-10"></a>
#### Style 04-10
### <a id="04-10"></a>Create and Import Barrels
#### <a href="#04-10">Style 04-10</a>
.s-rule.consider
:marked
@ -1261,9 +1232,8 @@ a(href="#toc") Back to top
.l-main-section
:marked
### Lazy Loaded Folders
<a id="04-11"></a>
#### Style 04-11
### <a id="04-11"></a>Lazy Loaded Folders
#### <a href="#04-11">Style 04-11</a>
A distinct application feature or workflow may be *lazy loaded* or *loaded on demand* rather than when the application starts.
.s-rule.do
@ -1279,9 +1249,8 @@ a(href="#toc") Back to top
.l-main-section
:marked
### Prefix Lazy Loaded Folders with +
<a id="04-12"></a>
#### Style 04-12
### <a id="04-12"></a>Prefix Lazy Loaded Folders with +
#### <a href="#04-12">Style 04-12</a>
.s-rule.do
:marked
@ -1315,9 +1284,8 @@ a(href="#toc") Back to top
.l-main-section
:marked
### Never Directly Import Lazy Loaded Folders
<a id="04-13"></a>
#### Style 04-13
### <a id="04-13"></a>Never Directly Import Lazy Loaded Folders
#### <a href="#04-13">Style 04-13</a>
.s-rule.avoid
:marked
@ -1334,9 +1302,8 @@ a(href="#toc") Back to top
.l-main-section
:marked
### Lazy Loaded Folders May Import From a Parent
<a id="04-14"></a>
#### Style 04-14
### <a id="04-14"></a>Lazy Loaded Folders May Import From a Parent
#### <a href="#04-14">Style 04-14</a>
.s-rule.do
:marked
@ -1353,9 +1320,8 @@ a(href="#toc") Back to top
.l-main-section
:marked
### Use Component Router to Lazy Load
<a id="04-15"></a>
#### Style 04-15
### <a id="04-15"></a>Use Component Router to Lazy Load
#### <a href="#04-15">Style 04-15</a>
.s-rule.do
:marked
@ -1371,9 +1337,8 @@ a(href="#toc") Back to top
:marked
## Components
### Components Selector Naming
<a id="05-02"></a>
#### Style 05-02
### <a id="05-02"></a>Components Selector Naming
#### <a href="#05-02">Style 05-02</a>
.s-rule.do
:marked
@ -1398,9 +1363,8 @@ a(href="#toc") Back to top
.l-main-section
:marked
### Components as Elements
<a id="05-03"></a>
#### Style 05-03
### <a id="05-03"></a>Components as Elements
#### <a href="#05-03">Style 05-03</a>
.s-rule.do
:marked
@ -1436,9 +1400,8 @@ a(href="#toc") Back to top
.l-main-section
:marked
### Extract Template and Styles to Their Own Files
<a id="05-04"></a>
#### Style 05-04
### <a id="05-04"></a>Extract Template and Styles to Their Own Files
#### <a href="#05-04">Style 05-04</a>
.s-rule.do
:marked
@ -1477,9 +1440,8 @@ a(href="#toc") Back to top
.l-main-section
:marked
### Decorate Input and Output Properties Inline
<a id="05-12"></a>
#### Style 05-12
### <a id="05-12"></a>Decorate Input and Output Properties Inline
#### <a href="#05-12">Style 05-12</a>
.s-rule.do
:marked
@ -1515,9 +1477,8 @@ a(href="#toc") Back to top
.l-main-section
:marked
### Avoid Renaming Inputs and Outputs
<a id="05-13"></a>
#### Style 05-13
### <a id="05-13"></a>Avoid Renaming Inputs and Outputs
#### <a href="#05-13">Style 05-13</a>
.s-rule.avoid
:marked
@ -1545,9 +1506,8 @@ a(href="#toc") Back to top
.l-main-section
:marked
### Member Sequence
<a id="05-14"></a>
#### Style 05-14
### <a id="05-14"></a>Member Sequence
#### <a href="#05-14">Style 05-14</a>
.s-rule.do
:marked
@ -1571,9 +1531,8 @@ a(href="#toc") Back to top
.l-main-section
:marked
### Put Logic in Services
<a id="05-15"></a>
#### Style 05-15
### <a id="05-15"></a>Put Logic in Services
#### <a href="#05-14">Style 05-15</a>
.s-rule.do
:marked
@ -1609,9 +1568,8 @@ a(href="#toc") Back to top
.l-main-section
:marked
### Don't Prefix Output Properties
<a id="05-16"></a>
#### Style 05-16
### <a id="05-16"></a>Don't Prefix Output Properties
#### <a href="#05-16">Style 05-16</a>
.s-rule.do
:marked
@ -1647,9 +1605,8 @@ a(href="#toc") Back to top
.l-main-section
:marked
### Put Presentation Logic in the Component Class
<a id="05-17"></a>
#### Style 05-17
### <a id="05-17"></a>Put Presentation Logic in the Component Class
#### <a href="#05-17">Style 05-17</a>
.s-rule.do
:marked
@ -1679,9 +1636,8 @@ a(href="#toc") Back to top
.l-main-section
:marked
### Use Directives to Enhance an Existing Element
<a id="06-01"></a>
#### Style 06-01
### <a id="06-01"></a>Use Directives to Enhance an Existing Element
#### <a href="#06-01">Style 06-01</a>
.s-rule.do
:marked
@ -1705,9 +1661,8 @@ a(href="#toc") Back to top
.l-main-section
:marked
### Use HostListener and HostBinding Class Decorators
<a id="06-03"></a>
#### Style 06-03
### <a id="06-03"></a>Use HostListener and HostBinding Class Decorators
#### <a href="#06-03">Style 06-03</a>
.s-rule.do
:marked
@ -1733,9 +1688,8 @@ a(href="#toc") Back to top
:marked
## Services
### Services are Singletons in Same Injector
<a id="07-01"></a>
#### Style 07-01
### <a id="07-01"></a>Services are Singletons in Same Injector
#### <a href="#07-01">Style 07-01</a>
.s-rule.do
:marked
@ -1756,9 +1710,8 @@ a(href="#toc") Back to top
.l-main-section
:marked
### Single Responsibility
<a id="07-02"></a>
#### Style 07-02
### <a id="07-02"></a>Single Responsibility
#### <a href="#07-02">Style 07-02</a>
.s-rule.do
:marked
@ -1780,9 +1733,8 @@ a(href="#toc") Back to top
.l-main-section
:marked
### Providing a Service
<a id="07-03"></a>
#### Style 07-03
### <a id="07-03"></a>Providing a Service
#### <a href="#07-03">Style 07-03</a>
.s-rule.do
:marked
@ -1816,9 +1768,8 @@ a(href="#toc") Back to top
.l-main-section
:marked
### Use the @Injectable() Class Decorator
<a id="07-04"></a>
#### Style 07-04
### <a id="07-04"></a>Use the @Injectable() Class Decorator
#### <a href="#07-04">Style 07-04</a>
.s-rule.do
:marked
@ -1844,9 +1795,8 @@ a(href="#toc") Back to top
:marked
## Data Services
### Separate Data Calls
<a id="08-01"></a>
#### Style 08-01
### <a id="08-01"></a>Separate Data Calls
#### <a href="#08-01">Style 08-01</a>
.s-rule.do
:marked
@ -1880,9 +1830,8 @@ a(href="#toc") Back to top
.l-main-section
:marked
### Implement Lifecycle Hooks Interfaces
<a id="09-01"></a>
#### Style 09-01
### <a id="09-01"></a>Implement Lifecycle Hooks Interfaces
#### <a href="#09-01">Style 09-01</a>
.s-rule.do
:marked
@ -1911,9 +1860,8 @@ a(href="#toc") Back to top
.l-main-section
:marked
### Component Router
<a id="10-01"></a>
#### Style 10-01
### <a id="10-01"></a>Component Router
#### <a href="#10-01">Style 10-01</a>
.s-rule.do
:marked
@ -1954,9 +1902,8 @@ a(href="#toc") Back to top
.l-main-section
:marked
### Codelyzer
<a id="A-01"></a>
#### Style A-01
### <a id="A-01"></a>Codelyzer
#### <a href="#A-01">Style A-01</a>
.s-rule.do
:marked
@ -1970,9 +1917,8 @@ a(href="#toc") Back to top
.l-main-section
:marked
### File Templates and Snippets
<a id="A-02"></a>
#### Style A-02
### <a id="A-02"></a>File Templates and Snippets
#### <a href="#A-02">Style A-02</a>
.s-rule.do
:marked