cargdev/angular
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

docs(aio): Reorganize style guide sections on prefixing components/directives (#22571)

Browse Source 
Closes https://github.com/angular/angular/issues/22081

PR Close #22571
This commit is contained in:
Shaun Grady 2018-02-22 09:42:56 -08:00 committed by Miško Hevery
parent d20877bf3f
commit c5872e6782
1 changed files with 71 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

142
aio/content/guide/styleguide.md
View File

@ -933,29 +933,18 @@ As always, strive for consistency.
<a href="#toc">Back to top</a> <a href="#toc">Back to top</a>
{@a 02-06} {@a 05-02}
### Directive selectors ### Component selectors
#### Style 02-06 #### Style 05-02
<div class="s-rule do"> <div class="s-rule do">
**Do** Use lower camel case for naming the selectors of directives. **Do** use _dashed-case_ or _kebab-case_ for naming the element selectors of components.
</div>
<div class="s-why">
**Why?** Keeps the names of the properties defined in the directives that are bound to the view consistent with the attribute names.
</div> </div>
@ -966,16 +955,40 @@ As always, strive for consistency.
**Why?** The Angular HTML parser is case sensitive and recognizes lower camel case. **Why?** Keeps the element names consistent with the specification for [Custom Elements](https://www.w3.org/TR/custom-elements/).
</div> </div>
<code-example path="styleguide/src/05-02/app/heroes/shared/hero-button/hero-button.component.avoid.ts" region="example" title="app/heroes/shared/hero-button/hero-button.component.ts">
</code-example>
<code-tabs>
<code-pane title="app/heroes/shared/hero-button/hero-button.component.ts" path="styleguide/src/05-02/app/heroes/shared/hero-button/hero-button.component.ts" region="example">
</code-pane>
<code-pane title="app/app.component.html" path="styleguide/src/05-02/app/app.component.html">
</code-pane>
</code-tabs>
<a href="#toc">Back to top</a> <a href="#toc">Back to top</a>
{@a 02-07} {@a 02-07}
### Custom prefix for components ### Component custom prefix
#### Style 02-07 #### Style 02-07
@ -1078,11 +1091,51 @@ For example, the prefix `toh` represents from **T**our **o**f **H**eroes and the
<a href="#toc">Back to top</a>
{@a 02-06}
### Directive selectors
#### Style 02-06
<div class="s-rule do">
**Do** Use lower camel case for naming the selectors of directives.
</div>
<div class="s-why">
**Why?** Keeps the names of the properties defined in the directives that are bound to the view consistent with the attribute names.
</div>
<div class="s-why-last">
**Why?** The Angular HTML parser is case sensitive and recognizes lower camel case.
</div>
<a href="#toc">Back to top</a>
{@a 02-08} {@a 02-08}
### Custom prefix for directives ### Directive custom prefix
#### Style 02-08 #### Style 02-08
@ -3710,59 +3763,6 @@ A typical *lazy loaded folder* contains a *routing component*, its child compone
## Components ## Components
{@a 05-02}
### Component selector names
#### Style 05-02
<div class="s-rule do">
**Do** use _dashed-case_ or _kebab-case_ for naming the element selectors of components.
</div>
<div class="s-why-last">
**Why?** Keeps the element names consistent with the specification for [Custom Elements](https://www.w3.org/TR/custom-elements/).
</div>
<code-example path="styleguide/src/05-02/app/heroes/shared/hero-button/hero-button.component.avoid.ts" region="example" title="app/heroes/shared/hero-button/hero-button.component.ts">
</code-example>
<code-tabs>
<code-pane title="app/heroes/shared/hero-button/hero-button.component.ts" path="styleguide/src/05-02/app/heroes/shared/hero-button/hero-button.component.ts" region="example">
</code-pane>
<code-pane title="app/app.component.html" path="styleguide/src/05-02/app/app.component.html">
</code-pane>
</code-tabs>
<a href="#toc">Back to top</a>
{@a 05-03} {@a 05-03}
### Components as elements ### Components as elements