5 lines
126 KiB
JSON
5 lines
126 KiB
JSON
|
{
|
||
|
|
"id": "guide/styleguide",
|
||
|
|
"title": "Angular coding style guide",
|
||
|
|
"contents": "\n\n\n<div class=\"github-links\">\n <a href=\"https://github.com/angular/angular/edit/master/aio/content/guide/styleguide.md?message=docs%3A%20describe%20your%20change...\" aria-label=\"Suggest Edits\" title=\"Suggest Edits\"><i class=\"material-icons\" aria-hidden=\"true\" role=\"img\">mode_edit</i></a>\n</div>\n\n\n<div class=\"content\">\n <h1 id=\"angular-coding-style-guide\">Angular coding style guide<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/styleguide#angular-coding-style-guide\"><i class=\"material-icons\">link</i></a></h1>\n<p>Looking for an opinionated guide to Angular syntax, conventions, and application structure?\nStep right in!\nThis style guide presents preferred conventions and, as importantly, explains why.</p>\n<a id=\"toc\"></a>\n<h2 id=\"style-vocabulary\">Style vocabulary<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/styleguide#style-vocabulary\"><i class=\"material-icons\">link</i></a></h2>\n<p>Each guideline describes either a good or bad practice, and all have a consistent presentation.</p>\n<p>The wording of each guideline indicates how strong the recommendation is.</p>\n<div class=\"s-rule do\">\n<p><strong>Do</strong> is one that should always be followed.\n<em>Always</em> might be a bit too strong of a word.\nGuidelines that literally should always be followed are extremely rare.\nOn the other hand, you need a really unusual case for breaking a <em>Do</em> guideline.</p>\n</div>\n<div class=\"s-rule consider\">\n<p><strong>Consider</strong> guidelines should generally be followed.\nIf you fully understand the meaning behind the guideline and have a good reason to deviate, then do so. Please strive to be consistent.</p>\n</div>\n<div class=\"s-rule avoid\">\n<p><strong>Avoid</strong> indicates something you should almost never do. Code examples to <em>avoid</em> have an unmistakable red header.</p>\n</div>\n<div class=\"s-why\">\n<p><strong>Why?</strong> gives reasons for following the previous recommendations.</p>\n</div>\n<h2 id=\"file-structure-conventions\">File structure conventions<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/styleguide#file-structure-conventions\"><i class=\"material-icons\">link</i></a></h2>\n<p>Some code examples display a file that has one or more similarly named companion files.\nFor example, <code>hero.component.ts</code> and <code>hero.component.html</code>.</p>\n<p>The guideline uses the shortcut <code>hero.component.ts|html|css|spec</code> to represent those various files. Using this shortcut makes this guide's file structures easier to read and more terse.</p>\n<a id=\"single-responsibility\"></a>\n<h2 id=\"single-responsibility\">Single responsibility<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/styleguide#single-responsibility\"><i class=\"material-icons\">link</i></a></h2>\n<p>Apply the\n<a href=\"https://wikipedia.org/wiki/Single_responsibility_principle\"><i>single responsibility principle</i> (SRP)</a>\nto all components, services, and other symbols.\nThis helps make the app cleaner, easier to read and maintain, and more testable.</p>\n<a id=\"01-01\"></a>\n<h3 id=\"rule-of-one\">Rule of One<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/styleguide#rule-of-one\"><i class=\"material-icons\">link</i></a></h3>\n<h4 id=\"style-01-01\">Style 01-01<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/styleguide#style-01-01\"><i class=\"material-icons\">link</i></a></h4>\n<div class=\"s-rule do\">\n<p><strong>Do</strong> define one thing, such as a service or component, per file.</p>\n</div>\n<div class=\"s-rule consider\">\n<p><strong>Consider</strong> limiting files to 400 lines of code.</p>\n</div>\n<div class=\"s-why\">\n<p><strong>Why?</strong> One component per file makes it far easier to read, maintain, and avoid\ncollisions with teams in source control.</p>\n</div>\n<div class=\"s-why\
|
||
|
|
}
|