{"id":22860069,"url":"https://github.com/reelyactive/angular-style-guide","last_synced_at":"2025-03-31T08:22:59.419Z","repository":{"id":35908148,"uuid":"40195110","full_name":"reelyactive/angular-style-guide","owner":"reelyactive","description":"Our guide to creating, maintaining and testing JavaScript for AngularJS, including HTML and CSS.","archived":false,"fork":false,"pushed_at":"2017-02-13T02:57:49.000Z","size":14,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-02-06T12:48:10.415Z","etag":null,"topics":["angularjs","styleguide","styleguide-boilerplate","styleguide-javascript"],"latest_commit_sha":null,"homepage":"https://reelyactive.github.io/angular-style-guide/","language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/reelyactive.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-08-04T16:13:11.000Z","updated_at":"2017-02-12T12:46:06.000Z","dependencies_parsed_at":"2022-08-26T17:31:29.778Z","dependency_job_id":null,"html_url":"https://github.com/reelyactive/angular-style-guide","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/reelyactive%2Fangular-style-guide","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/reelyactive%2Fangular-style-guide/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/reelyactive%2Fangular-style-guide/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/reelyactive%2Fangular-style-guide/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/reelyactive","download_url":"https://codeload.github.com/reelyactive/angular-style-guide/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246437040,"owners_count":20777141,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angularjs","styleguide","styleguide-boilerplate","styleguide-javascript"],"created_at":"2024-12-13T09:08:51.596Z","updated_at":"2025-03-31T08:22:59.396Z","avatar_url":"https://github.com/reelyactive.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"# reelyActive's Angular.js Guide\n\nHere we summarise the best practices, coding standards and tools for all our web development using AngularJS, HTML and CSS.  Looking for an example of HTML, CSS and JS that embodies this guide?  [Here you go](https://reelyactive.github.io/angular-style-guide/), and [here's the code](https://github.com/reelyactive/angular-style-guide/tree/gh-pages).\n\n\n## Existing Standards\n\nFortunately, we aren't the first to code for Angular.js, and there are some good style guides out there from which to draw inspiration.  Remember, the reason for following (de facto) standards is to facilitate both collaboration and consistency.\n\nNote also that we strive to follow standards which are complementary to those of our [node-style-guide](https://github.com/reelyactive/node-style-guide).\n\n\n### Google's JavaScript Style Guide\n\n[Read it](http://google-styleguide.googlecode.com/svn/trunk/javascriptguide.xml).  Please take extra care in reading the following three sections:\n\n#### Naming\n\nThe very explicit [Naming Style Rules](http://google-styleguide.googlecode.com/svn/trunk/javascriptguide.xml?showone=Naming#Naming) provide more than simple DOs and DONTs, they also explain why the given practices are encouraged.  They also reinforce Felix's naming guidelines, for example:\n\n- functionNamesLikeThis,\n- variableNamesLikeThis,\n- ClassNamesLikeThis,\n- EnumNamesLikeThis,\n- methodNamesLikeThis,\n- CONSTANT_VALUES_LIKE_THIS,\n- foo.namespaceNamesLikeThis.bar, and\n- filenameslikethis.js\n\n#### Code Formatting\n\nThe very explicit [Code Formatting Style Rules](http://google-styleguide.googlecode.com/svn/trunk/javascriptguide.xml?showone=Code_formatting#Code_formatting) provide all the examples you need to resolve ambiguities.  Keep in mind that Google follows the C++ formatting rules in spirit.  How about an example pertaining to a common source of contention: Function Arguments?\n\n\u003e When possible, all function arguments should be listed on the same line. If doing so would exceed the 80-column limit, the arguments must be line-wrapped in a readable way. To save space, you may wrap as close to 80 as possible, or put each argument on its own line to enhance readability. The indentation may be either four spaces, or aligned to the parenthesis.\n\n#### Comments\n\nThe very explicit [Comments Style Rules](http://google-styleguide.googlecode.com/svn/trunk/javascriptguide.xml?showone=Comments#Comments) also follow the C++ rules in spirit and specifically use [JSDoc](http://usejsdoc.org/).  There are many illustrative examples.  Read them!  And remember:\n\n\u003e Inline comments should be of the // variety.\n\n\n## reelyActive Standards\n\nThe existing standards above cover a lot, but they don't cover everything.  So we're establishing a few of our own internal standards which are specifically suited to our projects and workflow.\n\n### Coding Style\n\n#### Two Spaces\n\nFelix, creator of [Felix's Node.js Style Guide](https://github.com/felixge/node-style-guide), sums up this rule most eloquently:\n\n\u003e Use 2 spaces for indenting your code and swear an oath to never mix tabs and spaces - a special kind of hell is awaiting you otherwise.\n\nThis is how we do it in Node and this is how we do it in Angular, HTML and CSS.\n\n#### Copyright\n\nEvery JavaScript file should start with the following comment:\n\n    /**\n     * Copyright reelyActive 2014-2015\n     * We believe in an open Internet of Things\n     */\n\nThe use of a copyright indicates that the code is intellectual property created by reelyActive.\n\nNote that the date range should extend between the year the file was initially created to the year the file was last modified.  This is a simple way to provide a brief historical perspective of the code.\n\nThe line _\"We believe in an open Internet of Things\"_ serves as a reminder of our vision and should inspire the developer to maintain the code in a way befitting of an open project with many collaborators.\n\n\n### Frameworks\n\nThere are plenty of great frameworks out there but you have to make a choice.  We use:\n- [AngularJS](https://angularjs.org/) for all our client-side JavaScript needs\n- [Angular Bootstrap UI](https://angular-ui.github.io/bootstrap/) for efficient interactive components\n- [socket.io]() for real-time interaction, when required\n- [D3.js](http://d3js.org/) for live/interactive graphics, when required\n- [Bootstrap CSS](http://getbootstrap.com/css/) for style\n\nNo additional frameworks shall be used without the express written consent of the style guardians.\n\n#### Framework CDNs\n\nThere are plenty of great CDNs for the plenty of great frameworks out there, but again, you have to make a choice.  We use CloudFlare and the minified versions of the files.\n\n```\n\u003cscript src=\"https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.3/angular.min.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.2/ui-bootstrap-tpls.min.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"https://cdnjs.cloudflare.com/ajax/libs/socket.io/1.3.6/socket.io.min.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js\"\u003e\u003c/script\u003e\n\u003clink href=\"https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css\" rel=\"stylesheet\"/\u003e\n```\n\nNo additional CDNs shall be used without the express written consent of the style guardians.  Keep in mind that some CDNs are inaccessible in some regions (we learned this firsthand in China), hence our insistence on consistency.  Local hosting for offline deployments is acceptable.\n\n\nLicense\n-------\n\nMIT License\n\nCopyright (c) 2015-2017 reelyActive\n\nPermission 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:\n\nThe above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR \nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, \nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE \nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER \nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, \nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN \nTHE SOFTWARE.\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freelyactive%2Fangular-style-guide","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Freelyactive%2Fangular-style-guide","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freelyactive%2Fangular-style-guide/lists"}