From b12e18934f9461be0aa5e9086f65cb75446ec501 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=B5=B5=E5=8F=AF?= Date: Thu, 9 Apr 2015 12:05:26 +0800 Subject: [PATCH 001/248] change transition of style guide --- i18n/zh-CN.md | 44 ++++++++++++++++++++++---------------------- 1 file changed, 22 insertions(+), 22 deletions(-) diff --git a/i18n/zh-CN.md b/i18n/zh-CN.md index 8e72ffe1..b18619de 100644 --- a/i18n/zh-CN.md +++ b/i18n/zh-CN.md @@ -1,29 +1,29 @@ -# Angular风格指南 +# Angular规范 -*Angular风格指南[@john_papa](//twitter.com/john_papa)* +*Angular规范[@john_papa](//twitter.com/john_papa)* -*由[kerncink](https://github.com/natee)翻译* +*由[ZhaoKe](https://github.com/natee)翻译* >The [original English version](http://jpapa.me/ngstyles) is the source of truth, as it is maintained and updated first. -如果你正在寻找一些关于语法、约定和结构化的Angular应用的一个有建设性的风格指南，那么你来对地方了。这里所包含的风格是基于我在团队中使用[Angular](//angularjs.org)的一些经验、一些演讲和[Pluralsight培训课程](http://pluralsight.com/training/Authors/Details/john-papa)。 +如果你正在寻找一些关于语法、约定和结构化的Angular应用的一个有建设性的规范，那么你来对地方了。这里所包含的内容是基于我在团队中使用[Angular](//angularjs.org)的一些经验、一些演讲和[Pluralsight培训课程](http://pluralsight.com/training/Authors/Details/john-papa)。 -这个风格指南的目的是为构建Angular应用提供指导，当然更加重要的是让大家知道我为什么要选择它们。 +这个规范的目的是为构建Angular应用提供指导，当然更加重要的是让大家知道我为什么要选择它们。 ->如果你喜欢这个指南，请在Pluralsight看看[Angular Patterns: Clean Code](http://jpapa.me/ngclean)。 +>如果你喜欢这个规范，请在Pluralsight看看[Angular Patterns: Clean Code](http://jpapa.me/ngclean)。 [![Angular Patterns: Clean Code](https://raw.githubusercontent.com/johnpapa/angular-styleguide/master/assets/ng-clean-code-banner.png)](http://jpapa.me/ngclean) ## Community Awesomeness and Credit -Angular社区是一个热衷于分享经验的令人难以置信的社区，尽管Todd Motto（他是我的一个朋友，也是Angular专家）和我合作了多种风格和惯例，但是我们也存在着一些分歧。我鼓励你去看看[Todd的指南](https://github.com/toddmotto/angularjs-styleguide)，在那里你能看到我们之间的区别。 +Angular社区是一个热衷于分享经验的令人难以置信的社区，尽管Todd Motto（他是我的一个朋友，也是Angular专家）和我合作了多种规范和惯例，但是我们也存在着一些分歧。我鼓励你去看看[Todd的指南](https://github.com/toddmotto/angularjs-styleguide)，在那里你能看到我们之间的区别。 -我的许多风格都是从大量的程序会话[Ward Bell](http://twitter.com/wardbell)和我所拥有的而来的，我的好友Ward也影响了本指南的最终演变。 +我的许多规范都是从大量的程序会话[Ward Bell](http://twitter.com/wardbell)和我所拥有的而来的，我的好友Ward也影响了本规范的最终演变。 -## 在示例App中了解这些风格 +## 在示例App中了解这些规范 看示例代码有助于你更好地理解，你可以在`modular`文件夹下找到[命名为modular的示例应用程序](https://github.com/johnpapa/ng-demos)，随便克隆。 ##翻译 -[Angular风格指南翻译版本](https://github.com/johnpapa/angular-styleguide/tree/master/i18n)。 +[Angular规范翻译版本](https://github.com/johnpapa/angular-styleguide/tree/master/i18n)。 ##目录 1. [单一职责](#单一职责) @@ -170,7 +170,7 @@ Angular社区是一个热衷于分享经验的令人难以置信的社区，尽 })(); ``` - - 注：为了简洁起见，本指南余下的示例中将会省略IIFE语法。 + - 注：为了简洁起见，本规范余下的示例中将会省略IIFE语法。 - 注：IIFE阻止了测试代码访问私有成员（正则表达式、helper函数等），这对于自身测试是非常友好的。然而你可以把这些私有成员暴露到可访问成员中进行测试，例如把私有成员（正则表达式、helper函数等）放到factory或是constant中。 @@ -2106,7 +2106,7 @@ Angular社区是一个热衷于分享经验的令人难以置信的社区，尽 ## 应用程序结构 -###总指南 +###总规范 ###### [Style [Y150](#style-y150)] - 有实施的短期看法和长远的目标，换句话说，从小处入手，但是要记住app的走向。app的所有代码都在一个叫做`app`的根目录下，所有的内容都遵循一个功能一个文件，每一个controller、service、module、view都是独立的文件。第三方脚本存放在另外的根文件夹中（`bower_components`、`scripts`、`lib`）。 @@ -2127,7 +2127,7 @@ Angular社区是一个热衷于分享经验的令人难以置信的社区，尽 *为什么？*：开发者可以快速定位代码、快速识别文件代表的意思，结构尽可能平直，没有重复，没有多余名字。 - *为什么？*：LIFT指南都包括在内。 + *为什么？*：LIFT规范都包括在内。 *为什么？*：通过组织内容和让它们保持和LIFT指导准则一致，帮助降低应用程序变得混乱的可能性。 @@ -2650,7 +2650,7 @@ Angular社区是一个热衷于分享经验的令人难以置信的社区，尽 ### 用一个Options文件 ###### [Style [Y235](#style-y235)] - - 使用JSCS检查代码风格，确保你的代码控制中有定制的JSCS options文件，在这里[JSCS docs](http://www.jscs.info)查看更多信息。 + - 使用JSCS检查代码规范，确保你的代码控制中有定制的JSCS options文件，在这里[JSCS docs](http://www.jscs.info)查看更多信息。 *为什么？*：提交代码前第一时间提供一个预警。 @@ -2784,12 +2784,12 @@ Angular社区是一个热衷于分享经验的令人难以置信的社区，尽 **[返回顶部](#目录)** ## 文件模板和片段 -使用文件模板和片段帮助保持一致性的风格，这里有针对一些web开发的编辑器和IDE的模板和（或）片段。 +为了遵循一致的规范和模式，使用文件模板和片段，这里有针对一些web开发的编辑器和IDE的模板和（或）片段。 ###Sublime Text ###### [Style [Y250](#style-y250)] - - Angular片段遵循这些风格指南。 + - Angular片段遵循这些规范。 - 下载[Sublime Angular snippets](assets/sublime-angular-snippets?raw=true) - 把它放到Packages文件夹中 @@ -2808,7 +2808,7 @@ Angular社区是一个热衷于分享经验的令人难以置信的社区，尽 ###Visual Studio ###### [Style [Y251](#style-y251)] - - Angular文件遵循[SideWaffle](http://www.sidewaffle.com)所介绍的风格指南。 + - Angular文件遵循[SideWaffle](http://www.sidewaffle.com)所介绍的规范。 - 下载Visual Studio扩展文件[SideWaffle](http://www.sidewaffle.com) - 运行下载的vsix文件 @@ -2834,7 +2834,7 @@ Angular社区是一个热衷于分享经验的令人难以置信的社区，尽 ### Atom ###### [Style [Y253](#style-y253)] - - Angular片段遵循以下指南。 + - Angular片段遵循以下规范。 ``` apm install angularjs-styleguide-snippets ``` @@ -2857,7 +2857,7 @@ Angular社区是一个热衷于分享经验的令人难以置信的社区，尽 ### Brackets ###### [Style [Y254](#style-y254)] - - Angular代码片段遵循以下风格指南。 + - Angular代码片段遵循以下规范。 - 下载[Brackets Angular snippets](assets/brackets-angular-snippets.yaml?raw=true) - 拓展管理器( File > Extension manager ) @@ -2891,7 +2891,7 @@ Angular社区是一个热衷于分享经验的令人难以置信的社区，尽 ## Yeoman Generator ###### [Style [Y260](#style-y260)] -你可以使用[HotTowel yeoman generator](http://jpapa.me/yohottowel)来创建一个遵循本指南的Angular起步应用。 +你可以使用[HotTowel yeoman generator](http://jpapa.me/yohottowel)来创建一个遵循本规范的Angular入门应用。 1. 安装generator-hottowel @@ -2977,7 +2977,7 @@ Angular社区是一个热衷于分享经验的令人难以置信的社区，尽 ## 贡献 -先打开一个问题讨论潜在的变化和增加。如果你对这篇指南有问题，随时在仓库中提出问题。如果你发现了一个错字，创建一个pull request。这样做是为了保持内容的更新，使用github的原生功能通过问题和PR来帮助讲述这个故事，具体做法可以google一下。为什么？因为如果你有问题，其他人可能有同样的问题，你在这里可以学到如何贡献。 +先打开一个问题讨论潜在的变化和增加。如果你对这篇规范有任何疑惑，随时在仓库中提出问题。如果你发现了一个错字，创建一个pull request。这样做是为了保持内容的更新，使用github的原生功能通过问题和PR来帮助讲述这个故事，具体做法可以google一下。为什么？因为如果你有问题，其他人可能有同样的问题，你在这里可以学到如何贡献。 *贡献代码到这个仓库就意味着你同意了本仓库的许可证内容* @@ -2988,7 +2988,7 @@ Angular社区是一个热衷于分享经验的令人难以置信的社区，尽 ## 许可证 - - **tldr;** 如果可以的话，使用本指南的时候还是指明归属吧。 + - **tldr;** 如果可以的话，使用本规范的时候还是指明归属吧。 ### Copyright From 8110d0503a6c28712c51ab2baf982f65ce83aaaa Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=B5=B5=E5=8F=AF?= Date: Mon, 27 Apr 2015 19:03:29 +0800 Subject: [PATCH 002/248] update to #381 --- i18n/zh-CN.md | 95 ++++++++++++++++++++++++++++++++++++++++++++++++--- 1 file changed, 91 insertions(+), 4 deletions(-) diff --git a/i18n/zh-CN.md b/i18n/zh-CN.md index b18619de..fcfdbbf0 100644 --- a/i18n/zh-CN.md +++ b/i18n/zh-CN.md @@ -1444,7 +1444,7 @@ Angular社区是一个热衷于分享经验的令人难以置信的社区，尽 }); } - function moviePrepService(movieService) { + function moviesPrepService(movieService) { return movieService.getMovies(); } @@ -1585,13 +1585,13 @@ Angular社区是一个热衷于分享经验的令人难以置信的社区，尽 controller: 'AvengersController', controllerAs: 'vm', resolve: { - moviesPrepService: moviePrepService + moviesPrepService: moviesPrepService } }); } - moviePrepService.$inject = ['movieService']; - function moviePrepService(movieService) { + moviesPrepService.$inject = ['movieService']; + function moviesPrepService(movieService) { return movieService.getMovies(); } ``` @@ -2886,6 +2886,23 @@ Angular社区是一个热衷于分享经验的令人难以置信的社区，尽 ngroute // creates an Angular routeProvider ``` +### vim +###### [Style [Y255](#style-y255)] + + - vim代码片段遵循以下规范。 + + - 下载[vim Angular代码段](assets/vim-angular-snippets?raw=true) + - 设置[neosnippet.vim](https://github.com/Shougo/neosnippet.vim) + - 粘贴到snippet路径下 + + ```javascript + ngcontroller // creates an Angular controller + ngdirective // creates an Angular directive + ngfactory // creates an Angular factory + ngmodule // creates an Angular module + ngservice // creates an Angular service + ngfilter // creates an Angular filter + ``` **[返回顶部](#目录)** ## Yeoman Generator @@ -2925,6 +2942,76 @@ Angular社区是一个热衷于分享经验的令人难以置信的社区，尽 *为什么？*：语法和Angular路由很像，很容易迁移到UI Router。 + - 注意：你可以在运行期间使用`routerHelperProvider`配置跨文件状态 + + ```javascript + // customers.routes.js + angular + .module('app.customers') + .run(appRun); + + /* @ngInject */ + function appRun(routerHelper) { + routerHelper.configureStates(getStates()); + } + + function getStates() { + return [ + { + state: 'customer', + config: { + abstract: true, + template: '', + url: '/customer' + } + } + ]; + } + ``` + + ```javascript + // routerHelperProvider.js + angular + .module('blocks.router') + .provider('routerHelper', routerHelperProvider); + + routerHelperProvider.$inject = ['$locationProvider', '$stateProvider', '$urlRouterProvider']; + /* @ngInject */ + function routerHelperProvider($locationProvider, $stateProvider, $urlRouterProvider) { + /* jshint validthis:true */ + this.$get = RouterHelper; + + $locationProvider.html5Mode(true); + + RouterHelper.$inject = ['$state']; + /* @ngInject */ + function RouterHelper($state) { + var hasOtherwise = false; + + var service = { + configureStates: configureStates, + getStates: getStates + }; + + return service; + + /////////////// + + function configureStates(states, otherwisePath) { + states.forEach(function(state) { + $stateProvider.state(state.state, state.config); + }); + if (otherwisePath && !hasOtherwise) { + hasOtherwise = true; + $urlRouterProvider.otherwise(otherwisePath); + } + } + + function getStates() { return $state.get(); } + } + } + ``` + ###### [Style [Y271](#style-y271)] - Define routes for views in the module where they exist，Each module should contain the routes for the views in the module. From 9263f04b524ed5b983f8caca722507abb1389fa0 Mon Sep 17 00:00:00 2001 From: noritamago Date: Sun, 21 Jun 2015 02:02:25 +0900 Subject: [PATCH 003/248] follow latest master branch change in ja-JP --- i18n/ja-JP.md | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/i18n/ja-JP.md b/i18n/ja-JP.md index 46c9e982..29218653 100644 --- a/i18n/ja-JP.md +++ b/i18n/ja-JP.md @@ -366,7 +366,7 @@ } ``` - Note: 下記のコメントをコードの上部に入れることで [jshint](http://www.jshint.com/) のwarningsを避けることができます。 しかし関数がアッパーケースの場合には不要です。規約的にはそれはコンストラクタであり、Angularではコントローラに当たります。 + Note: コメントをコードの上部に入れることで [jshint](http://www.jshint.com/) のwarningsを避けることができます。 しかし関数がアッパーケースの場合には不要です。規約的にはそれはコンストラクタであり、Angularではコントローラに当たります。 ```javascript /* jshint validthis: true */ @@ -1263,7 +1263,7 @@ console.log('LINK: vm.max = %s', vm.max); } ``` -z + ###### [Style [Y076](#style-y076)] - `controller as`シンタックスをディレクティブで用い、外側のscopeをディレクティブのコントローラのscopeにバインドしたいときは `bindToController = true` を使って下さい。 @@ -2476,8 +2476,8 @@ z ``` /src/client/app/customers/customer-detail.controller.js /customer-detail.controller.spec.js + /customers.controller.js /customers.controller.spec.js - /customers.controller-detail.spec.js /customers.module.js /customers.route.js /customers.route.spec.js @@ -2724,7 +2724,6 @@ z "disallowCommaBeforeLineBreak": null, "disallowDanglingUnderscores": null, "disallowEmptyBlocks": null, - "disallowMultipleLineStrings": null, "disallowTrailingComma": null, "requireCommaBeforeLineBreak": null, "requireDotNotation": null, From 8d1441a190b2d2681835d79922034c2cd260c11c Mon Sep 17 00:00:00 2001 From: natee Date: Sat, 27 Jun 2015 20:31:18 +0800 Subject: [PATCH 004/248] update transition --- README.md | 2 +- i18n/zh-CN.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 4b788714..d887a430 100644 --- a/README.md +++ b/README.md @@ -8,7 +8,7 @@ The purpose of this style guide is to provide guidance on building Angular appli >If you like this guide, check out my [Angular Patterns: Clean Code](http://jpapa.me/ngclean) course at Pluralsight which is a companion to this guide. - [![AngularJs Patterns: Clean Code](https://raw.githubusercontent.com/johnpapa/angular-styleguide/master/assets/ng-clean-code-banner.png)](http://jpapa.me/ngclean) + [![Angular Patterns: Clean Code](https://raw.githubusercontent.com/johnpapa/angular-styleguide/master/assets/ng-clean-code-banner.png)](http://jpapa.me/ngclean) ## Community Awesomeness and Credit Never work in a vacuum. I find that the Angular community is an incredible group who are passionate about sharing experiences. As such, a friend and Angular expert Todd Motto and I have collaborated on many styles and conventions. We agree on most, and some we diverge. I encourage you to check out [Todd's guidelines](https://github.com/toddmotto/angularjs-styleguide) to get a sense for his approach and how it compares. diff --git a/i18n/zh-CN.md b/i18n/zh-CN.md index 81b337ee..65216c32 100644 --- a/i18n/zh-CN.md +++ b/i18n/zh-CN.md @@ -2474,8 +2474,8 @@ Angular社区是一个热衷于分享经验的令人难以置信的社区，尽 ``` /src/client/app/customers/customer-detail.controller.js /customer-detail.controller.spec.js + /customers.controller.js /customers.controller.spec.js - /customers.controller-detail.spec.js /customers.module.js /customers.route.js /customers.route.spec.js From 706b6693345d5a38b520b222af42cbc0be341c84 Mon Sep 17 00:00:00 2001 From: Nikolay Date: Tue, 30 Jun 2015 16:29:33 +0300 Subject: [PATCH 005/248] Update ru-RU.md --- i18n/ru-RU.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/i18n/ru-RU.md b/i18n/ru-RU.md index 5a0b09d4..66b9ae77 100644 --- a/i18n/ru-RU.md +++ b/i18n/ru-RU.md @@ -789,7 +789,7 @@ ### Определения Функций для Скрытия Деталей Реализации ###### [Style [Y053](#style-y053)] - - Используйте определения функций, чтобы скрыть детали реализации. Держите вызываемые члены фабрики в верхней части. Свяжите их с определениями функций, которые распололжены ниже в файле. Подробную информацию смотрите [здесь](http://www.johnpapa.net/angular-function-declarations-function-expressions-and-readable-code). + - Используйте определения функций, чтобы скрыть детали реализации. Держите вызываемые члены фабрики в верхней части. Свяжите их с определениями функций, которые расположены ниже в файле. Подробную информацию смотрите [здесь](http://www.johnpapa.net/angular-function-declarations-function-expressions-and-readable-code). *Почему?*: Размещение вызываемых членов в верхней части улучшает читабельность и помогает быстро определить, какие функции фабрики могут быть вызваны извне. From 11a5232c82a6277fee9a221b62f97537391da7cf Mon Sep 17 00:00:00 2001 From: Nikolay Date: Tue, 30 Jun 2015 16:37:05 +0300 Subject: [PATCH 006/248] Update ru-RU.md --- i18n/ru-RU.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/i18n/ru-RU.md b/i18n/ru-RU.md index 5a0b09d4..b6287cbe 100644 --- a/i18n/ru-RU.md +++ b/i18n/ru-RU.md @@ -1192,7 +1192,7 @@ Замечание: Что касается внедренной зависимости, смотрите [Определение зависимостей вручную](#manual-annotating-for-dependency-injection). - Замечание: Заметьте, что контроллер директивы находится снаружи самой директивы. Такой подход исключает проблемы, когда инжектор создается в недосягаемом код после, например, 'return'. + Замечание: Заметьте, что контроллер директивы находится снаружи самой директивы. Такой подход исключает проблемы, когда инжектор создается в недосягаемом кодe после, например, 'return'. ```html
From 70edfb25d216492382cb47bf1be181e9d2f3ef03 Mon Sep 17 00:00:00 2001 From: Greg Deane Date: Mon, 6 Jul 2015 10:28:09 +0200 Subject: [PATCH 007/248] Adjusted position of "Back to top" link in "File Templates and Snippets" section --- README.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/README.md b/README.md index 4b788714..72602a74 100644 --- a/README.md +++ b/README.md @@ -2902,6 +2902,8 @@ Use file templates or snippets to help follow consistent styles and patterns. He ngservice // creates an Angular service ngfilter // creates an Angular filter ``` + + **[Back to top](#table-of-contents)** ## Yeoman Generator From 78e243865ef7bd103677c7eaf09292f523f48919 Mon Sep 17 00:00:00 2001 From: gordonmzhu Date: Tue, 7 Jul 2015 08:08:23 -0700 Subject: [PATCH 008/248] Fix spelling of 'success' --- i18n/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/i18n/README.md b/i18n/README.md index ca99715e..6a161c92 100644 --- a/i18n/README.md +++ b/i18n/README.md @@ -15,7 +15,7 @@ The [original English version](http://jpapa.me/ngstyles) is the source of truth, 9. [Spanish](es-ES.md) ## Contributing -Language translations are welcomed and encouraged. The succcess of these translations depends on the community. I highly encourage new translation contributions and help to keep them up to date. +Language translations are welcomed and encouraged. The success of these translations depends on the community. I highly encourage new translation contributions and help to keep them up to date. All translations must preserve the intention of the original document. From 23fbda3fe3f585f91b8adf3f7fc75116b7d2843c Mon Sep 17 00:00:00 2001 From: Sascha Hagedorn Date: Sat, 11 Jul 2015 14:33:59 +0200 Subject: [PATCH 009/248] Fixed typos. --- i18n/de-DE.md | 230 +++++++++++++++++++++++++------------------------- 1 file changed, 115 insertions(+), 115 deletions(-) diff --git a/i18n/de-DE.md b/i18n/de-DE.md index e43b8717..7eba3555 100644 --- a/i18n/de-DE.md +++ b/i18n/de-DE.md @@ -6,21 +6,21 @@ >The [original English version](http://jpapa.me/ngstyles) is the source of truth, as it is maintained and updated first. -Sind Sie auf der Suche nach einem dogmatischen Styleguide zur Syntax, zu Konventionen und zur Struktur von Angular-Anwendungen, dann treten sie näher. Diese Vorlagen basieren auf meinen Erfahrungen mit [Angular](//angularjs.org), Präsentationen, [Pluralsight Trainingskursen](http://pluralsight.com/training/Authors/Details/john-papa) und der Arbeit in Teams. +Sind Sie auf der Suche nach einem dogmatischen Styleguide zur Syntax, zu Konventionen und zur Struktur von Angular-Anwendungen, dann treten Sie näher. Diese Vorlagen basieren auf meinen Erfahrungen mit [Angular](//angularjs.org), Präsentationen, [Pluralsight Trainingskursen](http://pluralsight.com/training/Authors/Details/john-papa) und der Arbeit in Teams. Der Zweck dieses Styleguides ist es, eine Anleitung für die Erstellung von Angular-Anwendungen bereitzustellen, indem ich die Konventionen, die ich nutze, zeige und - wichtiger als das - beschreibe, warum ich sie wähle. ->Wenn Sie diese Anleitung mögen, dann besuchen Sie meinen Kurs [Angular Patterns: Clean Code] (http://jpapa.me/ngclean) auf Pluralsight, der eine Begleitung zu dieser Anleitung dartellt. +>Wenn Sie diese Anleitung mögen, dann besuchen Sie meinen Kurs [Angular Patterns: Clean Code] (http://jpapa.me/ngclean) auf Pluralsight, der eine Begleitung zu dieser Anleitung darstellt. [![Angular Patterns: Clean Code](https://raw.githubusercontent.com/johnpapa/angular-styleguide/master/assets/ng-clean-code-banner.png)](http://jpapa.me/ngclean) -## Außergewöhnliche Community and Anerkennung -Arbeite niemals im leeren Raum. Ich finde, dass die Angular-Community eine unglaubliche Gruppe ist, die ihre Erfahrung mit Leidenschaft teilt. Also haben ein Freund und Angular-Experte, Todd Motto, und ich viele Vorlagen und Konventionen zusammengetragen. Bei den meisten sind wir uns einig, und bei ein paar sind wir verschiedener Meinung. Ich möchte Sie ermutigen, sich [Todd's Guidelines](https://github.com/toddmotto/angularjs-styleguide) anzusehen, um ein Gespühr für seinen Ansatz zu entwickeln und ihn vergleichen zu können. +## Außergewöhnliche Community und Anerkennung +Arbeite niemals im leeren Raum. Ich finde, dass die Angular-Community eine unglaubliche Gruppe ist, die ihre Erfahrung mit Leidenschaft teilt. Also haben ein Freund und Angular-Experte, Todd Motto, und ich viele Vorlagen und Konventionen zusammengetragen. Bei den meisten sind wir uns einig, und bei ein paar sind wir verschiedener Meinung. Ich möchte Sie ermutigen, sich [Todd's Guidelines](https://github.com/toddmotto/angularjs-styleguide) anzusehen, um ein Gespür für seinen Ansatz zu entwickeln und ihn vergleichen zu können. Viele meiner Vorlagen entstanden aus Pair-Programming-Sessions, die [Ward Bell](http://twitter.com/wardbell) und ich hatten. Mein Freund Ward hat sicherlich die endgültige Entwicklung dieser Anleitung beeinflusst. ## Schauen Sie sich die Vorlagen in einer Beispielanwendung an -Während diese Anleitung das *Was*, *Warum* und *Wie* erklärt, finde ich es ebenso hilfreich, sie auch in der Praxis zu sehen. Diese Anleitung wird von einer Beispielanwendung begleitet, die diesen Vorlagen und Mustern folgt. Sie finden die [Beispielanwendung (namens "modular") hier] (https://github.com/johnpapa/ng-demos) im `modular`-Ordner. Fühlen Sie sich frei, sich diese zu holen, indem Sie sie clonen oder einen Fork erstellen.[Anweisungen, sie zum Laufen zu bringen, finden Sie im Readme](https://github.com/johnpapa/ng-demos/tree/master/modular). +Während diese Anleitung das *Was*, *Warum* und *Wie* erklärt, finde ich es ebenso hilfreich, sie auch in der Praxis zu sehen. Diese Anleitung wird von einer Beispielanwendung begleitet, die diesen Vorlagen und Mustern folgt. Sie finden die [Beispielanwendung (namens "modular") hier] (https://github.com/johnpapa/ng-demos) im `modular`-Ordner. Fühlen Sie sich frei, diese zu holen, indem Sie sie clonen oder einen Fork erstellen.[Anweisungen, sie zum Laufen zu bringen, finden Sie im Readme](https://github.com/johnpapa/ng-demos/tree/master/modular). ##Übersetzungen [Übersetzungen dieses Styleguides](https://github.com/johnpapa/angular-styleguide/tree/master/i18n) werden von der Community hier verwaltet. @@ -67,7 +67,7 @@ Während diese Anleitung das *Was*, *Warum* und *Wie* erklärt, finde ich es ebe - Definiere eine Komponente pro Datei. - Das folgende Beispoiel definiert das `app`-Modul und seine Abhängigkeiten, einen Controller und eine Factory in ein und derselben Datei. + Das folgende Beispiel definiert das `app`-Modul und seine Abhängigkeiten, einen Controller und eine Factory in ein und derselben Datei. ```javascript /* zu vermeiden */ @@ -119,11 +119,11 @@ Während diese Anleitung das *Was*, *Warum* und *Wie* erklärt, finde ich es ebe ### JavaScript Closures ###### [Style [Y010](#style-y010)] - - Packen sie Angular-Komponenten in eine Funktion, die sich sofort selbst ausführt (Immediately Invoked Function Expression, kurz: IIFE). + - Packen Sie Angular-Komponenten in eine Funktion, die sich sofort selbst ausführt (Immediately Invoked Function Expression, kurz: IIFE). - *Warum?*: Eine IIFE entfernt Variablen aus dem Global Scope. Dies verhindert, dass Variablen- und Funktionsdeklarationen länger als erwartet im global scope bleiben. Und es verhindert zusätzlich, Kollisionen bei Variablen zu verhindern. + *Warum?*: Eine IIFE entfernt Variablen aus dem global scope. Dies verhindert, dass Variablen- und Funktionsdeklarationen länger als erwartet im global scope bleiben. Und es verhindert zusätzlich, Kollisionen bei Variablen zu verhindern. - *Warum?*: Wird Ihr Code für das Deployment auf einem Produktionsserver minifiziert und in einer einzigen Datei zusammengepackt, kann es zur Kollision von Variablen (auch Globalen) kommen. Eine IIFE schützt Sie hiervor, indem sie den Gültigkeitsbereich der Variablen auf die jeweilige Datei beschränkt. + *Warum?*: Wird Ihr Code für das Deployment auf einem Produktionsserver minifiziert und in einer einzigen Datei zusammengepackt, kann es zur Kollision von Variablen (auch globalen) kommen. Eine IIFE schützt Sie hiervor, indem sie den Gültigkeitsbereich der Variablen auf die jeweilige Datei beschränkt. ```javascript /* zu vermeiden */ @@ -185,16 +185,16 @@ Während diese Anleitung das *Was*, *Warum* und *Wie* erklärt, finde ich es ebe ### Namenskollisionen vermeiden ###### [Style [Y020](#style-y020)] - - Benutzen sie eindeutige Namenskonventionen mit Trennzeichen für Untermodule. + - Benutzen Sie eindeutige Namenskonventionen mit Trennzeichen für Untermodule. - *Warum?*: Eindeutige Namen helfen, Kollisionen bei Modulnamen zu verhindern. Trennzeichen helfen, bei der Definition von Modulen und deren Untermodul-Hierarchie. Zum Beispiel kann `app` Ihr Root-Modul sein, während `app.dashboard` und `app.users` Module sein können, die von `app` als Abhängigkeiten genutzt werden. + *Warum?*: Eindeutige Namen helfen Kollisionen bei Modulnamen zu verhindern. Trennzeichen helfen bei der Definition von Modulen und deren Untermodul-Hierarchie. Zum Beispiel kann `app` Ihr Root-Modul sein, während `app.dashboard` und `app.users` Module sein können, die von `app` als Abhängigkeiten genutzt werden. ### Definitionen (auch: Setter) ###### [Style [Y021](#style-y021)] - Deklarieren Sie Module ohne eine Variable, indem Sie die Setter-Syntax verwenden. - *Warum?*: Bei einer Komponente pro Datei besteht kaum die Notwendigkeit, eine Variable für das Modul einzuführen. + *Warum?*: Bei einer Komponente pro Datei besteht kaum die Notwendigkeit eine Variable für das Modul einzuführen. ```javascript /* zu vermeiden */ @@ -224,7 +224,7 @@ Während diese Anleitung das *Was*, *Warum* und *Wie* erklärt, finde ich es ebe - Wenn Sie ein Modul nutzen, vermeiden Sie die Nutzung einer Variablen. Nutzen Sie stattdessen eine Verkettung mit der Getter-Syntax. - *Warum?*: Dies führt zu mehr lesbarem Code und verhindert Variablenkollistionen oder Leaks. + *Warum?*: Dies führt zu mehr lesbarem Code und verhindert Variablenkollisionen oder Leaks. ```javascript /* zu vermeiden */ @@ -248,7 +248,7 @@ Während diese Anleitung das *Was*, *Warum* und *Wie* erklärt, finde ich es ebe - Nur einmal setzen und für alle anderen Instanzen lesen (get). - *Warum?*: Ein Modul sollte nur einmal erstellt werden, ab diesem Punkt an nur noch gelesen werden. + *Warum?*: Ein Modul sollte nur einmal erstellt werden und ab diesem Punkt an nur noch gelesen werden. - Benutzen Sie `angular.module('app', []);` um das Modul zu erzeugen (set). - Benutzen Sie `angular.module('app');` um das Modul zu erhalten (get). @@ -258,7 +258,7 @@ Während diese Anleitung das *Was*, *Warum* und *Wie* erklärt, finde ich es ebe - Benutzen Sie für Callbacks benannte Funktionen, anstatt eine anonyme Funktion zu übergeben. - *Warum?*: Dies führt zu lesbarerem Code, ist einfach zu debuggen und veringert die Schachtelung des Callback-Codes. + *Warum?*: Dies führt zu lesbarerem Code, ist einfach zu debuggen und verringert die Schachtelung des Callback-Codes. ```javascript /* zu vermeiden */ @@ -297,11 +297,11 @@ Während diese Anleitung das *Was*, *Warum* und *Wie* erklärt, finde ich es ebe - Ziehen Sie die [`controllerAs`](http://www.johnpapa.net/do-you-like-your-angular-controllers-with-or-without-sugar/)-Syntax der `klassischen Controller-Mit-$scope`-Syntax vor. - *Warum?*: Controller werden immer wieder neu erstellt. Man erhält jedes Mal eine neue Instanz und die `controllerAs`-Syntax ist näher an der eines JavaScript-Konstruktors, als die`klassische Controller-Mit-$scope-Syntax`. + *Warum?*: Controller werden immer wieder neu erstellt. Man erhält jedes Mal eine neue Instanz und die `controllerAs`-Syntax ist näher an der eines JavaScript-Konstruktors, als die `klassische Controller-Mit-$scope-Syntax`. - *Warum?*: Es begünstigt die Bindung von "Punkt-Notierten" Objekten in der View (z. B. `customer.name` statt `name`), was kontextbezogener und einfacher zu lesen ist und Referenzproblemen, die ohne diese "Punkt-Notation" auftreten können, vorbeugt. + *Warum?*: Es begünstigt die Bindung von "Punkt-Notierten" Objekten im View (z. B. `customer.name` statt `name`), was kontextbezogener und einfacher zu lesen ist und Referenzproblemen, die ohne diese "Punkt-Notation" auftreten können, vorbeugt. - *Warum?*: Hilft, die Nutzung von `$parent`-Aufrufen in Views und geschachtelten Controllern zu vermeiden. + *Warum?*: Hilft die Nutzung von `$parent`-Aufrufen in Views und geschachtelten Controllern zu vermeiden. ```html @@ -324,7 +324,7 @@ Während diese Anleitung das *Was*, *Warum* und *Wie* erklärt, finde ich es ebe - Die `controllerAs`-Syntax nutzt `this` innerhalb des Controllers, welches an `$scope` gebunden wird. - *Warum?*: `controllerAs` stellt eine syntaktische "Versüßung" `$scope` dar. Sie können immer noch Bindungen an die View vornehmen und auf die `$scope`-Methoden zugreifen. + *Warum?*: `controllerAs` stellt eine syntaktische "Versüßung" `$scope` dar. Sie können immer noch Bindungen an dem View vornehmen und auf die `$scope`-Methoden zugreifen. *Warum?*: Hilft, die verführerische Nutzung von `$scope`-Methoden innerhalb eines Controllers zu unterbinden, wenn es besser wäre, sie zu vermeiden oder in eine Factory auszulagern. Man sollte die Nutzung von `$scope` in einer Factory oder einem Controller nur dann in Erwägung ziehen, wenn es notwendig ist. Wenn zum Beispiel Events mit [`$emit`](https://docs.angularjs.org/api/ng/type/$rootScope.Scope#$emit), [`$broadcast`](https://docs.angularjs.org/api/ng/type/$rootScope.Scope#$broadcast) oder [`$on`](https://docs.angularjs.org/api/ng/type/$rootScope.Scope#$on) abonniert oder publiziert werden, sollte man überlegen, diese nicht in eine Factory auszulagern und vom Controller aus auszulösen. @@ -347,7 +347,7 @@ Während diese Anleitung das *Was*, *Warum* und *Wie* erklärt, finde ich es ebe ### controllerAs mit vm ###### [Style [Y032](#style-y032)] - - Benutzen Sie eine Variable, um `this` zu übernehmen, wenn sie die `controllerAs`-Syntax verwenden. Wählen Sie einen konsistenten Variablennanen, wie `vm`, welcher für ViewModel steht. + - Benutzen Sie eine Variable, um `this` zu übernehmen, wenn Sie die `controllerAs`-Syntax verwenden. Wählen Sie einen konsistenten Variablennamen, wie `vm`, welcher für ViewModel steht. *Warum?*: Das `this`-Schlüsselwort ist kontextbezogen und kann diesen Kontext ändern, wenn es innerhalb einer Funktion eines Controllers verwendet wird. Wird der Kontext von `this` übernommen, wird dieses Problem verhindert. @@ -368,14 +368,14 @@ Während diese Anleitung das *Was*, *Warum* und *Wie* erklärt, finde ich es ebe } ``` - Anmerkung: Sie können jegliche [jshint](http://www.jshint.com/)-Warnungen unterbinden, indem sie den Kommentar vor der Codezeile einfügen. Allerdingst ist dies nicht notwendig, wenn die Funktion großgeschrieben ist (UpperCasing). Diese Konvention besagt, dass es sich um eine Kontruktor-Funktion handelt, was einem Controller in Angular entspricht. + Anmerkung: Sie können jegliche [jshint](http://www.jshint.com/)-Warnungen unterbinden, indem Sie den Kommentar vor der Codezeile einfügen. Allerdingst ist dies nicht notwendig, wenn die Funktion großgeschrieben ist (UpperCasing). Diese Konvention besagt, dass es sich um eine Konstruktor-Funktion handelt, was einem Controller in Angular entspricht. ```javascript /* jshint validthis: true */ var vm = this; ``` - Anmerkung: Wenn Sie Watches in einem Controller einsetzen, der über `controller as` genutzt wrid, können Sie die `vm.*`-Member über die folgende Syntax überwachen. (Erstellen Sie Watches mit Vorsicht, denn sie belasten den "digest cycle".) + Anmerkung: Wenn Sie Watches in einem Controller einsetzen, der über `controller as` genutzt wird, können Sie die `vm.*`-Member über die folgende Syntax überwachen. (Erstellen Sie Watches mit Vorsicht, denn sie belasten den "digest cycle".) ```html @@ -396,11 +396,11 @@ Während diese Anleitung das *Was*, *Warum* und *Wie* erklärt, finde ich es ebe ### Zu bindende Bestandteile nach oben ###### [Style [Y033](#style-y033)] - - Platzieren sie zu bindende Elemente alphabeisch sortiert am Anfang des Controllers und nicht verteilt im Code des Controllers. + - Platzieren Sie zu bindende Elemente alphabetisch sortiert am Anfang des Controllers und nicht verteilt im Code des Controllers. - *Warum?*: Die Platzierung von zu bindenden Elementen am Anfang verbessert die Lesbarkeit und hilft Ihnen, die zur Bindung und Nutzung in einer View vorgesehenen Elemente des Controllers schnell zu identifizieren. + *Warum?*: Die Platzierung von zu bindenden Elementen am Anfang verbessert die Lesbarkeit und hilft Ihnen, die zur Bindung und Nutzung in einem View vorgesehenen Elemente des Controllers schnell zu identifizieren. - *Warum?*: Anonyme Funktionen einzusetzen kann einfach sein, aber wenn diese Funktionen die Länge von einer Zeile überschreiten, wird die Lesbarkeit des Codes verschlechtert. Die Definition der Funktionen unterhalb der Deklaration der zur Bindung vorgesehenen Elemente verschiebt die Details der Implementierung nach unten, hält die zu Bindenden Elemente ganz oben und macht es lesbarer (die Funktionen werden quasi "hochgezogen"). + *Warum?*: Anonyme Funktionen einzusetzen kann einfach sein, aber wenn diese Funktionen die Länge von einer Zeile überschreiten, wird die Lesbarkeit des Codes verschlechtert. Die Definition der Funktionen unterhalb der Deklaration der zur Bindung vorgesehenen Elemente verschiebt die Details der Implementierung nach unten, hält die zu bindenden Elemente ganz oben und macht es lesbarer (die Funktionen werden quasi "hochgezogen"). ```javascript /* zu vermeiden */ @@ -448,7 +448,7 @@ Während diese Anleitung das *Was*, *Warum* und *Wie* erklärt, finde ich es ebe ![Controller Using "Above the Fold"](https://raw.githubusercontent.com/johnpapa/angular-styleguide/master/assets/above-the-fold-1.png) - Anmerkung: Falls eine Funktion aus nur einer Zeile bestehen sollte, können Sie sich überlegen, diese nach oben zu verlagen, so lange die Lesbarkeit nicht betroffen ist. + Anmerkung: Falls eine Funktion aus nur einer Zeile bestehen sollte, können Sie sich überlegen, diese nach oben zu verlagern, so lange die Lesbarkeit nicht betroffen ist. ```javascript /* zu vermeiden */ @@ -485,13 +485,13 @@ Während diese Anleitung das *Was*, *Warum* und *Wie* erklärt, finde ich es ebe ### Funktionsdeklarationen, um Details der Implementierung zu verbergen ###### [Style [Y034](#style-y034)] - - Nutzen Sie Funktionsdeklarationen, um Implementierungsdetails zu verbergen. Halten Sie Ihre zur Bindung vorgesehenen Elemente oben. Wenn sie eine Controller-Funktion zur Bindung vorsehen müssen, dann lassen Sie diese auf die Funktionsdeklaration zeigen, die weiter unten erscheint. Diese wird direkt an den Abschnitt mit den zur Bindung vorgesehenen Element geknüpft. Mehr erfahren sie hier in [diesem Beitrag](http://www.johnpapa.net/angular-function-declarations-function-expressions-and-readable-code). + - Nutzen Sie Funktionsdeklarationen, um Implementierungsdetails zu verbergen. Halten Sie Ihre zur Bindung vorgesehenen Elemente oben. Wenn Sie eine Controller-Funktion zur Bindung vorsehen müssen, dann lassen Sie diese auf die Funktionsdeklaration zeigen, die weiter unten erscheint. Diese wird direkt an den Abschnitt mit den zur Bindung vorgesehenen Element geknüpft. Mehr erfahren Sie hier in [diesem Beitrag](http://www.johnpapa.net/angular-function-declarations-function-expressions-and-readable-code). - *Warum?*: Die zur Bindung vorgesehenen Elemente am Anfang zu platzieren, erhöht die Lesbarkeit und hilft Ihnen die Elemente zu identifizieren, die gebunden und in einer View genutzt werden können. (Das Gleiche, wie zuvor.) + *Warum?*: Die zur Bindung vorgesehenen Elemente am Anfang zu platzieren, erhöht die Lesbarkeit und hilft Ihnen die Elemente zu identifizieren, die gebunden und in einem View genutzt werden können. (Das Gleiche, wie zuvor.) - *Warum?*: Das Platzieren der Implementierungsdetails einer Funktion weiter unten in der Datei, hält diese Codemenge außer Sicht und Sie sehen die wichtigen Dinge am Anfang. + *Warum?*: Das Platzieren der Implementierungsdetails einer Funktion weiter unten in der Datei hält diese Codemenge außer Sicht und Sie sehen die wichtigen Dinge am Anfang. - *Warum?*: Funktionsdeklarationen werden "nach oben gezogen" (sog. Hoisting), so dass es keine Probleme damit gibt, ob eine Funktion vor ihrer Benutzung deklariert werden sollte (wie es bei Funktiosausdrücken der Fall wäre). + *Warum?*: Funktionsdeklarationen werden "nach oben gezogen" (sog. Hoisting), so dass es keine Probleme damit gibt, ob eine Funktion vor ihrer Benutzung deklariert werden sollte (wie es bei Funktionsausdrücken der Fall wäre). *Warum?*: Sie müssen sich niemals Sorgen darum machen, wenn Sie in Funktionsdeklarationen `var a` vor `var b` platzieren, weil `a` von `b` abhängig ist. @@ -499,7 +499,7 @@ Während diese Anleitung das *Was*, *Warum* und *Wie* erklärt, finde ich es ebe ```javascript /** - * avoid + * zu vermeiden * Nutzung von Funktionsausdrücken. */ function Avengers(dataservice, logger) { @@ -557,7 +557,7 @@ Während diese Anleitung das *Was*, *Warum* und *Wie* erklärt, finde ich es ebe } ``` -### Verlagern Sie Controller-Logik in Services +### Verlagern Sie Controller-Logik in Services ###### [Style [Y035](#style-y035)] - Verlagern Sie die Logik eines Controllers, indem Sie diese in Services oder Factories übertragen. @@ -620,7 +620,7 @@ Während diese Anleitung das *Was*, *Warum* und *Wie* erklärt, finde ich es ebe ### Halten Sie die Controller auf ihre Aufgabe ausgerichtet ###### [Style [Y037](#style-y037)] - - Definieren Sie einen Controller für eine View und versuchen Sie nicht, diesen Controller für weitere Views zu verwenden. Verlagern Sie stattdessen wiederzuverwendende Logik in Factories und halten Sie den Controller einfach und ausgerichtet auf seine View. + - Definieren Sie einen Controller für einen View und versuchen Sie nicht, diesen Controller für weitere Views zu verwenden. Verlagern Sie stattdessen wiederzuverwendende Logik in Factories und halten Sie den Controller einfach und ausgerichtet auf seinen View. *Warum?*: Controller in mehreren Views wiederzuverwenden ist kritisch und bedingt eine gute End-Zu-End (e2e) Testabdeckung, um die Stabilität in großen Anwendungen zu garantieren. @@ -628,14 +628,14 @@ Während diese Anleitung das *Was*, *Warum* und *Wie* erklärt, finde ich es ebe ### Controller zuweisen ###### [Style [Y038](#style-y038)] - - Wenn ein Controller mit einer View verbunden werden muss und eine der beiden Komponenten aber von anderen Controllern oder Views wiederverwendet werden muss, dann sollten die Controller bei ihren Routen definiert werden. + - Wenn ein Controller mit einem View verbunden werden muss und eine der beiden Komponenten aber von anderen Controllern oder Views wiederverwendet werden muss, dann sollten die Controller bei ihren Routen definiert werden. Anmerkung: Sollte eine View in einem anderen Kontext als einer Route geladen werden, dann benutzen Sie die `ng-controller="Avengers as vm"`-Syntax. - *Warum?*: Wird der Controller inerhalb einer Route verbunden, dann ist es möglich, dass unterschiedliche Routen auch unterschiedliche Controller-View-Bindungen verwenden können. Sind Controller in einer View mit [`ng-controller`](https://docs.angularjs.org/api/ng/directive/ngController) angebunden, dann ist diese View immer mit dem gleichen Controller verbunden. + *Warum?*: Wird der Controller innerhalb einer Route verbunden, dann ist es möglich, dass unterschiedliche Routen auch unterschiedliche Controller-View-Bindungen verwenden können. Sind Controller in einer View mit [`ng-controller`](https://docs.angularjs.org/api/ng/directive/ngController) angebunden, dann ist diese View immer mit dem gleichen Controller verbunden. ```javascript - /* zu vermeiden - bei Nutzung mit eiuner Route, wenn eine dynamische Verbindung gewünscht ist */ + /* zu vermeiden - bei Nutzung mit einer Route, wenn eine dynamische Verbindung gewünscht ist */ // route-config.js angular @@ -687,7 +687,7 @@ Während diese Anleitung das *Was*, *Warum* und *Wie* erklärt, finde ich es ebe ### Singletons ###### [Style [Y040](#style-y040)] - - Services werden mit dem `new`-Schlüsselwort Instantiiert, und benutzen `this` für öffentliche Methoden und Variablen. Auch wenn sie den Factories so ähnlich sind, setzen Sie stattdessen aus Konsistenzgründen eine Factory ein. + - Services werden mit dem `new`-Schlüsselwort instanziiert, und benutzen `this` für öffentliche Methoden und Variablen. Auch wenn sie den Factories so ähnlich sind, setzen Sie stattdessen aus Konsistenzgründen eine Factory ein. Anmerkung: [Alle Angular-Services sind Singletons](https://docs.angularjs.org/guide/services). Das bedeutet, dass es nur eine Instanz eines Services pro Injector gibt. @@ -738,11 +738,11 @@ Während diese Anleitung das *Was*, *Warum* und *Wie* erklärt, finde ich es ebe ### Zugreifbare Bestandteile an den Anfang ###### [Style [Y052](#style-y052)] - - Halten sie die zugreifbaren Bestandteile eines Service (sein Interface) oben, indem Sie eine Technik anwenden, die aus [Revealing Module Pattern](http://addyosmani.com/resources/essentialjsdesignpatterns/book/#revealingmodulepatternjavascript) entlehnt ist. + - Halten Sie die zugreifbaren Bestandteile eines Service (sein Interface) oben, indem Sie eine Technik anwenden, die aus [Revealing Module Pattern](http://addyosmani.com/resources/essentialjsdesignpatterns/book/#revealingmodulepatternjavascript) entlehnt ist. *Warum?*: Die zugreifbaren Bestandteile oben zu platzieren, erhöht die Lesbarkeit und hilft Ihnen, schnell zu identifizieren, welche Elemente des Service aufgerufen werden können und getestet (oder simuliert) werden müssen. - *Warum?*: Dies ist besondert hilfreich, wenn die Datei länger wird, weil ein Scrollen unnötig wird, um zu sehen, was verfügbar ist. + *Warum?*: Dies ist besonders hilfreich, wenn die Datei länger wird, weil ein Scrollen unnötig wird, um zu sehen, was verfügbar ist. *Warum?*: Einfach nur Funktionen einzusetzen kann leicht sein. Wenn diese aber den Umfang einer Zeile überschreiben, kann dies die Lesbarkeit verringern und es muss mehr gescrollt werden. Ein aufrufbares Interface im zurückgelieferten Service zu definieren, verlagert die Implementierungsdetails nach unten, hält das aufrufbare Interface ganz oben und macht es lesbarer. @@ -795,13 +795,13 @@ Während diese Anleitung das *Was*, *Warum* und *Wie* erklärt, finde ich es ebe ### Funktionsdeklarationen, um die Details der Implementierung zu verbergen ###### [Style [Y053](#style-y053)] - - Benutzen Sie Funktionsdeklarationen, um die Details der Implementierung zu verbergen. Halten Sie Ihre zugreifbaren Bestandteile der Factory ganz oben. Lassen Sie diese auf Funktionsdeklarationen verweisen, die weiter unten in der Datei aufeführt werden. Mehr erfahren sie hier in [diesem Beitrag](http://www.johnpapa.net/angular-function-declarations-function-expressions-and-readable-code). + - Benutzen Sie Funktionsdeklarationen, um die Details der Implementierung zu verbergen. Halten Sie Ihre zugreifbaren Bestandteile der Factory ganz oben. Lassen Sie diese auf Funktionsdeklarationen verweisen, die weiter unten in der Datei aufgeführt werden. Mehr erfahren Sie hier in [diesem Beitrag](http://www.johnpapa.net/angular-function-declarations-function-expressions-and-readable-code). *Warum?*: Zugreifbare Elemente am Anfang zu platzieren, erhöht die Lesbarkeit und hilft Ihnen, zu identifizieren, auf welche Funktionen der Factory von außen zugegriffen werden kann. *Warum?*: Das Platzieren der Implementierungsdetails einer Funktion weiter unten in der Datei, hält diese Codemenge außer Sicht und Sie sehen die wichtigen Dinge am Anfang. - *Warum?*: Funktionsdeklarationen werden "nach oben gezogen" (sog. Hoisting), so dass es keine Probleme damit gibt, ob eine Funktion vor ihrer Benutzung deklariert werden sollte (wie es bei Funktiosausdrücken der Fall wäre). + *Warum?*: Funktionsdeklarationen werden "nach oben gezogen" (sog. Hoisting), so dass es keine Probleme damit gibt, ob eine Funktion vor ihrer Benutzung deklariert werden sollte (wie es bei Funktionsausdrücken der Fall wäre). *Warum?*: Sie müssen sich niemals Sorgen darum machen, wenn Sie in Funktionsdeklarationen `var a` vor `var b` platzieren, weil `a` von `b` abhängig ist. @@ -896,13 +896,13 @@ Während diese Anleitung das *Was*, *Warum* und *Wie* erklärt, finde ich es ebe ### Separate Datenzugriffe ###### [Style [Y060](#style-y060)] - - Verlagern sie die Datenzugriffslogik und die Operationen mit Daten in eine Factory Machen Sie die Datenservices verantwortlich für die XHR-Aufrufe, die lokale Speicherung, die Ablage im Speicher oder jede andere Datenoperation. + - Verlagern Sie die Datenzugriffslogik und die Operationen mit Daten in eine Factory Machen Sie die Datenservices verantwortlich für die XHR-Aufrufe, die lokale Speicherung, die Ablage im Speicher oder jede andere Datenoperation. - *Warum?*: Die Verantwortung des Controllers liegt in der Zusammenstellung und Präsentation der Informationen für die und in der View. Er sollte sich nicht darum kümmern müssen, wie er die Daten bekommt, sondern wen er dazu ansprechen muss. Die Datenservices zu trennen verlagert die Logik der Datenermittlung in den Datenservice und belässt den Controller in seiner Einfachheit und seinem Fokus auf die View. + *Warum?*: Die Verantwortung des Controllers liegt in der Zusammenstellung und Präsentation der Informationen für die und in der View. Er sollte sich nicht darum kümmern müssen, wie er die Daten bekommt, sondern wen er dazu ansprechen muss. Die Datenservices zu trennen verlagert die Logik der Datenermittlung in den Datenservice und belässt den Controller in seiner Einfachheit und seinem Fokus auf den View. *Warum?*: Das macht das Testen der Datenabrufe (simuliert oder real) einfacher, wenn man einen Controller testet, der einen Datenservice nutzt. - *Warum?*: Datenserivce-Implementierungen enthalten spezifischen Code, um die Daten zu handhaben. Dies können bestimmte Header sein, die beschreiben, wie mit den Datenquellen oder anderen Services wie `$http` kommuniziert werden muss. Die Separierung dieser Logik in einem Datenservice kapselt sie an einem einzigen Platz und verbirgt die Implementierung vor den Konsumenten dieses Service (z. B. einem Controller). Das macht es auch einfacher, die Implementierung auszutauschen. + *Warum?*: Datenservice-Implementierungen enthalten spezifischen Code, um die Daten zu handhaben. Dies können bestimmte Header sein, die beschreiben, wie mit den Datenquellen oder anderen Services wie `$http` kommuniziert werden muss. Die Separierung dieser Logik in einem Datenservice kapselt sie an einem einzigen Platz und verbirgt die Implementierung vor den Konsumenten dieses Service (z. B. einem Controller). Das macht es auch einfacher, die Implementierung auszutauschen. ```javascript /* empfohlen */ @@ -1108,21 +1108,21 @@ Während diese Anleitung das *Was*, *Warum* und *Wie* erklärt, finde ich es ebe } ``` - Anmerkung: Es gibt viele Bennennungsmöglichkeiten für Direktiven, weil sie in einem schmalen oder weiten Gültigkeitsbereich genutzt werden können. Wählen sie eine, die den Namen der Direktive und ihren Dateinamen eindeutig und klar verständlich macht. Einige Beispiele befinden sich weiter unten, aber schauen Sie sich den Abschnitt zur [Namensgebung](#naming) an, um weitere Empfehlungen zu sehen. + Anmerkung: Es gibt viele Benennungsmöglichkeiten für Direktiven, weil sie in einem schmalen oder weiten Gültigkeitsbereich genutzt werden können. Wählen Sie eine, die den Namen der Direktive und ihren Dateinamen eindeutig und klar verständlich macht. Einige Beispiele befinden sich weiter unten, aber schauen Sie sich den Abschnitt zur [Namensgebung](#naming) an, um weitere Empfehlungen zu sehen. ### DOM-Maniuplation in einer Directive ###### [Style [Y072](#style-y072)] - - Benutzen Sie zur direkten Manipulation des DOM eine Direktive. Wenn es alternative Wege gibt, wie zum Beispiel CSS, um Stile zu setzen oder [Animation Services](https://docs.angularjs.org/api/ngAnimate), Angular Templates, [`ngShow`](https://docs.angularjs.org/api/ng/directive/ngShow) oder [`ngHide`](https://docs.angularjs.org/api/ng/directive/ngHide), dann nutzen sie diese anstatt. Wenn die Direktive zum Beispiel einfach nur etwas versteckt oder zeigt, dann benutzen Sie ngHide/ngShow. + - Benutzen Sie zur direkten Manipulation des DOM eine Direktive. Wenn es alternative Wege gibt, wie zum Beispiel CSS, um Stile zu setzen oder [Animation Services](https://docs.angularjs.org/api/ngAnimate), Angular Templates, [`ngShow`](https://docs.angularjs.org/api/ng/directive/ngShow) oder [`ngHide`](https://docs.angularjs.org/api/ng/directive/ngHide), dann nutzen Sie diese anstatt. Wenn die Direktive zum Beispiel einfach nur etwas versteckt oder zeigt, dann benutzen Sie ngHide/ngShow. *Warum?*: DOM-Manipulationen können schwer zu testen oder zu debuggen sein und es gibt oftmals bessere Wege (z. B. CSS, Animationen oder Templates) -### Vergeben sie einen eindeutigen Prefix für eine Direktive +### Vergeben Sie einen eindeutigen Präfix für eine Direktive ###### [Style [Y073](#style-y073)] - - Vergeben sie einen kurzen, eindeutigen und beschreibenden Prefix für die Direktive, wie `acmeSalesCustomerInfo`. Dieser würde in HTML als `acme-sales-customer-info` genutzt. + - Vergeben Sie einen kurzen, eindeutigen und beschreibenden Präfix für die Direktive, wie `acmeSalesCustomerInfo`. Dieser würde in HTML als `acme-sales-customer-info` genutzt. - *Warum?*: Der eindeutige kurze Prefix gibt den Kontext und den Ursprung der Direktive wieder. Ein Prefix wie `cc-` könnte ausweisen, dass die Direktive Teil einer "CodeCamper"-Anwendung ist, wohingegegen `acme-` auf eine Direktive der Firma Acme hinweisen könnte. + *Warum?*: Der eindeutige kurze Präfix gibt den Kontext und den Ursprung der Direktive wieder. Ein Prefix wie `cc-` könnte ausweisen, dass die Direktive Teil einer "CodeCamper"-Anwendung ist, wohingegegen `acme-` auf eine Direktive der Firma Acme hinweisen könnte. Anmerkung: Vermeiden Sie `ng-`, weil dieser Präfix für Angular-Direktiven reserviert ist. Recherchieren Sie viel genutzte Direktiven, um einem Namenskonflikt wie zum Beispiel mit `ion-` für das [Ionic Framework](http://ionicframework.com/) vorzubeugen. @@ -1320,13 +1320,13 @@ Während diese Anleitung das *Was*, *Warum* und *Wie* erklärt, finde ich es ebe ### Promises beim Aktivieren eines Controllers ###### [Style [Y080](#style-y080)] - - Verlagern sie die Start-Logik eines Controllers in eine `activate`-Funktion. + - Verlagern Sie die Start-Logik eines Controllers in eine `activate`-Funktion. *Warum?*: Ist die Start-Logik an einem einheitlichen Platz innerhalb des Controllers, wird ihr Auffinden vereinfacht, sie ist besser zu testen und diese Methode hilft dabei, zu verhindern, dass die Startlogik überall im Controller verteilt ist. - *Warum?*: Das `activate` ist eine komfortable Art und Weise, diese Logik für einen Refresh des Controllers / der View zu nutzen. Es hält die Logik zusammen, liefert die View schneller an den Benutzer, erleichtert Animationen mit `ng-view` oder `ui-view`, und macht auch einen flotteren Eindruck beim Benutzer. + *Warum?*: Das `activate` ist eine komfortable Art und Weise, diese Logik für einen Refresh des Controllers / der View zu nutzen. Es hält die Logik zusammen, liefert den View schneller an den Benutzer, erleichtert Animationen mit `ng-view` oder `ui-view`, und macht auch einen flotteren Eindruck beim Benutzer. - Anmerkung: Wenn Sie die Routennavigation bedingt abbrechen müssen, bevor der Controller gestartet wird, dann sollten sie stattdessen ein [route resolve](#style-y081) nutzen. + Anmerkung: Wenn Sie die Routennavigation bedingt abbrechen müssen, bevor der Controller gestartet wird, dann sollten Sie stattdessen ein [route resolve](#style-y081) nutzen. ```javascript /* zu vermeiden */ @@ -1367,13 +1367,13 @@ Während diese Anleitung das *Was*, *Warum* und *Wie* erklärt, finde ich es ebe - Ist ein Controller abhängig von der Auflösung eines Promise, der vor der Aktivierung des Controllers aufgelöst sein muss, dann muss diese Abhängigkeit im `$routeProvider` aufgelöst werden, und zwar bevor die Controller-Logik ausgeführt wird. Wenn Sie eine Routen-Navigation bedingt abbrechen müssen, bevor der Controller aktiviert ist, nutzen Sie einen Route-Resolver. - - Nutzen Sie ein "route resolve" wenn Sie bestimmen wollen, ob eine Routennavigation abgebrochen werden soll, bevor die View eingeblendet wird. + - Nutzen Sie ein "route resolve" wenn Sie bestimmen wollen, ob eine Routennavigation abgebrochen werden soll, bevor der View eingeblendet wird. - *Warum?*: Es kann sein, dass ein Controller Daten benötigt, noch bevor er geladen wird. Diese Daten können von einem Promise aus einer Factory oder über [$http](https://docs.angularjs.org/api/ng/service/$http) kommen. Ein ["route resolve"](https://docs.angularjs.org/api/ngRoute/provider/$routeProvider) zu benutzen, ermöglicht, dass der Promise aufgelöst wird, bevor die Controller-Logik ausgeüfhrt wird. Also kann es notwendig werden, eine Aktion aufgrund der Daten aus dem Promis auszuführen. + *Warum?*: Es kann sein, dass ein Controller Daten benötigt, noch bevor er geladen wird. Diese Daten können von einem Promise aus einer Factory oder über [$http](https://docs.angularjs.org/api/ng/service/$http) kommen. Ein ["route resolve"](https://docs.angularjs.org/api/ngRoute/provider/$routeProvider) zu benutzen, ermöglicht, dass der Promise aufgelöst wird, bevor die Controller-Logik ausgeführt wird. Also kann es notwendig werden, eine Aktion aufgrund der Daten aus dem Promis auszuführen. *Warum?*: Der Code wird nach den Routennavigation innerhalb der activate-Funktion des Controllers ausgeführt. Der View wird ebenso geladen. Die Datenbindung steht, wenn der aktive Promise aufgelöst ist. Eine "Busy-Animation" kann während der Einblendung des views (via `ng-view` oder `ui-view`) angezeigt werden. - Anmerkung: Der Code wird vor der Routennavigation über einen Promise ausgeführt. Wird der Promise zurückgewiesen, wird die Navigation abgebrochen. Resolve bewirkt, dass die neue View auf die Auflösung der Route wartet. Ein "Busy-Indikator" kann vor dem Auflösen und während der Einblendung des Views angezeigt werden. Wenn Sie die View schneller einblenden wollen und keinen Kontrollpunkt benötigen, an dem geprüft wird, ob die View überhaupt zur Verfügung steht, sollten Sie die [Controller `activate` Technik](#style-y080) in Betracht ziehen. + Anmerkung: Der Code wird vor der Routennavigation über einen Promise ausgeführt. Wird der Promise zurückgewiesen, wird die Navigation abgebrochen. Resolve bewirkt, dass die neue View auf die Auflösung der Route wartet. Ein "Busy-Indikator" kann vor dem Auflösen und während der Einblendung des Views angezeigt werden. Wenn Sie den View schneller einblenden wollen und keinen Kontrollpunkt benötigen, an dem geprüft wird, ob der View überhaupt zur Verfügung steht, sollten Sie die [Controller `activate` Technik](#style-y080) in Betracht ziehen. ```javascript /* zu vermeiden */ @@ -1472,7 +1472,7 @@ Während diese Anleitung das *Was*, *Warum* und *Wie* erklärt, finde ich es ebe ### Unsichere Minifizierung ###### [Style [Y090](#style-y090)] - - Vermeiden Sie es, die kurze Deklarationssyntax für Ahängigkeiten ohne einen für die Minifizierung sicheren Ansatz zu verwenden. + - Vermeiden Sie es, die kurze Deklarationssyntax für Abhängigkeiten ohne einen für die Minifizierung sicheren Ansatz zu verwenden. *Warum?*: Die Parameter der Komponente (z. B. Controller, Factory, etc.) werden in abgekürzte Variablen gewandelt. So kann zum Beispiel aus `common` und `dataservice` ein `a` oder `b` werden, was von Angular nicht gefunden wird. @@ -1498,7 +1498,7 @@ Während diese Anleitung das *Was*, *Warum* und *Wie* erklärt, finde ich es ebe - Benutzen Sie `$inject` um Ihre Abhängigkeiten für Angular-Komponenten manuell zu identifizieren. - *Warum?*: Dieses Verfahren spiegelt die Technik wieder, die von [`ng-annotate`](https://github.com/olov/ng-annotate) genutzt wird, welche ich für die Automatisierung der Erstellung von minifikationssicheren Abhängigkeiten empfehleh. Wenn `ng-annotate` erkennt, dass eine solche Deklaration vorgenommen wurde, wird diese nicht dupliziert. + *Warum?*: Dieses Verfahren spiegelt die Technik wieder, die von [`ng-annotate`](https://github.com/olov/ng-annotate) genutzt wird, welche ich für die Automatisierung der Erstellung von minifikationssicheren Abhängigkeiten empfehlen. Wenn `ng-annotate` erkennt, dass eine solche Deklaration vorgenommen wurde, wird diese nicht dupliziert. *Warum?*: Dies bewahrt Ihre Abhängigkeiten vor Problemen bei einer Minifizierung, bei der die Parameter abgekürzt werden. Zum Beispiel wird aus `common` und `dataservice` ein `a` oder `b`, was von Angular nicht gefunden wird. @@ -1537,7 +1537,7 @@ Während diese Anleitung das *Was*, *Warum* und *Wie* erklärt, finde ich es ebe } ``` - Anmerkung: Wenn sich Ihre Funktion unterhalb eines returns befindet, kann `$inject` unerreichbar werden (das kann in einer Direktive passieren). Sie können dies vermeiden, indem sie den Controller aus der Direktive herauslösen. + Anmerkung: Wenn sich Ihre Funktion unterhalb eines returns befindet, kann `$inject` unerreichbar werden (das kann in einer Direktive passieren). Sie können dies vermeiden, indem Sie den Controller aus der Direktive herauslösen. ```javascript /* zu vermeiden */ @@ -1659,7 +1659,7 @@ Während diese Anleitung das *Was*, *Warum* und *Wie* erklärt, finde ich es ebe Anmerkung: Entdeckt `ng-annotate` bereits vorhandene Kommentare (z. B. bei erkanntem `@ngInject`), werden die `$inject`-Befehle nicht dupliziert. - Anmerkung: Wenn Sie einen Route Resolver nutzen, können sie die Funktion des Resolvers mit `/* @ngInject */` markieren, und es wird eine korrekte Code-Anmerkung erstellt, die alle eingefügten Abhängigkeiten minifizierungssicher hält. + Anmerkung: Wenn Sie einen Route Resolver nutzen, können Sie die Funktion des Resolvers mit `/* @ngInject */` markieren, und es wird eine korrekte Code-Anmerkung erstellt, die alle eingefügten Abhängigkeiten minifizierungssicher hält. ```javascript // Using @ngInject annotations @@ -1678,13 +1678,13 @@ Während diese Anleitung das *Was*, *Warum* und *Wie* erklärt, finde ich es ebe } ``` - > Anmerkung: Ab der 1.3er Version von Angular können Sie den `ngStrictDi` Parameter der [`ngApp`](https://docs.angularjs.org/api/ng/directive/ngApp)-Direktive nutzen, um potentiell minfizierungsunsichere Abhängigkeiten aufzuspühren. Wurde eine solche Abhängigkeit entdeckt, dann wird der Injector im "strict-di"-Modus erstellt und verursacht Fehler beim Ausfüren von Funktionen, die keine explizite Code-Anmerkung besitzen (was nicht minifizerungssicher ist). Debug-Informationen werden in der Konsole ausgegeben, um den betreffenden Code nachvollziehen zu können. Ich bevorzuge die Nutzung von `ng-strict-di` für das Debugging. + > Anmerkung: Ab der 1.3er Version von Angular können Sie den `ngStrictDi` Parameter der [`ngApp`](https://docs.angularjs.org/api/ng/directive/ngApp)-Direktive nutzen, um potentiell minfizierungsunsichere Abhängigkeiten aufzuspüren. Wurde eine solche Abhängigkeit entdeckt, dann wird der Injector im "strict-di"-Modus erstellt und verursacht Fehler beim Ausführen von Funktionen, die keine explizite Code-Anmerkung besitzen (was nicht minifizerungssicher ist). Debug-Informationen werden in der Konsole ausgegeben, um den betreffenden Code nachvollziehen zu können. Ich bevorzuge die Nutzung von `ng-strict-di` für das Debugging. `` ### Gulp oder Grunt für ng-annotate nutzen ###### [Style [Y101](#style-y101)] - - Benutzen Sie [gulp-ng-annotate](https://www.npmjs.org/package/gulp-ng-annotate) oder [grunt-ng-annotate](https://www.npmjs.org/package/grunt-ng-annotate) in einer autmatisierten Build-Task. Fügen sie `/* @ngInject */` vor jeder Funktion ein, die Abhängigkeiten hat. + - Benutzen Sie [gulp-ng-annotate](https://www.npmjs.org/package/gulp-ng-annotate) oder [grunt-ng-annotate](https://www.npmjs.org/package/grunt-ng-annotate) in einer automatisierten Build-Task. Fügen Sie `/* @ngInject */` vor jeder Funktion ein, die Abhängigkeiten hat. *Warum?*: ng-annotate erkennt die meisten Abhängigkeiten automatisch, benötigt manchmal aber Hinweise durch die `/* @ngInject */`-Syntax. @@ -1721,7 +1721,7 @@ Während diese Anleitung das *Was*, *Warum* und *Wie* erklärt, finde ich es ebe - Benutzen Sie einen [Decorator](https://docs.angularjs.org/api/auto/service/$provide#decorator) während der Konfiguration, indem Sie den [`$provide`](https://docs.angularjs.org/api/auto/service/$provide)-Service im [`$exceptionHandler`](https://docs.angularjs.org/api/ng/service/$exceptionHandler)-Service ansprechen, um eigene Aktionen bei einem auftauchenden Fehler (einer Ausnahme) auszuführen. - *Warum?*: Dies bietet einen einen stimmigen Weg, unbehandelte Angular-Fehler während der Entwicklung oder zur Laufzeit abzufangen. + *Warum?*: Dies bietet einen stimmigen Weg, unbehandelte Angular-Fehler während der Entwicklung oder zur Laufzeit abzufangen. Anmerkung: Eine weitere Option neben der Benutzung eines Decorators, stellt das Überschreiben des Service dar. Diese Möglichkeit ist gut, wenn Sie aber das Standardverhalten beibehalten wollen, dann ist die Erweiterung mit einem Decorator angebracht. @@ -1767,7 +1767,7 @@ Während diese Anleitung das *Was*, *Warum* und *Wie* erklärt, finde ich es ebe *Warum?*: Dies bietet eine konsistente Methode, Fehler abzufangen, die in Ihrem Code geworfen werden (z. B. während eines XHR-Aufrufs oder bei Fehlern in einem Promise). - Anmerkung: Eine Komponente, die die Fehler abfängt stellt eine gute Möglichkeit dar, Fehler an den Stellen abzufangen, von denen Sie wissen, dass sie auftreten können. Zum Beispiel, wenn Sie Daten über einen XHR-Aufruf von einem Webservice anfragen und Sie jegliche Art von Fehler, die von diesem Service zurück kommen, speziell behandeln wollen. + Anmerkung: Eine Komponente, die die Fehler abfängt stellt eine gute Möglichkeit dar, Fehler an den Stellen abzufangen, von denen Sie wissen, dass sie auftreten können. Zum Beispiel, wenn Sie Daten über einen XHR-Aufruf von einem Webservice anfragen und Sie jegliche Art von Fehler, die von diesem Service zurückkommen, speziell behandeln wollen. ```javascript /* empfohlen */ @@ -1798,7 +1798,7 @@ Während diese Anleitung das *Was*, *Warum* und *Wie* erklärt, finde ich es ebe *Warum?*: Bietet einen stimmigen Weg, um alle Routingfehler zu behandeln. - *Warum?*: Bietet potentiell die Möglichkeit die Akzeptanz beim Benutzer zu steigern, wenn ein Routingfehler autftritt und dieser auf informative Weise mit Möglichkeiten zur Behebung am Bildschirm angezeigt wird. + *Warum?*: Bietet potentiell die Möglichkeit die Akzeptanz beim Benutzer zu steigern, wenn ein Routingfehler auftritt und dieser auf informative Weise mit Möglichkeiten zur Behebung am Bildschirm angezeigt wird. ```javascript /* empfohlen */ @@ -1844,7 +1844,7 @@ Während diese Anleitung das *Was*, *Warum* und *Wie* erklärt, finde ich es ebe ### Richtlinien der Namensgebung ###### [Style [Y120](#style-y120)] - - Benutzen sie stimmige Namen für alle Komponenten, einem Muster folgend, welches die Hauptfunktionen (Features) einer Komponente und dann (optional) ihren Typ beschreibt. + - Benutzen Sie stimmige Namen für alle Komponenten, einem Muster folgend, welches die Hauptfunktionen (Features) einer Komponente und dann (optional) ihren Typ beschreibt. Meine empfohlenes Muster ist `feature.typ.js`. Es gibt zwei zu vergebene Namen für die meisten Komponenten: * der Dateiname (`avengers.controller.js`) * der Name der bei Angular zu registrierenden Komponente (`AvengersController`) @@ -1858,7 +1858,7 @@ Während diese Anleitung das *Was*, *Warum* und *Wie* erklärt, finde ich es ebe - Benutzen Sie stimmige Namen für alle Komponenten, die einem Muster folgen: Hauptfunktion einer Komponente, und dann (optional) gefolgt vom Typ. Mein empfohlenes Muster ist `feature.typ.js`. - *Warum?*: Bietet einen stimmigen Weg, Komponenten schnell zu identifizeren. + *Warum?*: Bietet einen stimmigen Weg, Komponenten schnell zu identifizieren. *Warum?*: Bietet ein Suchmuster für alle automatisierten Aufgaben. @@ -1925,7 +1925,7 @@ Während diese Anleitung das *Was*, *Warum* und *Wie* erklärt, finde ich es ebe - Benennen Sie Testspezifikationen gemäß der Komponente, die getestet werden soll, gefolgt vom Suffix `spec`. - *Warum?*: Bietet einen stimmigen Weg, Komponenten schnell zu indentifizieren. + *Warum?*: Bietet einen stimmigen Weg, Komponenten schnell zu identifizieren. *Warum?*: Bietet ein Suchmuster für [karma](http://karma-runner.github.io/) oder andere Testrunner. @@ -1942,11 +1942,11 @@ Während diese Anleitung das *Was*, *Warum* und *Wie* erklärt, finde ich es ebe ### Namen für Controller ###### [Style [Y123](#style-y123)] - - Nutzen Sie stimmige Namen für alle Controller und bennenen Sie diese nach ihrem Hauptmerkmal. Benutzen Sie UpperCamelCase für Controller, weil sie Konstruktoren sind. + - Nutzen Sie stimmige Namen für alle Controller und benennen Sie diese nach ihrem Hauptmerkmal. Benutzen Sie UpperCamelCase für Controller, weil sie Konstruktoren sind. - *Warum?*: Bietet einen stimmigen Weg, Controller schnell zu indentifizieren und zu referenzieren. + *Warum?*: Bietet einen stimmigen Weg, Controller schnell zu identifizieren und zu referenzieren. - *Warum?*: UpperCamelCase ist eine Konvention, ein Objekt zu identifizieren, welches über einen Konstruktor instantiiert werden kann. + *Warum?*: UpperCamelCase ist eine Konvention, ein Objekt zu identifizieren, welches über einen Konstruktor instanziiert werden kann. ```javascript /** @@ -1984,9 +1984,9 @@ Während diese Anleitung das *Was*, *Warum* und *Wie* erklärt, finde ich es ebe ### Namen für Factories ###### [Style [Y125](#style-y125)] - - Nutzen Sie stimmige Namen für alle Factories und vergeben sie diese nach deren Hauptfunktion. Benutzen Sie Camel-Casing für Services und Factroies. Vermeiden Sie es, einer Factory oder einem Service ein `$` voranzutellen. + - Nutzen Sie stimmige Namen für alle Factories und vergeben Sie diese nach deren Hauptfunktion. Benutzen Sie Camel-Casing für Services und Factories. Vermeiden Sie es, einer Factory oder einem Service ein `$` voranzustellen. - *Warum?*: Bietet einen stimmigen Weg, Factories schnell zu identifizeren und zu referenzieren. + *Warum?*: Bietet einen stimmigen Weg, Factories schnell zu identifizieren und zu referenzieren. *Warum?*: Verhindert Namenskollisionen mit eingebauten Factories und Serivces, die `$` als Präfix nutzen. @@ -2008,7 +2008,7 @@ Während diese Anleitung das *Was*, *Warum* und *Wie* erklärt, finde ich es ebe - Benutzen Sie stimmige Namen für alle Direktiven gemäß der Camel-Case-Regel. Nutzen Sie einen kurzen Präfix, um den Bereich zu beschreiben, zu dem die Direktive gehört (Firmen- oder Projekt-Präfix). - *Warum?*: Bietet einen stimmigen Weg, Direktiven schnell zu identifizeren und zu referenzieren. + *Warum?*: Bietet einen stimmigen Weg, Direktiven schnell zu identifizieren und zu referenzieren. ```javascript /** @@ -2037,11 +2037,11 @@ Während diese Anleitung das *Was*, *Warum* und *Wie* erklärt, finde ich es ebe ### Konfiguration ###### [Style [Y128](#style-y128)] - - Trennen Sie die Konfiguration vom Modul und lagern sie diese in eine eigene Datei aus, die nach dem Modul benannt wird. Eine Konfigurationsdatei für das Hauptmodul `app` wird `app.config.js` genannt (oder einfach `config.js`). Eine Konfigurationsdatei für ein Modul namens `admin.module.js` wird `admin.config.js` genannt. + - Trennen Sie die Konfiguration vom Modul und lagern Sie diese in eine eigene Datei aus, die nach dem Modul benannt wird. Eine Konfigurationsdatei für das Hauptmodul `app` wird `app.config.js` genannt (oder einfach `config.js`). Eine Konfigurationsdatei für ein Modul namens `admin.module.js` wird `admin.config.js` genannt. *Warum?*: Trennt Konfiguration von der Moduldefinition, den Komponenten und dem "aktiven" Code. - *Warum?*: Bietet einen leicht zu identifizierenden Platz, um die Kofiguration eines Moduls vorzunehmen. + *Warum?*: Bietet einen leicht zu identifizierenden Platz, um die Konfiguration eines Moduls vorzunehmen. ### Routen ###### [Style [Y129](#style-y129)] @@ -2054,9 +2054,9 @@ Während diese Anleitung das *Was*, *Warum* und *Wie* erklärt, finde ich es ebe ### LIFT ###### [Style [Y140](#style-y140)] - - LIFT steht für `L`ocate (auffinden), `I`dentify (identifizieren), `F`lat (flach), T`ry to stay DRY` (versuchen Sie, Ihren Code nicht zu wiederholen). Das bedeutet also, sie sollten Ihre Anwendung so strukturieren, dass sie Ihren Code schnell auffinden und auf einen Blick identifizieren können, für was der Code gut ist. Dabei sollten Sie die Struktur so flach wie möglich halten. Vermeiden Sie es unbedingt, Ihren Code zu wiederholen. + - LIFT steht für `L`ocate (auffinden), `I`dentify (identifizieren), `F`lat (flach), T`ry to stay DRY` (versuchen Sie, Ihren Code nicht zu wiederholen). Das bedeutet also, Sie sollten Ihre Anwendung so strukturieren, dass Sie Ihren Code schnell auffinden und auf einen Blick identifizieren können, für was der Code gut ist. Dabei sollten Sie die Struktur so flach wie möglich halten. Vermeiden Sie es unbedingt, Ihren Code zu wiederholen. - *Warum LIFT?*: Bietet eine konsistente und gut skalierbare Stuktur, ist modular und macht es einfacher die Effizienz eines Entwicklers zu steigern, weil er seinen Code schneller finden kann. Prüfen Sie Ihre Andwendungsstruktur, indem Sie sich fragen: Wie schnell kann ich all die Dateien, die zu einem Feature gehören öffnen und mit ihnen arbeiten?" + *Warum LIFT?*: Bietet eine konsistente und gut skalierbare Struktur, ist modular und macht es einfacher die Effizienz eines Entwicklers zu steigern, weil er seinen Code schneller finden kann. Prüfen Sie Ihre Anwendungsstruktur, indem Sie sich fragen: Wie schnell kann ich all die Dateien, die zu einem Feature gehören öffnen und mit ihnen arbeiten?" Falls ich mich mit meiner nicht mehr wohl fühle, dann schaue ich mir die LIFT-Anweisungen an: @@ -2093,7 +2093,7 @@ Während diese Anleitung das *Was*, *Warum* und *Wie* erklärt, finde ich es ebe ### Identify (Code identifizieren) ###### [Style [Y142](#style-y142)] - - Wenn Sie einen Dateinamen sehen, sollten sie sofort wissen, was die Datei beinhaltet und für was sie steht. + - Wenn Sie einen Dateinamen sehen, sollten Sie sofort wissen, was die Datei beinhaltet und für was sie steht. *Warum?*: Sie brauchen weniger Zeit, um nach Ihrem Code zu suchen und werden so effizienter. Wenn das bedeutet, dass Sie längere Dateinamen brauchen, dann sei es so. Seien Sie beschreibend bei der Namensvergabe und sorgen Sie dafür, dass eine Datei nur eine Komponente enthält. Vermeiden Sie Dateien mir mehreren Controllern, Services oder gar mit beidem. Ich weiche von dieser Regel ab, wenn ich sehr kleine Features habe, die alle miteinander verbunden und leicht identifizierbar sind. @@ -2102,14 +2102,14 @@ Während diese Anleitung das *Was*, *Warum* und *Wie* erklärt, finde ich es ebe - Halten Sie die Verzeichnisstruktur so lange es geht so flach wie möglich. Sollten mehr als sieben Dateien in einem Verzeichnis stehen, denken Sie über eine Neuaufteilung nach. - *Warum?*: Niemand will Dateien in einer Verzeichnisstruktur über sieben Ebenen suchen. Denken Sie an Menüs von Webseiten ... Alles, was über mehr als zwei Ebenen geht, sollte ernsthaft überdacht werden. Für eine Verzeichnisstruktur gibt es keine feste Regelung, aber sollte ein Verzeichnis sieben bis zehn Dateien enthalten, dann ist es vielleicht an der Zeit, Unterverzeichnisse einzurichten. Machen Sie es für sich selbst an Ihrem Wohlbefinden mit der Struktur fest. Benutzen sie eine flachere Struktur, bis Sie den Punkt erreichen, an dem es Sinn macht, ein neues Verzeichnis zu erstellen. + *Warum?*: Niemand will Dateien in einer Verzeichnisstruktur über sieben Ebenen suchen. Denken Sie an Menüs von Webseiten ... Alles, was über mehr als zwei Ebenen geht, sollte ernsthaft überdacht werden. Für eine Verzeichnisstruktur gibt es keine feste Regelung, aber sollte ein Verzeichnis sieben bis zehn Dateien enthalten, dann ist es vielleicht an der Zeit, Unterverzeichnisse einzurichten. Machen Sie es für sich selbst an Ihrem Wohlbefinden mit der Struktur fest. Benutzen Sie eine flachere Struktur, bis Sie den Punkt erreichen, an dem es Sinn macht, ein neues Verzeichnis zu erstellen. ### T-DRY (Versuchen Sie Ihren Code nicht zu wiederholen) ###### [Style [Y144](#style-y144)] - Seien Sie "DRY": Versuchen Sie Ihren Code nicht zu wiederholen. Aber übertreiben Sie es nicht, indem Sie die Lesbarkeit Ihres Codes dafür opfern. - *Warum?*: Sich nicht ständig zu wiederholen ist wichtig, aber nicht entscheident, wenn Sie dafür andere Punkte von LIFT opfern. Ich möchte für eine View nicht session-view.html tippen, da es ja offentlichtlich eine View ist. Wenn etwas nicht offensichtlich oder einer Konvention unterliegt, dann benenne ich es. + *Warum?*: Sich nicht ständig zu wiederholen ist wichtig, aber nicht entscheidend, wenn Sie dafür andere Punkte von LIFT opfern. Ich möchte für eine View nicht session-view.html tippen, da es ja öffentlich eine View ist. Wenn etwas nicht offensichtlich oder einer Konvention unterliegt, dann benenne ich es. **[Zurück zum Anfang](#table-of-contents)** @@ -2118,21 +2118,21 @@ Während diese Anleitung das *Was*, *Warum* und *Wie* erklärt, finde ich es ebe ### Allgemeine Richtlinien ###### [Style [Y150](#style-y150)] - - Sie sollten eine kurzfristige und langfristive Sicht auf Ihre Implemtierung haben. Das bedeutet: Fangen Sie klein an, behalten Sie dabei aber im Auge, wohin Sie mir Ihrer Anwendung wollen. Jeder Code der Anwendung wird in einem Stammverzeichnis namens `app` abgelegt. Für den Inhalt gilt: Ein Feature pro Datei. Jeder Controller, Service, jedes Modul, jede View befindet sich in ihrer/seiner eigenen Datei. Alle externen Scripts (3rd Party Bibliotheken) werden in einem anderen Stammverzeichnis, nicht aber im `app`-Verzeichnis abgelegt. Ich habe sie nicht geschrieben und ich möchte nicht, dass sie meine Anwendung durcheinander bringen.(`bower_components`, `scripts`, `lib`). + - Sie sollten eine kurzfristige und langfristige Sicht auf Ihre Implementierung haben. Das bedeutet: Fangen Sie klein an, behalten Sie dabei aber im Auge, wohin Sie mir Ihrer Anwendung wollen. Jeder Code der Anwendung wird in einem Stammverzeichnis namens `app` abgelegt. Für den Inhalt gilt: Ein Feature pro Datei. Jeder Controller, Service, jedes Modul, jede View befindet sich in ihrer/seiner eigenen Datei. Alle externen Scripts (3rd Party Bibliotheken) werden in einem anderen Stammverzeichnis, nicht aber im `app`-Verzeichnis abgelegt. Ich habe sie nicht geschrieben und ich möchte nicht, dass sie meine Anwendung durcheinander bringen.(`bower_components`, `scripts`, `lib`). Anmerkung: Sie finden mehr Details und Gründe für diese Struktur in [diesem Originalbeitrag zur Anwendungsstruktur](http://www.johnpapa.net/angular-app-structuring-guidelines/). ### Layout ###### [Style [Y151](#style-y151)] - - Platzieren Sie Komponenten, die das allgemeingültige Layout der Anwendung ausmachen, in einem Verzeichnis namens `layout`. Dieses sollte eine Shell-View mit Controller enthalten. Die View agiert als Container für die Anwendung und enthält die Anwendung an sich: Navigation, Menüs, Bereiche für die Inhalte und andere Bereiche. + - Platzieren Sie Komponenten, die das allgemeingültige Layout der Anwendung ausmachen, in einem Verzeichnis namens `layout`. Dieses sollte eine Shell-View mit Controller enthalten. Der View agiert als Container für die Anwendung und enthält die Anwendung an sich: Navigation, Menüs, Bereiche für die Inhalte und andere Bereiche. - *Warum?*: Organzisieren Sie das Layout an einem einzigen Ort, damit es innerhalb der Anwendung von überall her genutzt werden kann. + *Warum?*: Organisieren Sie das Layout an einem einzigen Ort, damit es innerhalb der Anwendung von überall her genutzt werden kann. -### Vezeichnisse nach Hauptmerkmalen +### Verzeichnisse nach Hauptmerkmalen ###### [Style [Y152](#style-y152)] - - Erstellen Sie Verzeichnisse gemäß der Hauptmerkmale, die sie darstellen. Wenn der Inhalt eines Verzeichnisse wächst und mehr als sieben Dateien fasst, sollten Sie darüber nachdenken, ein neues Verzeichnis zu erstellen. Dabei ist der Grenzwert aber individuell. + - Erstellen Sie Verzeichnisse gemäß der Hauptmerkmale, die sie darstellen. Wenn der Inhalt eines Verzeichnisses wächst und mehr als sieben Dateien fasst, sollten Sie darüber nachdenken, ein neues Verzeichnis zu erstellen. Dabei ist der Grenzwert aber individuell. *Warum?*: En Entwickler kann den gesuchten Code schnell auffinden, auf einen Blick identifizieren für was jede Datei steht, die Struktur ist so flach wie möglich und es gibt keine redundanten Namen. @@ -2229,26 +2229,26 @@ Während diese Anleitung das *Was*, *Warum* und *Wie* erklärt, finde ich es ebe ## Modularität -### Viele kleine, eigentsändige Module +### Viele kleine, eigenständige Module ###### [Style [Y160](#style-y160)] - Erstellen Sie kleine Module, die für eine einzige Aufgabe zuständig sind und diese in sich kapseln. - *Warum?*: Modulare Anwendungen machen es möglich, dass Funktionsmerkmale (Features) einfach eingeklinkt werden können. Somit kann ein Entwicklungsteam vertikale Stücke einer Applikation sukzessive ausrollen. Das bedeutet, dass neue Funtionsmerkmale nach ihrer Entwicklung einfach eingeklink werden können. + *Warum?*: Modulare Anwendungen machen es möglich, dass Funktionsmerkmale (Features) einfach eingeklinkt werden können. Somit kann ein Entwicklungsteam vertikale Stücke einer Applikation sukzessive ausrollen. Das bedeutet, dass neue Funktionsmerkmale nach ihrer Entwicklung einfach eingeklinkt werden können. ### Erstellen Sie ein Modul für die Hauptanwendung (App-Modul) ###### [Style [Y161](#style-y161)] - Erstellen Sie ein Hauptmodul für die Anwendung, dessen Rolle es ist, alle Module und Funktionen der Anwendung zusammenzutragen. Nennen Sie das Modul nach Ihrer Anwendung. - *Warum?*: Angular begünstigt Modularität und Muster für die Aufteilung von Code. Ein Hauptmodul für eine Anwendung zu erstellen, die andere Module zusammenzieht, ist ein einfacher Weg, um Module in eine Anwendung einzuklinken oder aus ihr auskzuklinken. + *Warum?*: Angular begünstigt Modularität und Muster für die Aufteilung von Code. Ein Hauptmodul für eine Anwendung zu erstellen, die andere Module zusammenzieht, ist ein einfacher Weg, um Module in eine Anwendung einzuklinken oder aus ihr auszuklinken. ### Halten Sie das App-Modul klein ###### [Style [Y162](#style-y162)] - Stellen Sie nur Logik ins App-Modul, die dazu dient, die Anwendungsbestandteile zusammenzuziehen. Features bleiben in ihren eigenen Feature-Modulen. - *Warum?*: Weitere Logik außerhalb der ursprünglichen Aufgabe ins Hauptmodul einzubinden, wie zum Beispiel Datenabfragen, darstellen von Views, oder eine Logik, die nicht zum zusammenziehen der Module dient, bringt Verwirrung. Es wird schwierig, diese Features zu verwalten und auch zu testen. + *Warum?*: Weitere Logik außerhalb der ursprünglichen Aufgabe ins Hauptmodul einzubinden, wie zum Beispiel Datenabfragen, darstellen von Views, oder eine Logik, die nicht zum Zusammenziehen der Module dient, bringt Verwirrung. Es wird schwierig, diese Features zu verwalten und auch zu testen. *Warum?*: Das App-Modul wird zum Manifest, welches die Module aufführt, die die Applikation ausmachen. @@ -2261,7 +2261,7 @@ Während diese Anleitung das *Was*, *Warum* und *Wie* erklärt, finde ich es ebe *Warum?*: Sprints oder Iterationen können sich auf Funktionsbereiche beziehen. Diese können am Ende eines Sprints oder einer Iteration eingebunden werden. - *Warum?*: Die Trennung von Funkstionsbereichen in Module erleichtert das isolierte Testen der Module und deren Wiederverwengung. + *Warum?*: Die Trennung von Funktionsbereichen in Module erleichtert das isolierte Testen der Module und deren Wiederverwendung. ### Wiederverwendbare Bausteine sind Module ###### [Style [Y164](#style-y164)] @@ -2273,7 +2273,7 @@ Während diese Anleitung das *Was*, *Warum* und *Wie* erklärt, finde ich es ebe ### Modulabhängigkeiten ###### [Style [Y165](#style-y165)] - - Das Hauptmodul einer Applikation ist abhängig von den applikationsspezifischen Funktionsmodulen und den allgemeingültigen oder wiedervendbaren Modulen. + - Das Hauptmodul einer Applikation ist abhängig von den applikationsspezifischen Funktionsmodulen und den allgemeingültigen oder wiederverwendbaren Modulen. ![Modularität und Abhängigkeiten](https://raw.githubusercontent.com/johnpapa/angular-styleguide/master/assets/modularity-1.png) @@ -2283,7 +2283,7 @@ Während diese Anleitung das *Was*, *Warum* und *Wie* erklärt, finde ich es ebe *Warum?*: Interne Anwendungsfunktionen wie allgemeingültige Datenservices werden einfach aufgefunden und innerhalb von `app.core` (wählen Sie ihren Lieblingsnamen für diese Modul) genutzt. - Anmerkung: Dies ist eine Strategie, die die Konstistenz innerhalb einer Anwendung begünstigt. Es gibt hierzu viele gute Möglichkeiten. Wählen Sie eine für sich aus, die stimmig ist, den Regeln von Angular in Puncto Abhängigkeiten folgt und einfach zu verwalten und zu skalieren ist. + Anmerkung: Dies ist eine Strategie, die die Konsistenz innerhalb einer Anwendung begünstigt. Es gibt hierzu viele gute Möglichkeiten. Wählen Sie eine für sich aus, die stimmig ist, den Regeln von Angular in Puncto Abhängigkeiten folgt und einfach zu verwalten und zu skalieren ist. > Meine Strukturen unterscheiden sich von Projekt zu Projekt, aber sie folgen allesamt diesen Richtlinien zur Struktur und Modularität. Auch die Implementierung kann sich in Abhängigkeit der benötigten Funktionen und dem Team unterscheiden. Mit anderen Worten: Bestehen Sie nicht auf die exakte Nachbildung der hier vorgestellten Struktur, sondern passen Sie sie Ihren Gegebenheiten an. Behalten Sie dabei Konsistenz, Wartbarkeit und Effizienz im Hinterkopf. @@ -2373,7 +2373,7 @@ Unit-Tests tragen dazu bei, sauberen Code zu erhalten. Daher habe ich einige mei - Schreiben Sie Ihre Tests für jede Anforderung. Beginnen Sie mit einem leeren Test und füllen Sie diesen, während Sie den Code für die Anforderung schreiben. - *Warum?*: Testbeschreibungen zu zu verfassen, hilft dabei festzulegen, was in der Anforderung passiert, was nicht passiert und wie ein Testerfolg gemessen werden kann. + *Warum?*: Testbeschreibungen zu verfassen, hilft dabei festzulegen, was in der Anforderung passiert, was nicht passiert und wie ein Testerfolg gemessen werden kann. ```javascript it('Soll einen Avengers-Controller enthalten', function() { @@ -2402,7 +2402,7 @@ Unit-Tests tragen dazu bei, sauberen Code zu erhalten. Daher habe ich einige mei *Warum?*: Die Nutzung von Jasmin und Mocha ist sehr verbreitet in der Angular-Community. Beide sind stabil, gut gepflegt und liefern robuste Testfunktionen. - Anmerkung: Wenn Sie Moche nutzen, sollten Sie in Erwägung ziehen, eine sogenannte Assert-Library, wie [Chai](http://chaijs.com) zu nutzen. Ich ziehe dem Mocha vor. + Anmerkung: Wenn Sie Mocha nutzen, sollten Sie in Erwägung ziehen, eine sogenannte Assert-Library, wie [Chai](http://chaijs.com) zu nutzen. Ich ziehe dem Mocha vor. ### Testrunner ###### [Style [Y192](#style-y192)] @@ -2413,7 +2413,7 @@ Unit-Tests tragen dazu bei, sauberen Code zu erhalten. Daher habe ich einige mei *Warum?*: Karma hängt sich leicht von allein in einen CI-Prozess (in Grunt oder Gulb) ein. - *Warum?*: Verschiedene IDE'n wie [WebStorm](http://www.jetbrains.com/webstorm/) und [Visual Studio](http://visualstudiogallery.msdn.microsoft.com/02f47876-0e7a-4f6c-93f8-1af5d5189225) haben damit begonnen, Karma einzubinden. + *Warum?*: Verschiedene IDEs wie [WebStorm](http://www.jetbrains.com/webstorm/) und [Visual Studio](http://visualstudiogallery.msdn.microsoft.com/02f47876-0e7a-4f6c-93f8-1af5d5189225) haben damit begonnen, Karma einzubinden. *Warum?*: Karma arbeitet wunderbar mit Task-Managern für Automatisierte Aufgaben wie [Grunt](http://www.gruntjs.com) (with [grunt-karma](https://github.com/karma-runner/grunt-karma)) und [Gulp](http://www.gulpjs.com) (with [gulp-karma](https://github.com/lazd/gulp-karma)) zusammen. @@ -2424,7 +2424,7 @@ Unit-Tests tragen dazu bei, sauberen Code zu erhalten. Daher habe ich einige mei *Warum?*: Sinon arbeitet wunderbar mit Jasmine und Mocha zusammen und erweitert deren Fähigkeiten der Simulation von Komponenten. - *Warum?*: Sinon erleichtert den Wechsel zwischen Jasmine and Mocha, wenn Sie beide ausprobieren möchten. + *Warum?*: Sinon erleichtert den Wechsel zwischen Jasmine und Mocha, wenn Sie beide ausprobieren möchten. *Warum?*: Sinon liefert gut verständliche, beschreibende Meldung, für den Fall, dass ein Test fehlschlägt. @@ -2442,9 +2442,9 @@ Unit-Tests tragen dazu bei, sauberen Code zu erhalten. Daher habe ich einige mei - Lassen Sie JSHint über ihre Tests laufen. - *Warum?*: Tests sind Code. JSHint prüft die Codequalität und kann Qualitätsprobleme aufdecken, die dazu führen können, dass Tests nicht saber laufen. + *Warum?*: Tests sind Code. JSHint prüft die Codequalität und kann Qualitätsprobleme aufdecken, die dazu führen können, dass Tests nicht sauber laufen. -### Erleichternde Rahmenbedingungen for JSHint und Regeln für Tests +### Erleichternde Rahmenbedingungen fur JSHint und Regeln für Tests ###### [Style [Y196](#style-y196)] - Lockern sie die JSHint-Regeln für Ihren Testcode, damit `describe` und `expect` erlaubt werden. Lockern sie die Regeln auch für Ausdrücke, da Mocha diese benutzt. @@ -2470,7 +2470,7 @@ Unit-Tests tragen dazu bei, sauberen Code zu erhalten. Daher habe ich einige mei *Warum?*: Unit-Tests stehen in direktem Bezug zu einer spezifischen Komponente und Datei im Quellcode. - *Warum?*: Es ist einfacher, sie auf dem neuesten Stand zu halten, weil Sie sie immer im Blick haben. Während Sie programmieren (ob Sie jetzt TDD betreiben oder während oder nach der Entwicklung testen), sind die Testspezifikationen weder aus der Sicht noch aus Ihren Gedanken. Deshalt ist es wahrscheinlicher, dass sie auch gepflegt werden, das dazu beiträgt, die Abdeckung des Codes durch Tests zu verbessern. + *Warum?*: Es ist einfacher, sie auf dem neuesten Stand zu halten, weil Sie sie immer im Blick haben. Während Sie programmieren (ob Sie jetzt TDD betreiben oder während oder nach der Entwicklung testen), sind die Testspezifikationen weder aus der Sicht noch aus Ihren Gedanken. Deshalb ist es wahrscheinlicher, dass sie auch gepflegt werden, das dazu beiträgt, die Abdeckung des Codes durch Tests zu verbessern. *Warum?*: Wenn Sie Code aktualisieren ist es einfacher, auch die Tests im gleichen Zuge zu aktualisieren. @@ -2497,7 +2497,7 @@ Unit-Tests tragen dazu bei, sauberen Code zu erhalten. Daher habe ich einige mei ### Anwendung ###### [Style [Y210](#style-y210)] - - Benutzen Sie die ["subtle" Animationen von Angular](https://docs.angularjs.org/guide/animations) um zwischen Stati, Views oder primären sichtbaren Elementen hin und her zu wechseln. Binden Sie das [ngAnimate-Modul](https://docs.angularjs.org/api/ngAnimate) ein. Die drei Schlüssel hierzu sind "subtle", "smooth", "seamless". + - Benutzen Sie die ["subtle" Animationen von Angular](https://docs.angularjs.org/guide/animations) um zwischen Status, Views oder primären sichtbaren Elementen hin und her zu wechseln. Binden Sie das [ngAnimate-Modul](https://docs.angularjs.org/api/ngAnimate) ein. Die drei Schlüssel hierzu sind "subtle", "smooth", "seamless". *Warum?*: Angulars "subtle" Animationen können die User-Experience erhöhen, wenn sie entsprechend eingesetzt werden. @@ -2506,9 +2506,9 @@ Unit-Tests tragen dazu bei, sauberen Code zu erhalten. Daher habe ich einige mei ### Sub Second ###### [Style [Y211](#style-y211)] - - Nutzen Sie eine Kurze Dauer für Animationen. Ich starte immer bei 300ms und passe diese dann entsprechend an. + - Nutzen Sie eine kurze Dauer für Animationen. Ich starte immer bei 300ms und passe diese dann entsprechend an. - *Warum?*: Lange Animationen können sich negativ auf die wahrgenomme Performance auswirken und einen gegentiligen Einfluss auf die User Experience haben und die Anwendung langsam aussehen lassen. + *Warum?*: Lange Animationen können sich negativ auf die wahrgenommene Performance auswirken und einen gegenteiligen Einfluss auf die User Experience haben und die Anwendung langsam aussehen lassen. ### animate.css ###### [Style [Y212](#style-y212)] @@ -2519,7 +2519,7 @@ Unit-Tests tragen dazu bei, sauberen Code zu erhalten. Daher habe ich einige mei *Warum?*: Bietet Konsistenz Ihrer Animationen. - *Warum?*: animate.css ist weit verbeitet und gut getestet. + *Warum?*: animate.css ist weit verbreitet und gut getestet. Anmerkung: Schauen Sie sich diesen [tollen Beitrag von Matias Niemelä über Angular Animationen](http://www.yearofmoo.com/2013/08/remastered-animation-in-angularjs-1-2.html) an. @@ -2749,7 +2749,7 @@ Unit-Tests tragen dazu bei, sauberen Code zu erhalten. Daher habe ich einige mei - Erstellen Sie eine Angular-Konstante für die globalen Variablen aus Bibliotheken von Drittanbietern. - *Warum?*: Bietet einen Weg, Bibliotheken von Drittanbietern in einem sicheren Umfeld anzubieten, die andererseits "Globals" wären. Dies verbessert die Testbarkeit, weil Sie so einfacher die Abhängigkeiten Ihres Codes erfahren (verindert lückenhafte Abstraktionen). Auch die Simulation dieser Abhängigkeiten wird zugelassen, wo sie Sinn macht. + *Warum?*: Bietet einen Weg, Bibliotheken von Drittanbietern in einem sicheren Umfeld anzubieten, die andererseits "Globals" wären. Dies verbessert die Testbarkeit, weil Sie so einfacher die Abhängigkeiten Ihres Codes erfahren (verhindert lückenhafte Abstraktionen). Auch die Simulation dieser Abhängigkeiten wird zugelassen, wo sie Sinn macht. ```javascript // constants.js @@ -2767,13 +2767,13 @@ Unit-Tests tragen dazu bei, sauberen Code zu erhalten. Daher habe ich einige mei ###### [Style [Y241](#style-y241)] - - Benutzen Sie Konstanten für Wete, die sich nicht ändern und nicht aus einem anderen Service kommen. Wenn Konstanten nur für ein bestimmtes Modul gebraucht werden, welches zudem wiederverwendbar sein soll, dann platzieren Sie die Konstanten in einer Datei (pro Modul) und benennen Sie die Datei nach dem Modul. Bis dahin halten Sie die Konstanten im Hauptmodul in einer `constants.js`-Datei. + - Benutzen Sie Konstanten für Werte, die sich nicht ändern und nicht aus einem anderen Service kommen. Wenn Konstanten nur für ein bestimmtes Modul gebraucht werden, welches zudem wiederverwendbar sein soll, dann platzieren Sie die Konstanten in einer Datei (pro Modul) und benennen Sie die Datei nach dem Modul. Bis dahin halten Sie die Konstanten im Hauptmodul in einer `constants.js`-Datei. *Warum?*: Ein Wert, der sich ändert - wenn auch nur unregelmäßig - sollte von einem Service ermittelt werden, so dass er nicht im Quellcode geändert werden muss. Zum Beispiel könnte eine URL für einen Datenservice in einer Konstanten abgelegt werden. Besser wäre es aber, diesen Wert über einen WebService zu ermitteln. *Warum?*: Konstanten können in jede Angular-Komponente (auch in einen Provider) eingefügt werden. - *Warum?*: Ist eine Anwendung in Module unterteilt, die in anderen Anwendungen genutzt werden können, so solte jedes alleinstehende Modul für sich selbst funktionieren, eingeschlossen seiner Konstanten. + *Warum?*: Ist eine Anwendung in Module unterteilt, die in anderen Anwendungen genutzt werden können, so sollte jedes alleinstehende Modul für sich selbst funktionieren, eingeschlossen seiner Konstanten. ```javascript // Konstanten für die gesamte Anwendung @@ -2793,7 +2793,7 @@ Unit-Tests tragen dazu bei, sauberen Code zu erhalten. Daher habe ich einige mei **[Zurück zum Anfang](#table-of-contents)** ## Dateitemplates und Snippets -Nutzen Sie Templates oder Snippets, um stimmigen Richtlinien und Mustern zu folgen. Hier sind Templates oder Snippets für einige Editoren und IDE'n zur Webentwicklung. +Nutzen Sie Templates oder Snippets, um stimmigen Richtlinien und Mustern zu folgen. Hier sind Templates oder Snippets für einige Editoren und IDEs zur Webentwicklung. ### Sublime Text ###### [Style [Y250](#style-y250)] @@ -2830,7 +2830,7 @@ Nutzen Sie Templates oder Snippets, um stimmigen Richtlinien und Mustern zu folg - Angular Dateitemplates, die diesen Mustern und Richtlinien folgen. Sie können sie in Ihre WebStorm-Einstellungen importieren: - Laden Sie die [WebStorm Angular Dateitemplates und Snippets](assets/webstorm-angular-file-template.settings.jar?raw=true) herunter - - Öffnen Sie WebStorm and gehen Sie ins `File`-Menü + - Öffnen Sie WebStorm und gehen Sie ins `File`-Menü - Wählen Sie die `Import Settings` Menüoption - Wählen Sie die Datei aus und klicken Sie `OK` @@ -2890,7 +2890,7 @@ Nutzen Sie Templates oder Snippets, um stimmigen Richtlinien und Mustern zu folg // Dies sind Teilsnippets, die zum Verketten gedacht sind: ngmodule // erstellt einen Angular module getter - ngstate // erstellt eine Angular UI Router State-Defintion + ngstate // erstellt eine Angular UI Router State-Definition ngconfig // definiert eine Funktion für die Konfigurationsphase ngrun // definiert eine Funktion für die Run-Phase ngroute // definiert eine Angular ngRoute 'when'-Definition @@ -2949,7 +2949,7 @@ Das Routing auf der Client-Seite ist für die Erstellung eines Navigationsflusse - Benutzen Sie den [AngularUI Router](http://angular-ui.github.io/ui-router/) für das clientseitige Routing. - *Warum?*: Der UI Router bietet alle Funktionen des Angular Routers und zusätzlich Weitere, wie geschachtelte Routen und Stati. + *Warum?*: Der UI Router bietet alle Funktionen des Angular Routers und zusätzlich Weitere, wie geschachtelte Routen und Status. *Warum?*: Die Syntax ähnelt der des Angular Routers und ist einfach auf den UI Router umzustellen. @@ -3025,24 +3025,24 @@ Das Routing auf der Client-Seite ist für die Erstellung eines Navigationsflusse ###### [Style [Y271](#style-y271)] - - Definieren sie die Routen für die Views in den Modulen, in denen sie enthalten sind. Jedes Modul sollte die Routen seiner Views enthalten. + - Definieren Sie die Routen für die Views in den Modulen, in denen sie enthalten sind. Jedes Modul sollte die Routen seiner Views enthalten. *Warum?*: Jedes Modul sollte für sich allein lauffähig sein. *Warum?*: Wird ein Modul zur Anwendung hinzugefügt oder aus ihr ausgeklinkt, enthält die Anwendung nur Routen, die zu vorhanden Views führen. - *Warum?*: Dies erleichtert es, Teile eine Anwendung zu aktivieren oder zu deaktiveren, ohne dass man sich um verwaiste Routen Sorgen machen muss. + *Warum?*: Dies erleichtert es, Teile eine Anwendung zu aktivieren oder zu deaktivieren, ohne dass man sich um verwaiste Routen Sorgen machen muss. **[Zurück zum Anfang](#table-of-contents)** ## Automatisierung von Aufgaben Nutzen Sie [Gulp](http://gulpjs.com) oder [Grunt](http://gruntjs.com), um Aufgaben zu automatisieren. Bei Gulp geht der Code vor Konfiguration, bei Grund Konfiguration vor Code. Ich persönlich bevorzuge Gulp, weil ich denke, es ist einfacher zu lesen und zu schreiben, aber beide sind erstklassig. -> Erfahren Sie mehr über Gulp und Muster für die Automatisierung von Aufgabenin meinem [Gulp Pluralsight Kurs](http://jpapa.me/gulpps) +> Erfahren Sie mehr über Gulp und Muster für die Automatisierung von Aufgaben in meinem [Gulp Pluralsight Kurs](http://jpapa.me/gulpps) ###### [Style [Y400](#style-y400)] - - Nutzen sie die Automatisierung von Aufgaben, um die Moduldefinitionsdateien `*.module.js` vor allen anderen JavaScript-Dateien in der Anwendung aufzulisten. + - Nutzen Sie die Automatisierung von Aufgaben, um die Moduldefinitionsdateien `*.module.js` vor allen anderen JavaScript-Dateien in der Anwendung aufzulisten. *Warum?*: Angular muss die Moduldefinitionen registrieren, bevor die Module benutzt werden können. @@ -3066,7 +3066,7 @@ Nutzen Sie [Gulp](http://gulpjs.com) oder [Grunt](http://gruntjs.com), um Aufgab - Vermeiden Sie es, Filter dazu zu nutzen, alle Eigenschaften in einem komplexen Objektgraphen zu prüfen. Nutzen Sie Filter um Eigenschaften auszuwählen. - *Warum?*: Filter können sehr leicht missbraucht werden und dann die Performance einer Anwendung negativ beeinflussen, wenn sie nicht überlegt eingesetzt werden. Zum Beispiel: Wenn ein Filter auf einen großen und tief geschachtelten Objektgraphen angewendet wird. + *Warum?*: Filter können sehr leicht missbraucht werden und dann die Performance einer Anwendung negativ beeinflussen, wenn Sie nicht überlegt eingesetzt werden. Zum Beispiel: Wenn ein Filter auf einen großen und tief geschachtelten Objektgraphen angewendet wird. **[Zurück zum Anfang](#table-of-contents)** From 837ebb272efedd2b7280d119256c0ed9ad502f97 Mon Sep 17 00:00:00 2001 From: Jonathas Amaral Date: Sun, 12 Jul 2015 16:45:16 -0300 Subject: [PATCH 010/248] Spelling corrections. --- i18n/PT-BR.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/i18n/PT-BR.md b/i18n/PT-BR.md index 0289257e..376949ad 100644 --- a/i18n/PT-BR.md +++ b/i18n/PT-BR.md @@ -317,7 +317,7 @@ ou *Controladores* ### controllerAs Controller Syntax - - Utilize a sintaxe `controllerAs` ao invés invés da sintaxe `clássica controller com $scope`. + - Utilize a sintaxe `controllerAs` ao invés da sintaxe `clássica controller com $scope`. - A sintaxe `controllerAs` usa o `this` dentro dos controllers que fica ligado ao `$scope`. @@ -1683,7 +1683,7 @@ ou *Nomenclatura* * o nome do arquivo (`avengers.controllers.js`) * o nome de componente registrado pelo Angular (`AvengersController`) - *Por que?*: As convenções de nomenclatura ajudam a fornecer uma maneira consistente de encontrar algo à primeira vista. Consistência dentro do projeto e vital. Consistência dentro de um time é importante. Consistência em toda a empresa proporciona uma enorme eficiência. + *Por que?*: As convenções de nomenclatura ajudam a fornecer uma maneira consistente de encontrar algo à primeira vista. Consistência dentro do projeto é vital. Consistência dentro de um time é importante. Consistência em toda a empresa proporciona uma enorme eficiência. *Por que?*: As convenções de nomenclatura deveriam simplesmente te ajudar a encontrar trechos do seu código mais rápido e torná-lo mais fácil de se entender. From 13b14f918b4be415d06d797a402e2098ce568848 Mon Sep 17 00:00:00 2001 From: mseancole Date: Tue, 14 Jul 2015 22:06:38 -0400 Subject: [PATCH 011/248] Modify Sublime Text Snippets Modify snippets so that they may be used not only on JavaScript files, but also on plain text files (new files). Caveat: Autocompletion does not work on plain text files. You must type "ngcontroller" in full to activate the snippet. --- .../sublime-angular-snippets/angular.controller.sublime-snippet | 2 +- .../sublime-angular-snippets/angular.directive.sublime-snippet | 2 +- assets/sublime-angular-snippets/angular.factory.sublime-snippet | 2 +- assets/sublime-angular-snippets/angular.filter.sublime-snippet | 2 +- assets/sublime-angular-snippets/angular.module.sublime-snippet | 2 +- assets/sublime-angular-snippets/angular.service.sublime-snippet | 2 +- 6 files changed, 6 insertions(+), 6 deletions(-) diff --git a/assets/sublime-angular-snippets/angular.controller.sublime-snippet b/assets/sublime-angular-snippets/angular.controller.sublime-snippet index 5e3c7c5f..5a46e787 100644 --- a/assets/sublime-angular-snippets/angular.controller.sublime-snippet +++ b/assets/sublime-angular-snippets/angular.controller.sublime-snippet @@ -23,5 +23,5 @@ })(); ]]> ngcontroller - source.js + text.plain, source.js diff --git a/assets/sublime-angular-snippets/angular.directive.sublime-snippet b/assets/sublime-angular-snippets/angular.directive.sublime-snippet index f2bcf719..4c1c91bf 100644 --- a/assets/sublime-angular-snippets/angular.directive.sublime-snippet +++ b/assets/sublime-angular-snippets/angular.directive.sublime-snippet @@ -36,5 +36,5 @@ })(); ]]> ngdirective - source.js + text.plain, source.js diff --git a/assets/sublime-angular-snippets/angular.factory.sublime-snippet b/assets/sublime-angular-snippets/angular.factory.sublime-snippet index 94dab353..64ed5656 100644 --- a/assets/sublime-angular-snippets/angular.factory.sublime-snippet +++ b/assets/sublime-angular-snippets/angular.factory.sublime-snippet @@ -23,5 +23,5 @@ })(); ]]> ngfactory - source.js + text.plain, source.js diff --git a/assets/sublime-angular-snippets/angular.filter.sublime-snippet b/assets/sublime-angular-snippets/angular.filter.sublime-snippet index 7e1bc54e..784c3673 100644 --- a/assets/sublime-angular-snippets/angular.filter.sublime-snippet +++ b/assets/sublime-angular-snippets/angular.filter.sublime-snippet @@ -19,5 +19,5 @@ })(); ]]> ngfilter - source.js + text.plain, source.js diff --git a/assets/sublime-angular-snippets/angular.module.sublime-snippet b/assets/sublime-angular-snippets/angular.module.sublime-snippet index 663b8666..afb742f9 100644 --- a/assets/sublime-angular-snippets/angular.module.sublime-snippet +++ b/assets/sublime-angular-snippets/angular.module.sublime-snippet @@ -9,5 +9,5 @@ })(); ]]> ngmodule - source.js + text.plain, source.js diff --git a/assets/sublime-angular-snippets/angular.service.sublime-snippet b/assets/sublime-angular-snippets/angular.service.sublime-snippet index e980c4b1..c57ed25f 100644 --- a/assets/sublime-angular-snippets/angular.service.sublime-snippet +++ b/assets/sublime-angular-snippets/angular.service.sublime-snippet @@ -20,5 +20,5 @@ })(); ]]> ngservice - source.js + text.plain, source.js From 4f165472c99ec870f7a78647841418305de44d27 Mon Sep 17 00:00:00 2001 From: Cristopher Jonas de Faria Date: Sat, 18 Jul 2015 13:17:43 -0300 Subject: [PATCH 012/248] update PT-BR - Spelling Correction MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Correction the word "matê-la" for "mantê-la". --- i18n/PT-BR.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/i18n/PT-BR.md b/i18n/PT-BR.md index 376949ad..e1e38852 100644 --- a/i18n/PT-BR.md +++ b/i18n/PT-BR.md @@ -434,7 +434,7 @@ ou *Controladores* ![Controller Using "Above the Fold"](https://raw.githubusercontent.com/johnpapa/angularjs-styleguide/master/assets/above-the-fold-1.png) - Nota: Se a função possuir apenas 1 linha considere matê-la no topo, desde que a legibilidade não seja afetada. + Nota: Se a função possuir apenas 1 linha considere mantê-la no topo, desde que a legibilidade não seja afetada. ```javascript /* evite */ From cad8bdf9079790ebfbac5bda77dfb49a9b497efc Mon Sep 17 00:00:00 2001 From: Benjamin Barbier Date: Tue, 21 Jul 2015 14:54:59 +0200 Subject: [PATCH 013/248] fix(spelling): replace nivigation by navigation --- i18n/fr-FR.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/i18n/fr-FR.md b/i18n/fr-FR.md index ece93b52..65fee277 100644 --- a/i18n/fr-FR.md +++ b/i18n/fr-FR.md @@ -2093,7 +2093,7 @@ Alors que ce guide explique le *quoi*, le *pourquoi* et le *comment*, il m'a ét ### Layout ###### [Style [Y151](#style-y151)] - - Placez les composants qui définissent le layout principal de l'application dans un répertoire nommé `layout`. Il devrait inclure une vue noyau et le controlleur devrait agir comme conteneur pour l'appli, la nivigation, les menus, les zones de contenu, et les autres régions. + - Placez les composants qui définissent le layout principal de l'application dans un répertoire nommé `layout`. Il devrait inclure une vue noyau et le controlleur devrait agir comme conteneur pour l'appli, la navigation, les menus, les zones de contenu, et les autres régions. *Pourquoi ?* : Organise tout le layout à un seul endroit réutilisé dans l'application. From e1d5180023d865ea321743c118d4e1c0bee6c9e0 Mon Sep 17 00:00:00 2001 From: Randy Date: Wed, 29 Jul 2015 21:43:39 +0800 Subject: [PATCH 014/248] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E9=94=99=E5=AD=97?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- i18n/zh-CN.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/i18n/zh-CN.md b/i18n/zh-CN.md index 5ed3cf0f..8cfa3bca 100644 --- a/i18n/zh-CN.md +++ b/i18n/zh-CN.md @@ -293,7 +293,7 @@ Angular社区是一个热衷于分享经验的令人难以置信的社区，尽 - 使用[`controllerAs`](http://www.johnpapa.net/do-you-like-your-angular-controllers-with-or-without-sugar/) 语法代替直接用经典的$scope定义的controller的方式。 - *为什么？*：congtroller被构建的时候，就会有一个新的实例，`controllerAs` 的语法比`经典的$scope语法`更接近JavaScript构造函数。 + *为什么？*：controller被构建的时候，就会有一个新的实例，`controllerAs` 的语法比`经典的$scope语法`更接近JavaScript构造函数。 *为什么？*：这促进在View中对绑定到“有修饰”的对象的使用（例如用`customer.name` 代替`name`），这将更有语境、更容易阅读，也避免了任何没有“修饰”而产生的引用问题。 From f5d25dfb32c58c905e9b1c5b77b600f266f5eba5 Mon Sep 17 00:00:00 2001 From: Randy Date: Wed, 29 Jul 2015 23:28:51 +0800 Subject: [PATCH 015/248] Update zh-CN.md --- i18n/zh-CN.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/i18n/zh-CN.md b/i18n/zh-CN.md index 8cfa3bca..9fc68053 100644 --- a/i18n/zh-CN.md +++ b/i18n/zh-CN.md @@ -1247,8 +1247,8 @@ Angular社区是一个热衷于分享经验的令人难以置信的社区，尽 ```html
hello world
-
max={{vm.max}}
-
min={{vm.min}}
+
max={{vm.max}}
+
min={{vm.min}}
``` 注意：当你把controller注入到link的函数或可访问的directive的attributes时，你可以把它命名为控制器的属性。 From 289ed9df500f0a9a5b7387f14a77ca27ded04ba4 Mon Sep 17 00:00:00 2001 From: Denis Ciccale Date: Wed, 29 Jul 2015 19:42:25 +0200 Subject: [PATCH 016/248] fix typo --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 72602a74..635a4788 100644 --- a/README.md +++ b/README.md @@ -1322,7 +1322,7 @@ While this guide explains the *what*, *why* and *how*, I find it helpful to see *Why?*: The controller `activate` makes it convenient to re-use the logic for a refresh for the controller/View, keeps the logic together, gets the user to the View faster, makes animations easy on the `ng-view` or `ui-view`, and feels snappier to the user. - Note: If you need to conditionally cancel the route before you start use the controller, use a [route resolve](#style-y081) instead. + Note: If you need to conditionally cancel the route before you start using the controller, use a [route resolve](#style-y081) instead. ```javascript /* avoid */ From 0b6ae08972cefe7d39d9a15e0ec97252a897f6af Mon Sep 17 00:00:00 2001 From: natee Date: Fri, 31 Jul 2015 17:10:26 +0800 Subject: [PATCH 017/248] shorter text --- i18n/zh-CN.md | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/i18n/zh-CN.md b/i18n/zh-CN.md index f41f989d..64c712b6 100644 --- a/i18n/zh-CN.md +++ b/i18n/zh-CN.md @@ -389,14 +389,14 @@ Angular社区是一个热衷于分享经验的令人难以置信的社区，尽 ``` -###可绑定成员放到顶部 +###置顶绑定成员 ###### [Style [Y033](#style-y033)] - 把可绑定的成员放到controller的顶部，按字母排序，并且不要通过controller的代码传播。 *为什么？*：易读，可以让你立即识别controller中的哪些成员可以在View中绑定和使用。 - *为什么？*：虽然设置单行匿名函数很容易，但是当这些函数的代码超过一行时，这将极大降低代码的可读性。在可绑定成员下面定义函数（这些函数被提出来），把具体的实现细节放到下面，可绑定成员放到顶部，这会提高代码的可读性。 + *为什么？*：虽然设置单行匿名函数很容易，但是当这些函数的代码超过一行时，这将极大降低代码的可读性。在可绑定成员下面定义函数（这些函数被提出来），把具体的实现细节放到下面，可绑定成员置顶，这会提高代码的可读性。 ```javascript /* avoid */ @@ -481,13 +481,13 @@ Angular社区是一个热衷于分享经验的令人难以置信的社区，尽 ###函数声明隐藏实现细节 ###### [Style [Y034](#style-y034)] - - 使用函数声明来隐藏实现细节，把绑定成员放到顶部，当你需要在controller中绑定一个函数时，把它指向一个在文件的后面会出现函数声明。更多详情请看[这里](http://www.johnpapa.net/angular-function-declarations-function-expressions-and-readable-code)。 + - 使用函数声明来隐藏实现细节，置顶绑定成员，当你需要在controller中绑定一个函数时，把它指向一个在文件的后面会出现函数声明。更多详情请看[这里](http://www.johnpapa.net/angular-function-declarations-function-expressions-and-readable-code)。 *为什么？*：易读，易识别哪些成员可以在View中绑定和使用。 *为什么？*：把函数的实现细节放到后面，你可以更清楚地看到重要的东西。 - *为什么？*：由于函数声明会被提到顶部，所以没有必要担心在声明它之前就使用函数的问题。 + *为什么？*：由于函数声明会被置顶，所以没有必要担心在声明它之前就使用函数的问题。 *为什么？*：你再也不用担心当 `a`依赖于 `b`时，把`var a`放到`var b`之前会中断你的代码的函数声明问题。 @@ -730,7 +730,7 @@ Angular社区是一个热衷于分享经验的令人难以置信的社区，尽 注：[所有的Angular services都是单例](https://docs.angularjs.org/guide/services)，这意味着每个injector都只有一个实例化的service。 -###可访问的成员放到顶部### +###可访问的成员置顶### ###### [Style [Y052](#style-y052)] - 使用从[显露模块模式](http://addyosmani.com/resources/essentialjsdesignpatterns/book/#revealingmodulepatternjavascript)派生出来的技术把service（它的接口）中可调用的成员暴露到顶部， @@ -739,7 +739,7 @@ Angular社区是一个热衷于分享经验的令人难以置信的社区，尽 *为什么？*：当文件内容很长时，这可以避免需要滚动才能看到暴露了哪些东西。 - *为什么？*：虽然你可以随意写一个函数，但当函数代码超过一行时就会降低可读性并造成滚动。通过把实现细节放下面、可调用接口放到顶部的返回service的方式来定义可调用的接口，从而使代码更加易读。 + *为什么？*：虽然你可以随意写一个函数，但当函数代码超过一行时就会降低可读性并造成滚动。通过把实现细节放下面、把可调用接口置顶的形式返回service的方式来定义可调用的接口，从而使代码更加易读。 ```javascript /* avoid */ @@ -790,13 +790,13 @@ Angular社区是一个热衷于分享经验的令人难以置信的社区，尽 ###函数声明隐藏实现细节 ###### [Style [Y053](#style-y053)] - - 函数声明隐藏实现细节，把绑定成员放到顶部，当你需要在controller中绑定一个函数时，把它指向一个函数声明，这个函数声明在文件的后面会出现。 + - 函数声明隐藏实现细节，置顶绑定成员，当你需要在controller中绑定一个函数时，把它指向一个函数声明，这个函数声明在文件的后面会出现。 *为什么？*：易读，易识别哪些成员可以在View中绑定和使用。 *为什么？*：把函数的实现细节放到后面，你可以更清楚地看到重要的东西。 - *为什么？*：由于函数声明会被提到顶部，所以没有必要担心在声明它之前就使用函数的问题。 + *为什么？*：由于函数声明会被置顶，所以没有必要担心在声明它之前就使用函数的问题。 *为什么？*：你再也不用担心当 `a`依赖于 `b`时，把`var a`放到`var b`之前会中断你的代码的函数声明问题。 From 7afcbe00f9b39701a55d663289838439462af178 Mon Sep 17 00:00:00 2001 From: robsonbittencourt Date: Sun, 2 Aug 2015 14:41:19 -0300 Subject: [PATCH 018/248] Fixed little error Portuguese --- i18n/PT-BR.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/i18n/PT-BR.md b/i18n/PT-BR.md index e1e38852..460a448c 100644 --- a/i18n/PT-BR.md +++ b/i18n/PT-BR.md @@ -22,7 +22,7 @@ Vários de meus estilos vieram de várias sessões de pair-programming (programa Embora este guia explique o **o quê**, **porque** e **como**, acho útil ver tudo isso em prática. Este guia é acompanhado de uma aplicação de exemplo que segue estes estilos e padrões. Você pode encontrar a [aplicação de exemplo (chamada "modular") aqui](https://github.com/johnpapa/ng-demos) na pasta `modular`. Sinta-se livre para pegá-la, cloná-la e *forká-la*. [Instruções de como rodar o aplicativo estão em seu README](https://github.com/johnpapa/ng-demos/tree/master/modular). -> **Nota de tradução**: Os títulos originais de cada seção será mantido, pois caso você queira buscar mais sobre estes assuntos futuramente, fazendo tal busca em inglês será obtido um resultado **imensamente** melhor. +> **Nota de tradução**: Os títulos originais de cada seção serão mantidos, pois caso você queira buscar mais sobre estes assuntos futuramente, fazendo tal busca em inglês será obtido um resultado **imensamente** melhor. > > Após o título, estará a tradução auxiliar, quando necessária, visto que alguns termos são mais facilmente entendidos quando não traduzidos, por fazerem parte do núcleo do estudo em questão. > From 484f001eedd6a006ee1aa60ce584f0f411a37848 Mon Sep 17 00:00:00 2001 From: Vinicius Sabadim Fernandes Date: Mon, 3 Aug 2015 12:01:22 -0300 Subject: [PATCH 019/248] update PT-BR - Spelling Correction --- i18n/PT-BR.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/i18n/PT-BR.md b/i18n/PT-BR.md index e1e38852..77becbf0 100644 --- a/i18n/PT-BR.md +++ b/i18n/PT-BR.md @@ -64,7 +64,7 @@ ou *Responsabilidade Única* - Defina um componente por arquivo. - O exemplo seguinte define um módulo `app` e suas dependências, define um controller e define um factory, todos no mesmo arquivo. + O exemplo seguinte define um módulo `app` e suas dependências, define um controller e define uma factory, todos no mesmo arquivo. ```javascript /* evite */ @@ -145,7 +145,7 @@ ou *Responsabilidade Única* /** * recomendado * - * nenhuma global é deixada para trás + * nada global é deixado para trás */ // logger.js @@ -220,7 +220,7 @@ ou *Evitando Colisão de Nomes* ### *Getters* - - Quando usando um módulo, evite usar as variáveis e então use o encadeamento com a sintaxe *getter*. + - Quando usando um módulo, evite usar uma variável. Em vez disso, use encadeamento com a sintaxe *getter*. **Por que?** Isso produz um código mais legível e evita colisão de variáveis ou vazamentos. @@ -295,7 +295,7 @@ ou *Controladores* - Utilize a sintaxe [`controllerAs`](http://www.johnpapa.net/do-you-like-your-angular-controllers-with-or-without-sugar/) ao invés da sintaxe `clássica controller com $scope`. - **Por que?**: Controllers são construídos, "iniciados", e fornecem um nova instância única, e a sintaxe `controlerAs` é mais próxima de um construtor JavaScript do que a `sintaxe clássica do $scope`. + **Por que?**: Controllers são construídos, "iniciados", e fornecem um nova instância única, e a sintaxe `controllerAs` é mais próxima de um construtor JavaScript do que a `sintaxe clássica do $scope`. **Por que?**: Isso promove o uso do binding de um objeto "pontuado", ou seja, com propriedades na View (ex. `customer.name` ao invés de `name`), que é mais contextual, legível, e evita qualquer problema com referências que podem ocorrer sem a "pontuação" @@ -323,7 +323,7 @@ ou *Controladores* **Por que?**: O `controllerAs` é uma forma mais simples de lidar com o `$scope`. Você ainda poderá fazer o bind para a View e ainda poderá acessar os métodos do `$scope`. - **Por que?**: Ajuda a evitar a tentação de usar o métodos do `$scope` dentro de um controller quando seria melhor evitá-los ou movê-los para um factory. Considere utilizar o `$scope` em um factory, ou em um controller apenas quando necessário. Por exemplo, quando publicar e subscrever eventos usando [`$emit`](https://docs.angularjs.org/api/ng/type/$rootScope.Scope#$emit), [`$broadcast`](https://docs.angularjs.org/api/ng/type/$rootScope.Scope#$broadcast), ou [`$on`](https://docs.angularjs.org/api/ng/type/$rootScope.Scope#$on) considere mover estes casos para um factory e invocá-los a partir do controller. + **Por que?**: Ajuda a evitar a tentação de usar os métodos do `$scope` dentro de um controller quando seria melhor evitá-los ou movê-los para um factory. Considere utilizar o `$scope` em um factory, ou em um controller apenas quando necessário. Por exemplo, quando publicar e subscrever eventos usando [`$emit`](https://docs.angularjs.org/api/ng/type/$rootScope.Scope#$emit), [`$broadcast`](https://docs.angularjs.org/api/ng/type/$rootScope.Scope#$broadcast), ou [`$on`](https://docs.angularjs.org/api/ng/type/$rootScope.Scope#$on) considere mover estes casos para um factory e invocá-los a partir do controller. ```javascript /* evite */ From e59e4fcdd9e2b9d475c766557701bfc1e79813ff Mon Sep 17 00:00:00 2001 From: Vinicius Sabadim Fernandes Date: Mon, 3 Aug 2015 15:00:27 -0300 Subject: [PATCH 020/248] Translating some words and spelling errors --- i18n/PT-BR.md | 48 ++++++++++++++++++++++++------------------------ 1 file changed, 24 insertions(+), 24 deletions(-) diff --git a/i18n/PT-BR.md b/i18n/PT-BR.md index e1e38852..265c80d3 100644 --- a/i18n/PT-BR.md +++ b/i18n/PT-BR.md @@ -6,7 +6,7 @@ >The [original English version](http://jpapa.me/ngstyles) is the source of truth, as it is maintained and updated first. -Se você procura por um guia de estilo opinativo para sintaxe, convenções e estruturação de aplicações AngularJS, então siga em frente! Estes estilos são baseados em minha experiência com desenvolvimento com [AngularJS](//angularjs.org), apresentações, [cursos de treinamento na Pluralsight](http://pluralsight.com/training/Authors/Details/john-papa) e trabalhando em equipe. +Se você procura por um guia de estilo opinativo para sintaxe, convenções e estruturação de aplicações AngularJS, então siga em frente! Estes estilos são baseados em minha experiência com desenvolvimento com [AngularJS](//angularjs.org), apresentações, [cursos de treinamento nae Pluralsight](http://pluralsight.com/training/Authors/Details/john-papa) e trabalhando em equipe. > Se você gostar deste guia, confira meu curso [Angular Patterns: Clean Code](http://jpapa.me/ngclean) na Pluralsight. @@ -1074,12 +1074,12 @@ ou *Limite 1 por arquivo* } ``` - Nota: Há diferentes opções de nomear diretivas (directives), especialmente quando elas podem ser usadas em escopes (scopes) variados. Escolha uma que faça a diretiva e o nome do arquivo distinto e simples. Alguns exemplos são mostrados abaixo, mas veja a seção de nomeação para mais recomendações. + Nota: Há diferentes opções de nomear diretivas (directives), especialmente quando elas podem ser usadas em escopos (scopes) variados. Escolha uma que faça a diretiva e o nome do arquivo distinto e simples. Alguns exemplos são mostrados abaixo, mas veja a seção de nomeação para mais recomendações. ### Limit DOM Manipulation ou *Limite a manipulação do DOM* - - Quando estiver manipulando o DOM diretamente, utilize uma diretiva (directive). Se formas alternativas podem ser utilizadas, como utilizar CSS para setar estilos ou [serviços de animação (animation services)](https://docs.angularjs.org/api/ngAnimate), Angular templating, [`ngShow`](https://docs.angularjs.org/api/ng/directive/ngShow) ou [`ngHide`](https://docs.angularjs.org/api/ng/directive/ngHide), então prefira utilizá-los. Por exemplo, se uma diretiva simplesmente esconde ou mostra um elemento, use ngHide/ngShow. + - Quando estiver manipulando o DOM diretamente, utilize uma diretiva (directive). Se formas alternativas podem ser utilizadas, como: utilizar CSS para setar estilos ou [serviços de animação (animation services)](https://docs.angularjs.org/api/ngAnimate), Angular templating, [`ngShow`](https://docs.angularjs.org/api/ng/directive/ngShow) ou [`ngHide`](https://docs.angularjs.org/api/ng/directive/ngHide), então prefira utilizá-los. Por exemplo, se uma diretiva simplesmente esconde ou mostra um elemento, use ngHide/ngShow. **Por que?**: A manipulação do DOM pode ser difícil de testar, debugar, e há melhores maneiras (ex: CSS, animações (animations), templates). @@ -1090,7 +1090,7 @@ ou *Forneça um prefixo único para as diretivas* **Por que?**: Um prefixo curto e único identifica o contexto e a origem da diretiva. Por exemplo, o prefixo `cc-` pode indicar que a diretiva é parte de um aplicativo da CodeCamper, enquanto a diretiva `acme-` pode indicar uma diretiva para a companhia Acme. - Nota: Evite `ng-`, pois são reservadas para as diretivas do AngularJS. Pesquisa largamente as diretivas utilizadas para evitar conflitos de nomes, como `ion-` que são utilizadas para o [Ionic Framework](http://ionicframework.com/). + Nota: Evite `ng-`, pois são reservadas para as diretivas do AngularJS. Pesquise largamente as diretivas utilizadas para evitar conflitos de nomes, como `ion-` que são utilizadas para o [Ionic Framework](http://ionicframework.com/). ### Restrict to Elements and Attributes ou *Restringir para elementos e atributos* @@ -1207,7 +1207,7 @@ ou *Diretivas e "ControladorComo"* ``` ```html - /* example.directive.html */ +
hello world
max={{vm.max}}
min={{vm.min}}
@@ -1266,7 +1266,7 @@ ou *Resolução de promessas na rota* - Quando o controlador (controller) depende de uma promessa ser resolvida, resolva as dependências no `$routeProvider` antes da lógica do controlador (controller) ser executada. Se vocẽ precisa cancelar a rota condicionalmente antes do controlador (controller) ser ativado, utilize uma resolução de rota (route resolve). - **Por que?**: Um controlador (controller) pode precisar de dados antes de ser carregado. Esses dados podem vir de uma promessa (promise) através de uma factory personalizada ou [$http](https://docs.angularjs.org/api/ng/service/$http). Utilizando [resolução de rota (route resolve)](https://docs.angularjs.org/api/ngRoute/provider/$routeProvider) permite as promessas (promises) serem resolvidas antes da lógica do controlador (controller) ser executada, então ele pode executar ações através dos dados dessa promessa (promise). + **Por que?**: Um controlador (controller) pode precisar de dados antes de ser carregado. Esses dados podem vir de uma promessa (promise) através de uma factory personalizada ou [$http](https://docs.angularjs.org/api/ng/service/$http). Utilizar [resolução de rota (route resolve)](https://docs.angularjs.org/api/ngRoute/provider/$routeProvider) permite as promessas (promises) serem resolvidas antes da lógica do controlador (controller) ser executada, então ele pode executar ações através dos dados dessa promessa (promise). ```javascript /* evite */ @@ -1332,7 +1332,7 @@ ou *Não seguro para Minificação* - Evite usar o atalho de sintaxe de declarar dependências sem usar uma abordagem segura para minificação. - *Por que?*: Os parâmetros do componente (por ex. controller, factory, etc) serão convertidos em variáveis encurtadas. Por exemplo, `common` e `dataservice` podem virar `a` ou `b` e não serem encontrados pelo AngularJS. + **Por que?**: Os parâmetros do componente (por ex. controller, factory, etc) serão convertidos em variáveis encurtadas. Por exemplo, `common` e `dataservice` podem virar `a` ou `b` e não serem encontrados pelo AngularJS. ```javascript /* evite - não seguro para minificação*/ @@ -1356,11 +1356,11 @@ ou *Identifique Dependências Manualmente* - Use `$inject` para identificar manualmente suas dependências de componentes do AngularJS. - *Por que?*: Esta técnica espelha a técnica usada por [`ng-annotate`](https://github.com/olov/ng-annotate), a qual eu recomendo para automatizar a criação de dependências seguras para minificação. Se `ng-annotate` detectar que a injeção já foi feita, ela não será duplicada. + **Por que?**: Esta técnica espelha a técnica usada por [`ng-annotate`](https://github.com/olov/ng-annotate), a qual eu recomendo para automatizar a criação de dependências seguras para minificação. Se `ng-annotate` detectar que a injeção já foi feita, ela não será duplicada. - *Por que?*: Isto salvaguarda suas dependências de serem vulneráveis a problemas de minificação quando parâmetros podem ser encurtados. Por exemplo, `common` e `dataservice` podem se tornar `a` ou `b` e não serem encontrados pelo AngularJS. + **Por que?**: Isto salvaguarda suas dependências de serem vulneráveis a problemas de minificação quando parâmetros podem ser encurtados. Por exemplo, `common` e `dataservice` podem se tornar `a` ou `b` e não serem encontrados pelo AngularJS. - *Por que?*: Evite criar dependências in-line pois listas longas podem ser difíceis de ler no array. Além disso, pode ser confuso o array ser uma série de strings enquanto o último item é a função do componente. + **Por que?**: Evite criar dependências in-line pois listas longas podem ser difíceis de ler no array. Além disso, pode ser confuso o array ser uma série de strings enquanto o último item é a função do componente. ```javascript /* evite */ @@ -1430,9 +1430,9 @@ ou *Identifique Dependências do Resolvedor de Rotas Manualmente* - Use $inject para identificar manualmente as dependências do seu resolvedor de rotas para componentes do AngularJS. - *Por que?*: Esta técnica separa a função anônima do resolvedor de rota, tornando-a mais fácil de ler. + **Por que?**: Esta técnica separa a função anônima do resolvedor de rota, tornando-a mais fácil de ler. - *Por que?*: Uma chamada a `$inject` pode facilmente preceder o resolvedor para fazer qualquer dependência segura para minificação. + **Por que?**: Uma chamada a `$inject` pode facilmente preceder o resolvedor para fazer qualquer dependência segura para minificação. ```javascript /* recomendado */ @@ -1463,9 +1463,9 @@ ou *Minificação e Anotação* - Use [ng-annotate](//github.com/olov/ng-annotate) para [Gulp](http://gulpjs.com) ou [Grunt](http://gruntjs.com) e comente as funções que precisam de injeção de dependência automatizada usando `/** @ngInject */` - *Por que?*: Isso protege seu código de qualquer dependência que pode não estar usando práticas seguras para minificação. + **Por que?**: Isso protege seu código de qualquer dependência que pode não estar usando práticas seguras para minificação. - *Por que?*: [`ng-min`](https://github.com/btford/ngmin) está deprecated. + **Por que?**: [`ng-min`](https://github.com/btford/ngmin) está deprecated. > Eu prefiro Gulp pois sinto que é mais fácil de escrever, de ler, e de debugar. @@ -1532,14 +1532,14 @@ ou *Minificação e Anotação* } ``` - > Nota: Apartir do Angular 1.3 use o parâmetro `ngStrictDi` da diretiva [`ngApp`](https://docs.angularjs.org/api/ng/directive/ngApp). Quando presente, o injetor será criado no modo "strict-di" fazendo com que a aplicação falhe ao tentar invocar funções que não usem anotação explícita de função (elas podem não ser seguras para minificação). Informação de debug será logada no console para ajudar a rastrear o código ofensivo. + > Nota: A partir do Angular 1.3 use o parâmetro `ngStrictDi` da diretiva [`ngApp`](https://docs.angularjs.org/api/ng/directive/ngApp). Quando presente, o injetor será criado no modo "strict-di" fazendo com que a aplicação falhe ao tentar invocar funções que não usem anotação explícita de função (elas podem não ser seguras para minificação). Informação de debug será logada no console para ajudar a rastrear o código ofensivo. `` ### Utilize Gulp ou Grunt para o ng-annotate - Utilize [gulp-ng-annotate](https://www.npmjs.org/package/gulp-ng-annotate) ou [grunt-ng-annotate](https://www.npmjs.org/package/grunt-ng-annotate) para tarefas de build automatizadas. Injete `/* @ngInject */` antes de qualquer função que tenha dependências. - *Por que?*: ng-annotate vai capturar todas as dependências, mas as vezes requer dicas utilizando a sintaxe `/* @ngInject */` . + **Por que?**: ng-annotate vai capturar todas as dependências, mas as vezes requer dicas utilizando a sintaxe `/* @ngInject */` . O código abaixo é um exemplo de uma task Gulp utilizando ngAnnotate @@ -1615,7 +1615,7 @@ ou *Coletores de exceção* - Criar um factory que expôe uma interface para capturar e tratar adequadamente as exceções. - *Por que?*: Fornece uma forma consistente de coletar exceções que podem ser lançadas no seu código (ex. durante uma chamada XHR ou uma promessa (promise) que falhou). + **Por que?**: Fornece uma forma consistente de coletar exceções que podem ser lançadas no seu código (ex. durante uma chamada XHR ou uma promessa (promise) que falhou). Nota: O coletor de exceção é bom para coletar e reagir às exceções específicas das chamadas que você sabe que podem ser lançadas. Por exemplo, quando realizar uma chamada XHR que retorna dados de um serviço remoto e você quer coletar qualquer exceção desse serviço, reagindo de uma maneira única. @@ -1645,17 +1645,17 @@ ou *Coletores de exceção* - Gerencie e log todos os erros de routing utilizando o [`$routeChangeError`](https://docs.angularjs.org/api/ngRoute/service/$route#$routeChangeError). - *Por que?*: Fornece uma maneira consistente de gerenciar erros relacionados a routing. + **Por que?**: Fornece uma maneira consistente de gerenciar erros relacionados a routing. - *Por que?*: Potencialmente fornece uma melhor experiência de usuário se um erro de routing ocorrer e você redirecionar o usuário para uma tela amigável com mais detalhes ou opções de recuperação. + **Por que?**: Potencialmente fornece uma melhor experiência de usuário se um erro de routing ocorrer e você redirecionar o usuário para uma tela amigável com mais detalhes ou opções de recuperação. ```javascript /* recomendado */ function handleRoutingErrors() { /** - * Route cancellation: - * On routing error, go to the dashboard. - * Provide an exit clause if it tries to do it twice. + * Cancelamento de rota: + * Quando houver erro no roteamento, vá para o dashboard. + * Forneça uma cláusula de saída se ele tentar fazer isso 2 vezes. */ $rootScope.$on('$routeChangeError', function(event, current, previous, rejection) { @@ -1663,8 +1663,8 @@ ou *Coletores de exceção* 'unknown target'; var msg = 'Error routing to ' + destination + '. ' + (rejection.msg || ''); /** - * Optionally log using a custom service or $log. - * (Don't forget to inject custom service) + * Opcionalmente log usando um serviço customizado ou $log. + * (Não se esqueça de injetar o serviço customizado) */ logger.warning(msg, [current]); } From 1c82ab7b704148ba16638d636320611cf6eb8d89 Mon Sep 17 00:00:00 2001 From: Vinicius Sabadim Fernandes Date: Mon, 3 Aug 2015 15:02:53 -0300 Subject: [PATCH 021/248] Fixing typo --- i18n/PT-BR.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/i18n/PT-BR.md b/i18n/PT-BR.md index 265c80d3..33bd19a0 100644 --- a/i18n/PT-BR.md +++ b/i18n/PT-BR.md @@ -6,7 +6,7 @@ >The [original English version](http://jpapa.me/ngstyles) is the source of truth, as it is maintained and updated first. -Se você procura por um guia de estilo opinativo para sintaxe, convenções e estruturação de aplicações AngularJS, então siga em frente! Estes estilos são baseados em minha experiência com desenvolvimento com [AngularJS](//angularjs.org), apresentações, [cursos de treinamento nae Pluralsight](http://pluralsight.com/training/Authors/Details/john-papa) e trabalhando em equipe. +Se você procura por um guia de estilo opinativo para sintaxe, convenções e estruturação de aplicações AngularJS, então siga em frente! Estes estilos são baseados em minha experiência com desenvolvimento com [AngularJS](//angularjs.org), apresentações, [cursos de treinamento na Pluralsight](http://pluralsight.com/training/Authors/Details/john-papa) e trabalhando em equipe. > Se você gostar deste guia, confira meu curso [Angular Patterns: Clean Code](http://jpapa.me/ngclean) na Pluralsight. From f8d0095c59dec9de7d5f37d65d75e4bc11d43185 Mon Sep 17 00:00:00 2001 From: Vinicius Sabadim Fernandes Date: Mon, 3 Aug 2015 15:50:56 -0300 Subject: [PATCH 022/248] update PT-BR - Spelling Correction --- i18n/PT-BR.md | 46 +++++++++++++++++++++++----------------------- 1 file changed, 23 insertions(+), 23 deletions(-) diff --git a/i18n/PT-BR.md b/i18n/PT-BR.md index 33bd19a0..de37a830 100644 --- a/i18n/PT-BR.md +++ b/i18n/PT-BR.md @@ -1679,13 +1679,13 @@ ou *Nomenclatura* ### Diretrizes de Nomenclatura - - Use nomes consistentes para todos os componentes seguindo um padrão que descreve a funcionalidade do componente e (opcionalmente) seu tipo. Meu padrão recomendado é `característica.tipo.js`. Existem dois nomes para a maioria dos componentes: - * o nome do arquivo (`avengers.controllers.js`) - * o nome de componente registrado pelo Angular (`AvengersController`) + - Use nomes consistentes para todos os componentes seguindo um padrão que descreva a funcionalidade do componente e (opcionalmente) seu tipo. Meu padrão recomendado é `característica.tipo.js`. Existem dois nomes para a maioria dos componentes: + * o nome do arquivo (`avengers.controllers.js`) + * o nome de componente registrado pelo Angular (`AvengersController`) - *Por que?*: As convenções de nomenclatura ajudam a fornecer uma maneira consistente de encontrar algo à primeira vista. Consistência dentro do projeto é vital. Consistência dentro de um time é importante. Consistência em toda a empresa proporciona uma enorme eficiência. + **Por que?**: As convenções de nomenclatura ajudam a fornecer uma maneira consistente de encontrar algo à primeira vista. Consistência dentro do projeto é vital. Consistência dentro de um time é importante. Consistência em toda a empresa proporciona uma enorme eficiência. - *Por que?*: As convenções de nomenclatura deveriam simplesmente te ajudar a encontrar trechos do seu código mais rápido e torná-lo mais fácil de se entender. + **Por que?**: As convenções de nomenclatura deveriam simplesmente te ajudar a encontrar trechos do seu código mais rápido e torná-lo mais fácil de se entender. ### Feature File Names ou *Nome para funcionalidades* @@ -1743,7 +1743,7 @@ ou *Nome para funcionalidades* avenger-profile.directive.spec.js ``` - Nota: Outra convenção comum é nomear arquivos dos controllers sem a palavra `controller` no nome do arquivo como` avengers.js` em vez de `avengers.controller.js`. Todas as outras convenções ainda mantem o uso de um sufixo do tipo. Controllers são o tipo mais comum de componente, portanto isso só economiza digitação e ainda é facilmente identificável. Eu recomendo que você escolha uma convenção que seja mais coerente para sua equipe. + Nota: Outra convenção comum é nomear arquivos dos controllers sem a palavra `controller` no nome do arquivo como` avengers.js` em vez de `avengers.controller.js`. Todas as outras convenções ainda mantêm o uso de um sufixo do tipo. Controllers são o tipo mais comum de componente, portanto isso só economiza digitação e ainda é facilmente identificável. Eu recomendo que você escolha uma convenção que seja mais coerente para sua equipe. ```javascript /** @@ -1759,9 +1759,9 @@ ou *Nome para aquivos de testes* - Nomeie as especificações de testes de forma similar aos componentes que elas testam, com o sufixo `spec`. - *Por que?*: Fornece um modo consistente para identificar rapidamente os componentes. + **Por que?**: Fornece um modo consistente para identificar rapidamente os componentes. - *Por que?*: Fornece padrões de correspondência para o [karma](http://karma-runner.github.io/) ou outros test runners. + **Por que?**: Fornece padrões de correspondência para o [karma](http://karma-runner.github.io/) ou outros test runners. ```javascript /** @@ -1774,13 +1774,13 @@ ou *Nome para aquivos de testes* ``` ### Controller Names -ou *Nome para controllers* +ou *Nomes para controller* - - Use nomes consistentes para todos os controlers nomeados após as sua funcionalidade. Use UpperCamelCase para os controllers, assim como para seus construtores. + - Use nomes consistentes para todos os controllers nomeados após as sua funcionalidade. Use UpperCamelCase para os controllers, assim como para seus construtores. - *Por que?*: Fornece um modo consistente para identificar e referenciar os controllers. + **Por que?**: Fornece um modo consistente para identificar e referenciar os controllers. - *Por que?*: O UpperCamelCase é o modo mais comum para identificar objetos que serão instanciados através de construtores. + **Por que?**: O UpperCamelCase é o modo mais comum para identificar objetos que serão instanciados através de construtores. ```javascript /** @@ -1800,7 +1800,7 @@ ou *sufixo "Controllers"* - Complemente o nome do controller com ou sem o sufixo `Controller`. Escolha uma opção, não ambas. - *Por que?*: O sufixo `Controller` é mais usado e mais descritivo. + **Por que?**: O sufixo `Controller` é mais usado e mais descritivo. ```javascript /** @@ -1829,13 +1829,13 @@ ou *sufixo "Controllers"* ``` ### Factory Names -ou *Nome para factory* +ou *Nomes para factory* - - Use nomes consistentes para todas as factories nomeadas após sua funcionalidade. Use a conveção camelCase para services e factories, e evite prefixos com `$`. + - Use nomes consistentes para todas as factories nomeadas após sua funcionalidade. Use a conveção camelCase para services e factories. Evite prefixos com `$`. - *Por que?*: Fornece um modo consistende de identificar e referenciar rapidamente as factories. + **Por que?**: Fornece um modo consistente de identificar e referenciar rapidamente as factories. - *Por que?*: Evite colisão de nomes com factories e services pré-programadas que usam o prefixo `$`. + **Por que?**: Evite colisão de nomes com factories e services pré-programados que usam o prefixo `$`. ```javascript /** @@ -1851,11 +1851,11 @@ ou *Nome para factory* ``` ### Directive Component Names -ou *Nome para directive* +ou *Nomes para directive* - Use nomes consistentes para todas as directives usando a convenção camelCase. Use um prefixo curto para descrever a área a qual a directive pertence (como prefixo da compania ou do projeto). - *Por que?*: Fornece um modo consistente de identificar e referenciar rapidamente os componentes. + **Por que?**: Fornece um modo consistente de identificar e referenciar rapidamente os componentes. ```javascript /** @@ -1877,18 +1877,18 @@ ou *Módulos* - Quando há vários módulos, o arquivo principal deste módulo é nomeado `app.module.js`, enquanto os módulos dependentes são nomeados de acordo com o que eles representam. Por exemplo, um módulo admin é nomeado `admin.module.js`. Os nomes dos respectivos módulos registrados seriam `app` e `admin`. - *Por que?*: Fornece consistência para múltiplos módulos, e para expansão para grandes aplicações. + **Por que?**: Fornece consistência para múltiplos módulos, e para expansão para grandes aplicações. - *Por que?*: Fornece um modo fácil para automação de tarefas, a fim de carregar todos as definições dos módulos em primeiro lugar, então os demais arquivos (empacotamento). + **Por que?**: Fornece um modo fácil para automação de tarefas, a fim de carregar todos as definições dos módulos em primeiro lugar, então os demais arquivos (empacotamento). ### Configuration ou *Configuração* - Separe a configuração do módulo em seu próprio arquivo, nomeado após o módulo. Um arquivo de configuração para o módulo principal `app` é nomeado `app.config.js` (ou simplesmente `config.js`). Uma configuração para o módulo `admin.module.js` é nomeada `admin.config.js`. - *Por que?*: Separe a configuração do módulo da definição, dos componentes e do código ativo. + **Por que?**: Separa a configuração do módulo da definição, dos componentes e do código ativo. - *Por que?*: Fornece um local identificável para definir as configurações de um módulo. + **Por que?**: Fornece um local identificável para definir as configurações de um módulo. ### Routes ou *Rotas* From a44b1347771ae7eb0312b4d361652d8e9d942bc8 Mon Sep 17 00:00:00 2001 From: John Papa Date: Mon, 3 Aug 2015 21:55:24 -0400 Subject: [PATCH 023/248] jsdoc updated for v2. imitted strict enforcement, but its a good idea --- README.md | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index aaf6b464..cb259d8c 100644 --- a/README.md +++ b/README.md @@ -2712,9 +2712,12 @@ Unit testing helps maintain clean code, as such I included some of my recommenda "disallowSpacesInsideArrayBrackets": "all", "disallowSpacesInsideParentheses": true, - "validateJSDoc": { + "jsDoc": { + "checkAnnotations": true, "checkParamNames": true, - "requireParamTypes": true + "requireParamTypes": true, + "checkReturnTypes": true, + "checkTypes": true }, "disallowMultipleLineBreaks": true, From 0a06e59f4479e4b77da660e7c1b4ad89754ca349 Mon Sep 17 00:00:00 2001 From: Vinicius Sabadim Fernandes Date: Tue, 4 Aug 2015 10:43:03 -0300 Subject: [PATCH 024/248] Translating some words on dependecies chapter --- i18n/PT-BR.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/i18n/PT-BR.md b/i18n/PT-BR.md index 169aaad7..62b463a5 100644 --- a/i18n/PT-BR.md +++ b/i18n/PT-BR.md @@ -1406,7 +1406,7 @@ ou *Identifique Dependências Manualmente* controller: DashboardPanel, }; - DashboardPanel.$inject = ['logger']; // Unreachable + DashboardPanel.$inject = ['logger']; // inacessível function DashboardPanel(logger) { } } @@ -1415,7 +1415,7 @@ ou *Identifique Dependências Manualmente* ```javascript // dentro da definição de diretiva function outer() { - DashboardPanel.$inject = ['logger']; // reachable + DashboardPanel.$inject = ['logger']; // acessível return { controller: DashboardPanel, }; From 9f910cad3986997143de3d1d131df39817e4beae Mon Sep 17 00:00:00 2001 From: John Papa Date: Wed, 5 Aug 2015 08:42:51 -0400 Subject: [PATCH 025/248] karma from gulp --- README.md | 46 +++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 45 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index cb259d8c..9bd99bbc 100644 --- a/README.md +++ b/README.md @@ -2406,7 +2406,51 @@ Unit testing helps maintain clean code, as such I included some of my recommenda *Why?*: Some IDE's are beginning to integrate with Karma, such as [WebStorm](http://www.jetbrains.com/webstorm/) and [Visual Studio](http://visualstudiogallery.msdn.microsoft.com/02f47876-0e7a-4f6c-93f8-1af5d5189225). - *Why?*: Karma works well with task automation leaders such as [Grunt](http://www.gruntjs.com) (with [grunt-karma](https://github.com/karma-runner/grunt-karma)) and [Gulp](http://www.gulpjs.com) (with [gulp-karma](https://github.com/lazd/gulp-karma)). + *Why?*: Karma works well with task automation leaders such as [Grunt](http://www.gruntjs.com) (with [grunt-karma](https://github.com/karma-runner/grunt-karma)) and [Gulp](http://www.gulpjs.com). When using Gulp, use [Karma](https://github.com/karma-runner/karma) directly and not with a plugin as the API can be called directly. + + ```javascript + /// Gulp example with Karma directly + function startTests(singleRun, done) { + var child; + var excludeFiles = []; + var fork = require('child_process').fork; + var karma = require('karma').server; + var serverSpecs = config.serverIntegrationSpecs; + + if (args.startServers) { + log('Starting servers'); + var savedEnv = process.env; + savedEnv.NODE_ENV = 'dev'; + savedEnv.PORT = 8888; + child = fork(config.nodeServer); + } else { + if (serverSpecs && serverSpecs.length) { + excludeFiles = serverSpecs; + } + } + + karma.start({ + configFile: __dirname + '/karma.conf.js', + exclude: excludeFiles, + singleRun: !!singleRun + }, karmaCompleted); + + //////////////// + + function karmaCompleted(karmaResult) { + log('Karma completed'); + if (child) { + log('shutting down the child process'); + child.kill(); + } + if (karmaResult === 1) { + done('karma: tests failed with code ' + karmaResult); + } else { + done(); + } + } + } + ``` ### Stubbing and Spying ###### [Style [Y193](#style-y193)] From 82fa40b40610253cecec8ad4636d0470a121c748 Mon Sep 17 00:00:00 2001 From: John Papa Date: Wed, 5 Aug 2015 08:47:29 -0400 Subject: [PATCH 026/248] formatting --- README.md | 15 ++++++++++++--- 1 file changed, 12 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index 9bd99bbc..9cd17fb5 100644 --- a/README.md +++ b/README.md @@ -246,8 +246,15 @@ While this guide explains the *what*, *why* and *how*, I find it helpful to see *Why?*: A module should only be created once, then retrieved from that point and after. - - Use `angular.module('app', []);` to set a module. - - Use `angular.module('app');` to get a module. + ```javascript + /* recommended */ + + // to set a module + angular.module('app', []); + + // to get a module + angular.module('app'); + ``` ### Named vs Anonymous Functions ###### [Style [Y024](#style-y024)] @@ -2409,7 +2416,9 @@ Unit testing helps maintain clean code, as such I included some of my recommenda *Why?*: Karma works well with task automation leaders such as [Grunt](http://www.gruntjs.com) (with [grunt-karma](https://github.com/karma-runner/grunt-karma)) and [Gulp](http://www.gulpjs.com). When using Gulp, use [Karma](https://github.com/karma-runner/karma) directly and not with a plugin as the API can be called directly. ```javascript - /// Gulp example with Karma directly + /* recommended */ + + // Gulp example with Karma directly function startTests(singleRun, done) { var child; var excludeFiles = []; From d590f617c097ce64e02218c21d9ee3228acd7fa1 Mon Sep 17 00:00:00 2001 From: angelochiello Date: Wed, 5 Aug 2015 15:33:42 +0200 Subject: [PATCH 027/248] [it-IT] PR #472 Updated as PR #472 "karma from gulp" --- i18n/it-IT.md | 48 +++++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 47 insertions(+), 1 deletion(-) diff --git a/i18n/it-IT.md b/i18n/it-IT.md index aea42a6b..2407f504 100644 --- a/i18n/it-IT.md +++ b/i18n/it-IT.md @@ -2409,7 +2409,53 @@ Gli unit test aiutano a mantenere il codice più chiaro, perciò ho incluso alcu *Perché?*: Alcuni IDE cominciano ad integrarsi con Karma, come [WebStorm](http://www.jetbrains.com/webstorm/) e [Visual Studio](http://visualstudiogallery.msdn.microsoft.com/02f47876-0e7a-4f6c-93f8-1af5d5189225). - *Perché?*: Karma lavora bene con leader di automazione di processo quali [Grunt](http://www.gruntjs.com) (con [grunt-karma](https://github.com/karma-runner/grunt-karma)) e [Gulp](http://www.gulpjs.com) (con [gulp-karma](https://github.com/lazd/gulp-karma)). + *Perché?*: Karma lavora bene con leader di automazione di processo quali [Grunt](http://www.gruntjs.com) (con [grunt-karma](https://github.com/karma-runner/grunt-karma)) e [Gulp](http://www.gulpjs.com). Quando usi Gulp, usa [Karma](https://github.com/karma-runner/karma) direttamente e non con un plugin dal momento che le API possono essere richiamate direttamente. + + ```javascript + /* consigliato */ + + // Esempio di Gulp che usa direttamente Karma + function startTests(singleRun, done) { + var child; + var excludeFiles = []; + var fork = require('child_process').fork; + var karma = require('karma').server; + var serverSpecs = config.serverIntegrationSpecs; + + if (args.startServers) { + log('Starting servers'); + var savedEnv = process.env; + savedEnv.NODE_ENV = 'dev'; + savedEnv.PORT = 8888; + child = fork(config.nodeServer); + } else { + if (serverSpecs && serverSpecs.length) { + excludeFiles = serverSpecs; + } + } + + karma.start({ + configFile: __dirname + '/karma.conf.js', + exclude: excludeFiles, + singleRun: !!singleRun + }, karmaCompleted); + + //////////////// + + function karmaCompleted(karmaResult) { + log('Karma completed'); + if (child) { + log('shutting down the child process'); + child.kill(); + } + if (karmaResult === 1) { + done('karma: tests failed with code ' + karmaResult); + } else { + done(); + } + } + } + ``` ### Stubbing e Spying ###### [Stile [Y193](#stile-y193)] From d26c1f06373a7fd1737ec9ce1e4736fda4cbcca1 Mon Sep 17 00:00:00 2001 From: angelochiello Date: Wed, 5 Aug 2015 15:37:38 +0200 Subject: [PATCH 028/248] [it.IT] PR #473 Updated as PR #473 "formatting" --- i18n/it-IT.md | 13 ++++++++++--- 1 file changed, 10 insertions(+), 3 deletions(-) diff --git a/i18n/it-IT.md b/i18n/it-IT.md index 2407f504..d299de58 100644 --- a/i18n/it-IT.md +++ b/i18n/it-IT.md @@ -249,9 +249,16 @@ Invece usa la più semplice sintassi setter. - Setta solo una volta e prendi (get) per tutte le altre istanze. *Perché?*: Un modulo dovrebbe essere creato solamente una volta, quindi recuperato da lì in avanti. - - - Usa `angular.module('app', []);` per settare un modulo. - - Usa `angular.module('app');` per prendere (get) un modulo. + + ```javascript + /* consigliato */ + + // per creare un modulo + angular.module('app', []); + + // per recuperare un modulo + angular.module('app'); + ``` ### Funzioni con un nome vs funzioni anonime ###### [Stile [Y024](#stile-y024)] From 87457d726cfbf8c51e62b0dad525446b4bfb8678 Mon Sep 17 00:00:00 2001 From: John Papa Date: Wed, 5 Aug 2015 21:47:39 -0400 Subject: [PATCH 029/248] made names more consistent --- README.md | 24 ++++++++++++------------ 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/README.md b/README.md index 9cd17fb5..f3f9e811 100644 --- a/README.md +++ b/README.md @@ -475,11 +475,11 @@ While this guide explains the *what*, *why* and *how*, I find it helpful to see ```javascript /* recommended */ - function Sessions(dataservice) { + function Sessions(sessionDataService) { var vm = this; vm.gotoSession = gotoSession; - vm.refresh = dataservice.refresh; // 1 liner is OK + vm.refresh = sessionDataService.refresh; // 1 liner is OK vm.search = search; vm.sessions = []; vm.title = 'Sessions'; @@ -505,7 +505,7 @@ While this guide explains the *what*, *why* and *how*, I find it helpful to see * avoid * Using function expressions. */ - function Avengers(dataservice, logger) { + function Avengers(avengersService, logger) { var vm = this; vm.avengers = []; vm.title = 'Avengers'; @@ -517,7 +517,7 @@ While this guide explains the *what*, *why* and *how*, I find it helpful to see } var getAvengers = function() { - return dataservice.getAvengers().then(function(data) { + return avengersService.getAvengers().then(function(data) { vm.avengers = data; return vm.avengers; }); @@ -537,7 +537,7 @@ While this guide explains the *what*, *why* and *how*, I find it helpful to see * Using function declarations * and bindable members up top. */ - function Avengers(dataservice, logger) { + function Avengers(avengersService, logger) { var vm = this; vm.avengers = []; vm.getAvengers = getAvengers; @@ -552,7 +552,7 @@ While this guide explains the *what*, *why* and *how*, I find it helpful to see } function getAvengers() { - return dataservice.getAvengers().then(function(data) { + return avengersService.getAvengers().then(function(data) { vm.avengers = data; return vm.avengers; }); @@ -615,7 +615,7 @@ While this guide explains the *what*, *why* and *how*, I find it helpful to see function checkCredit() { return creditService.isOrderTotalOk(vm.total) .then(function(isOk) { vm.isCreditOk = isOk; }) - .catch(showServiceError); + .catch(showError); }; } ``` @@ -1626,14 +1626,14 @@ While this guide explains the *what*, *why* and *how*, I find it helpful to see .controller('Avengers', Avengers); /* @ngInject */ - function Avengers(storageService, avengerService) { + function Avengers(storage, avengerService) { var vm = this; vm.heroSearch = ''; vm.storeHero = storeHero; function storeHero() { var hero = avengerService.find(vm.heroSearch); - storageService.save(hero.name, hero); + storage.save(hero.name, hero); } } ``` @@ -1646,18 +1646,18 @@ While this guide explains the *what*, *why* and *how*, I find it helpful to see .controller('Avengers', Avengers); /* @ngInject */ - function Avengers(storageService, avengerService) { + function Avengers(storage, avengerService) { var vm = this; vm.heroSearch = ''; vm.storeHero = storeHero; function storeHero() { var hero = avengerService.find(vm.heroSearch); - storageService.save(hero.name, hero); + storage.save(hero.name, hero); } } - Avengers.$inject = ['storageService', 'avengerService']; + Avengers.$inject = ['storage', 'avengerService']; ``` Note: If `ng-annotate` detects injection has already been made (e.g. `@ngInject` was detected), it will not duplicate the `$inject` code. From ee8d6600115f98debb4ea74f5f9789bcb0b3b3ec Mon Sep 17 00:00:00 2001 From: John Papa Date: Wed, 5 Aug 2015 21:52:38 -0400 Subject: [PATCH 030/248] added more clarity to service naming --- README.md | 28 ++++++++++++++++++++++++++-- 1 file changed, 26 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index f3f9e811..0d041686 100644 --- a/README.md +++ b/README.md @@ -1979,15 +1979,19 @@ While this guide explains the *what*, *why* and *how*, I find it helpful to see function AvengersController() { } ``` -### Factory Names +### Factory and Service Names ###### [Style [Y125](#style-y125)] - - Use consistent names for all factories named after their feature. Use camel-casing for services and factories. Avoid prefixing factories and services with `$`. + - Use consistent names for all factories and services named after their feature. Use camel-casing for services and factories. Avoid prefixing factories and services with `$`. Only suffix service and factories with `Service` when it is not clear what they are (i.e. when they are nouns). *Why?*: Provides a consistent way to quickly identify and reference factories. *Why?*: Avoids name collisions with built-in factories and services that use the `$` prefix. + *Why?*: Clear service names such as `logger` do not require a suffix. + + *Why?*: Service names such as `avengers` are nouns and require a suffix and should be named `avengersService`. + ```javascript /** * recommended @@ -2001,6 +2005,26 @@ While this guide explains the *what*, *why* and *how*, I find it helpful to see function logger() { } ``` + ```javascript + /** + * recommended + */ + + // credit.service.js + angular + .module + .factory('creditService', creditService); + + function creditService() { } + + // credit.service.js + angular + .module + .service('customersService', customersService); + + function customersService() { } + ``` + ### Directive Component Names ###### [Style [Y126](#style-y126)] From 1f7a4ccc93884ee91f2dd3b91a52c355c82d8347 Mon Sep 17 00:00:00 2001 From: vinicius-sabadim Date: Wed, 5 Aug 2015 23:09:25 -0300 Subject: [PATCH 031/248] Translate for the topic 'LIFT' --- i18n/PT-BR.md | 34 +++++++++++++++++++++------------- 1 file changed, 21 insertions(+), 13 deletions(-) diff --git a/i18n/PT-BR.md b/i18n/PT-BR.md index 62b463a5..9fd7b198 100644 --- a/i18n/PT-BR.md +++ b/i18n/PT-BR.md @@ -1898,24 +1898,28 @@ ou *Rotas* **[De volta ao topo](#tabela-de-conte%C3%BAdo)** ## Application Structure LIFT Principle +ou *Princípio da estrutura LIFT na aplicação* + ### LIFT - - Structure your app such that you can `L`ocate your code quickly, `I`dentify the code at a glance, keep the `F`lattest structure you can, and `T`ry to stay DRY. The structure should follow these 4 basic guidelines. + - Estruture a sua aplicação de um modo onde você possa: `L`ocate (Localizar) seu código rapidamente, `I`dentify (Identificar) o código facilmente, manter a estrutura a mais `F`lattest (Plana) que você conseguir, e `T`ry (Tentar) seguir o conceito de DRY (Don't Repeat Yourself - Não repita a si mesmo). A estrutura deve seguir essas 4 regras básicas. - *Why LIFT?*: Provides a consistent structure that scales well, is modular, and makes it easier to increase developer efficiency by finding code quickly. Another way to check your app structure is to ask yourself: How quickly can you open and work in all of the related files for a feature? + **Por que LIFT?**: Fornece uma estrutura consistente que escala bem, é modular, e torna mais fácil para aumentar a eficiência ao desenvolver, pois encontra-se o código rapidamente. Outra forma de verificar a estrutura da sua aplicação é se perguntar: Quão rápido é para você abrir e trabalhar em todos os arquivos relacionados com uma funcionalidade? - When I find my structure is not feeling comfortable, I go back and revisit these LIFT guidelines + Quando estou sentindo que não estou confortável com a minha estrutura, eu volto e revisito as regras do LIFT - 1. `L`ocating our code is easy - 2. `I`dentify code at a glance - 3. `F`lat structure as long as we can - 4. `T`ry to stay DRY (Don’t Repeat Yourself) or T-DRY + 1. `L`ocating (Localizar) nosso código é fácil + 2. `I`dentify (Identificar) o código rapidamente + 3. `F`lat (Plano) - Deixar a estrutura a mais plana que conseguirmos + 4. `T`ry (Tentar) se manter DRY (Don’t Repeat Yourself - Não repita a si mesmo) ou T-DRY ### Locate +ou *Localizar* - Make locating your code intuitive, simple and fast. + - Torne a localização do seu código: intuitiva, simples e rápida. - *Why?*: I find this to be super important for a project. If the team cannot find the files they need to work on quickly, they will not be able to work as efficiently as possible, and the structure needs to change. You may not know the file name or where its related files are, so putting them in the most intuitive locations and near each other saves a ton of time. A descriptive folder structure can help with this. + **Por que?**: Acho que isso é super importante para um projeto. Se a equipe não pode encontrar rapidamente os arquivos que precisam para trabalhar, eles não serão capazes de trabalhar da forma mais eficiente possível, e a estrutura precisa mudar. Você pode não saber o nome do arquivo ou onde os arquivos relacionados estão, por isso, colocando-os nos locais mais intuitivos e próximos uns dos outros, economiza uma boa parcela de tempo. Uma pasta descrevendo a estrutura pode ajudá-lo. ``` /bower_components @@ -1936,22 +1940,26 @@ ou *Rotas* ``` ### Identify +ou *Identificar* - - When you look at a file you should instantly know what it contains and represents. + - Quando você olhar para um arquivo, prontamente você deve saber o que ele contém e o que representa. - *Why?*: You spend less time hunting and pecking for code, and become more efficient. If this means you want longer file names, then so be it. Be descriptive with file names and keeping the contents of the file to exactly 1 component. Avoid files with multiple controllers, multiple services, or a mixture. There are deviations of the 1 per file rule when I have a set of very small features that are all related to each other, they are still easily identifiable. + **Por que?**: Você gasta menos tempo caçando e procurando por código, e torna-se mais eficiente. Se isso significa nomes de arquivos mais longos, então que assim seja. Seja descritivo nos nomes de arquivos e mantenha o conteúdo do arquivo somente com 1 componente. Evite arquivos com vários controladores (controllers), múltiplos serviços (services), ou uma mistura. Existem exceções de 1 regra por arquivo quando eu tenho um conjunto de recursos muito pequenos que estão todos relacionados uns aos outros, eles ainda são facilmente identificáveis. ### Flat +ou *Plano* - - Keep a flat folder structure as long as possible. When you get to 7+ files, begin considering separation. + - Mantenha uma estrutura plana de pastas o máximo que for possível. Quando você tiver 7 arquivos ou mais, comece a considerar separá-los. - *Why?*: Nobody wants to search 7 levels of folders to find a file. Think about menus on web sites … anything deeper than 2 should take serious consideration. In a folder structure there is no hard and fast number rule, but when a folder has 7-10 files, that may be time to create subfolders. Base it on your comfort level. Use a flatter structure until there is an obvious value (to help the rest of LIFT) in creating a new folder. + **Por que?**: Ninguém quer pesquisar 7 níveis de pastas para encontrar um arquivo. Pense sobre menus em web sites - nada mais profundo do que 2 níveis deve ser levado a sério. Em uma estrutura de pastas não há nenhum número mágico, mas quando uma pasta tem 7-10 arquivos, pode ser a hora de criar subpastas. Baseie-se no seu nível de conforto. Use uma estrutura mais plana até que haja um valor óbvio (para ajudar o resto do LIFT) na criação de uma nova pasta. ### T-DRY (Try to Stick to DRY) +ou *Tente manter-se em DRY - Não repita a si mesmo* - Be DRY, but don't go nuts and sacrifice readability. + - Mantenha-se DRY, mas não fique louco e sacrifique a legibilidade. - *Why?*: Being DRY is important, but not crucial if it sacrifices the others in LIFT, which is why I call it T-DRY. I don’t want to type session-view.html for a view because, well, it’s obviously a view. If it is not obvious or by convention, then I name it. + **Por que?**: Não ficar se repetindo é importante, mas não é crucial se acabar sacrificando os outros itens do LIFT, por isso eu chamo de T-DRY (Tente não ficar se repetindo). Eu não quero escrever session-view.html para uma view, porque obviamente é uma view. Se não é óbvio ou uma convenção, então eu renomeio. **[De volta ao topo](#tabela-de-conte%C3%BAdo)** From bbe0827ac236ddcffe05f270e4470ef0ba695f8c Mon Sep 17 00:00:00 2001 From: vinicius-sabadim Date: Wed, 5 Aug 2015 23:22:36 -0300 Subject: [PATCH 032/248] Forgot some phrases without translate --- i18n/PT-BR.md | 2 -- 1 file changed, 2 deletions(-) diff --git a/i18n/PT-BR.md b/i18n/PT-BR.md index 9fd7b198..35f9cb41 100644 --- a/i18n/PT-BR.md +++ b/i18n/PT-BR.md @@ -1916,7 +1916,6 @@ ou *Princípio da estrutura LIFT na aplicação* ### Locate ou *Localizar* - - Make locating your code intuitive, simple and fast. - Torne a localização do seu código: intuitiva, simples e rápida. **Por que?**: Acho que isso é super importante para um projeto. Se a equipe não pode encontrar rapidamente os arquivos que precisam para trabalhar, eles não serão capazes de trabalhar da forma mais eficiente possível, e a estrutura precisa mudar. Você pode não saber o nome do arquivo ou onde os arquivos relacionados estão, por isso, colocando-os nos locais mais intuitivos e próximos uns dos outros, economiza uma boa parcela de tempo. Uma pasta descrevendo a estrutura pode ajudá-lo. @@ -1956,7 +1955,6 @@ ou *Plano* ### T-DRY (Try to Stick to DRY) ou *Tente manter-se em DRY - Não repita a si mesmo* - - Be DRY, but don't go nuts and sacrifice readability. - Mantenha-se DRY, mas não fique louco e sacrifique a legibilidade. **Por que?**: Não ficar se repetindo é importante, mas não é crucial se acabar sacrificando os outros itens do LIFT, por isso eu chamo de T-DRY (Tente não ficar se repetindo). Eu não quero escrever session-view.html para uma view, porque obviamente é uma view. Se não é óbvio ou uma convenção, então eu renomeio. From b7f31527cc370ca50d2252be8206428f0adc3ac9 Mon Sep 17 00:00:00 2001 From: angelochiello Date: Thu, 6 Aug 2015 14:44:23 +0200 Subject: [PATCH 033/248] [it-IT] PR #476 Updated as PR #476 "Fix/naming" --- i18n/it-IT.md | 52 +++++++++++++++++++++++++++++++++++++-------------- 1 file changed, 38 insertions(+), 14 deletions(-) diff --git a/i18n/it-IT.md b/i18n/it-IT.md index d299de58..0a9558c8 100644 --- a/i18n/it-IT.md +++ b/i18n/it-IT.md @@ -479,11 +479,11 @@ Invece usa la più semplice sintassi setter. ```javascript /* consigliato */ - function Sessions(dataservice) { + function Sessions(sessionDataService) { var vm = this; vm.gotoSession = gotoSession; - vm.refresh = dataservice.refresh; // codice di 1 liena è OK + vm.refresh = sessionDataService.refresh; // codice di 1 liena è OK vm.search = search; vm.sessions = []; vm.title = 'Sessions'; @@ -509,7 +509,7 @@ Invece usa la più semplice sintassi setter. * evitare * Uso di espressioni di funzione. */ - function Avengers(dataservice, logger) { + function Avengers(avengersService, logger) { var vm = this; vm.avengers = []; vm.title = 'Avengers'; @@ -521,7 +521,7 @@ Invece usa la più semplice sintassi setter. } var getAvengers = function() { - return dataservice.getAvengers().then(function(data) { + return avengersService.getAvengers().then(function(data) { vm.avengers = data; return vm.avengers; }); @@ -541,7 +541,7 @@ Invece usa la più semplice sintassi setter. * Usare dichiarazione di funzione * e membri che fanno in binding in alto. */ - function Avengers(dataservice, logger) { + function Avengers(avengersService, logger) { var vm = this; vm.avengers = []; vm.getAvengers = getAvengers; @@ -556,7 +556,7 @@ Invece usa la più semplice sintassi setter. } function getAvengers() { - return dataservice.getAvengers().then(function(data) { + return avengersService.getAvengers().then(function(data) { vm.avengers = data; return vm.avengers; }); @@ -618,7 +618,7 @@ Invece usa la più semplice sintassi setter. function checkCredit() { return creditService.isOrderTotalOk(vm.total) .then(function(isOk) { vm.isCreditOk = isOk; }) - .catch(showServiceError); + .catch(showError); }; } ``` @@ -1630,14 +1630,14 @@ Invece usa la più semplice sintassi setter. .controller('Avengers', Avengers); /* @ngInject */ - function Avengers(storageService, avengerService) { + function Avengers(storage, avengerService) { var vm = this; vm.heroSearch = ''; vm.storeHero = storeHero; function storeHero(){ var hero = avengerService.find(vm.heroSearch); - storageService.save(hero.name, hero); + storage.save(hero.name, hero); } } ``` @@ -1650,18 +1650,18 @@ Invece usa la più semplice sintassi setter. .controller('Avengers', Avengers); /* @ngInject */ - function Avengers(storageService, avengerService) { + function Avengers(storage, avengerService) { var vm = this; vm.heroSearch = ''; vm.storeHero = storeHero; function storeHero(){ var hero = avengerService.find(vm.heroSearch); - storageService.save(hero.name, hero); + storage.save(hero.name, hero); } } - Avengers.$inject = ['storageService', 'avengerService']; + Avengers.$inject = ['storage', 'avengerService']; ``` Nota: Se `ng-annotate` rileva che l'iniezione è già stata fatta (p.e. `@ngInject` è stato rilevato), non duplicherà il codice di `$inject`. @@ -1982,14 +1982,18 @@ Invece usa la più semplice sintassi setter. function AvengersController(){ } ``` -### Nomi delle factory +### Nomi delle factory e dei service ###### [Stile [Y125](#stile-y125)] - - Usa una nomenclatura consistente per tutte le factory dando i nomi a seguito delle loro funzionalità. Usa il camel-case per service e factory. Evita di pre-nominare factory e service con `$` + - Usa una nomenclatura consistente per tutte le factory e i service dando i nomi a seguito delle loro funzionalità. Usa il camel-case per service e factory. Evita di pre-nominare factory e service con `$`. Aggiungi il suffisso `Service` a service e factory soltanto quando non è chiaro cosa siano (p. es. quando si tratta di nomi). *Perché?*: Fornisce un modo consistente per identificare facilmente e referenziare le factory. *Perché?*: Evita collisione di nomi con factory e servizi di Angular esistenti che usano il prefisso `$`. + + *Perché?*: Service con nomi evidenti quali `logger` on richiedono il suffisso. + + *Perché?*: Nomi di service quali `avengers` sono nomi, richiedono in suffisso e dovrebbero essere nominati `avengersService`. ```javascript /** @@ -2004,6 +2008,26 @@ Invece usa la più semplice sintassi setter. function logger(){ } ``` + ```javascript + /** + * consigliato + */ + + // credit.service.js + angular + .module + .factory('creditService', creditService); + + function creditService() { } + + // credit.service.js + angular + .module + .service('customersService', customersService); + + function customersService() { } + ``` + ### Nomi dei componenti directive ###### [Stile [Y126](#stile-y126)] From a4791466571fa183da1c1b059f251ef0cb6aa8ab Mon Sep 17 00:00:00 2001 From: Yannick Baron Date: Wed, 12 Aug 2015 12:04:25 +0900 Subject: [PATCH 034/248] fixed minor grammatical mistake. #482 --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 0d041686..6c61ffca 100644 --- a/README.md +++ b/README.md @@ -2320,7 +2320,7 @@ While this guide explains the *what*, *why* and *how*, I find it helpful to see - Inject code into [module configuration](https://docs.angularjs.org/guide/module#module-loading-dependencies) that must be configured before running the angular app. Ideal candidates include providers and constants. - *Why?*: This makes it easier to have a less places for configuration. + *Why?*: This makes it easier to have less places for configuration. ```javascript angular From 5436d46d926e68d299d826e8a23e6a84dcf2c2b9 Mon Sep 17 00:00:00 2001 From: zach_lysobey Date: Thu, 13 Aug 2015 09:29:32 -0400 Subject: [PATCH 035/248] Fix typo in README --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 6c61ffca..3f5ef258 100644 --- a/README.md +++ b/README.md @@ -1610,7 +1610,7 @@ While this guide explains the *what*, *why* and *how*, I find it helpful to see ### ng-annotate ###### [Style [Y100](#style-y100)] - - Use [ng-annotate](//github.com/olov/ng-annotate) for [Gulp](http://gulpjs.com) or [Grunt](http://gruntjs.com) and comment functions that need automated dependency injection using `/** @ngInject */` + - Use [ng-annotate](//github.com/olov/ng-annotate) for [Gulp](http://gulpjs.com) or [Grunt](http://gruntjs.com) and comment functions that need automated dependency injection using `/* @ngInject */` *Why?*: This safeguards your code from any dependencies that may not be using minification-safe practices. From 0a042edd20642b15fd7cb7b05d798dcaae8976ea Mon Sep 17 00:00:00 2001 From: Johannes Weber Date: Fri, 14 Aug 2015 11:21:14 +0200 Subject: [PATCH 036/248] fix table of contents anchor links in de-DE translation resolved issue #486 --- i18n/de-DE.md | 46 +++++++++++++++++++++++----------------------- 1 file changed, 23 insertions(+), 23 deletions(-) diff --git a/i18n/de-DE.md b/i18n/de-DE.md index 7eba3555..eb60d867 100644 --- a/i18n/de-DE.md +++ b/i18n/de-DE.md @@ -29,36 +29,36 @@ Während diese Anleitung das *Was*, *Warum* und *Wie* erklärt, finde ich es ebe 1. [Single Responsibility](#single-responsibility) 1. [IIFE](#iife) - 1. [Module](#modules) - 1. [Controller](#controllers) + 1. [Module](#module) + 1. [Controller](#controller) 1. [Services](#services) 1. [Factories](#factories) - 1. [Dataservices](#data-services) - 1. [Direktiven](#directives) - 1. [Promises für einen Controller auflösen](#resolving-promises-for-a-controller) - 1. [Manuelle Code-Anmerkungen für das Einfügen von Abhängigkeiten (Dependency Injection)](#manual-annotating-for-dependency-injection) - 1. [Minifizierung und Code-Anmerkungen](#minification-and-annotation) - 1. [Fehlerbehandlung](#exception-handling) - 1. [Namensgebung](#naming) - 1. [Anwendungsstruktur: LIFT Prinzip](#application-structure-lift-principle) - 1. [Anwendungsstruktur](#application-structure) - 1. [Modularität](#modularity) - 1. [Startlogik](#startup-logic) + 1. [Datenservices](#datenservices) + 1. [Direktiven](#direktiven) + 1. [Promises für einen Controller auflösen](#promises-für-einen-controller-auflösen) + 1. [Manuelle Code-Anmerkungen für das Einfügen von Abhängigkeiten (Dependency Injection)](#manuelle-code-anmerkungen-für-das-einfügen-von-abhängigkeiten-dependency-injection) + 1. [Minifizierung und Code-Anmerkungen](#minifizierung-und-code-anmerkungen) + 1. [Fehlerbehandlung](#fehlerbehandlung) + 1. [Namensgebung](#namensgebung) + 1. [Anwendungsstruktur: LIFT Prinzip](#anwendungsstruktur-das-lift-prinzip) + 1. [Anwendungsstruktur](#anwendungsstruktur) + 1. [Modularität](#modularität) + 1. [Startlogik](#startlogik) 1. [Angular $ Wrapper Services](#angular--wrapper-services) - 1. [Testen](#testing) - 1. [Animationen](#animations) - 1. [Kommentare](#comments) + 1. [Testen](#testen) + 1. [Animationen](#animationen) + 1. [Kommentare](#kommentare) 1. [JS Hint](#js-hint) 1. [JSCS](#jscs) - 1. [Konstanten](#constants) - 1. [Dateitemplates und Snippets](#file-templates-and-snippets) + 1. [Konstanten](#konstanten) + 1. [Dateitemplates und Snippets](#dateitemplates-und-snippets) 1. [Yeoman Generator](#yeoman-generator) 1. [Routing](#routing) - 1. [Automatisierung von Aufgaben](#task-automation) - 1. [Filter](#filters) - 1. [Angular Dokumentation](#angular-docs) - 1. [Beiträge](#contributing) - 1. [Lizenz](#license) + 1. [Automatisierung von Aufgaben](#automatisierung-von-aufgaben) + 1. [Filter](#filter) + 1. [Angular Dokumentation](#angular-dokumentation) + 1. [Beiträge](#beiträge) + 1. [Lizenz](#lizenz) ## Single Responsibility From 839e2dd20abde78f8978228ad388df44fe3d43e3 Mon Sep 17 00:00:00 2001 From: vinicius-sabadim Date: Mon, 17 Aug 2015 16:32:14 -0300 Subject: [PATCH 037/248] Translate in pt-br for the topic 'application structure' --- i18n/PT-BR.md | 33 ++++++++++++++++++--------------- 1 file changed, 18 insertions(+), 15 deletions(-) diff --git a/i18n/PT-BR.md b/i18n/PT-BR.md index 35f9cb41..22ef8192 100644 --- a/i18n/PT-BR.md +++ b/i18n/PT-BR.md @@ -1962,34 +1962,37 @@ ou *Tente manter-se em DRY - Não repita a si mesmo* **[De volta ao topo](#tabela-de-conte%C3%BAdo)** ## Application Structure +ou *Estrutura da aplicação* ### Overall Guidelines +ou *Orientações gerais* - - Have a near term view of implementation and a long term vision. In other words, start small and but keep in mind on where the app is heading down the road. All of the app's code goes in a root folder named `app`. All content is 1 feature per file. Each controller, service, module, view is in its own file. All 3rd party vendor scripts are stored in another root folder and not in the `app` folder. I didn't write them and I don't want them cluttering my app (`bower_components`, `scripts`, `lib`). + - Tenha uma visão de curto prazo da implementação e uma visão de longo prazo. Em outras palavras, comece pequeno, mas tenha em mente o caminho que o aplicativo pode tomar. Todos do código do aplicativo vão em uma pasta raiz chamada `app`. Todo o conteúdo é feito com um recurso por arquivo. Cada controlador (controller), serviço (service), módulo (module), visão (view) está em seu próprio arquivo. Todos os scripts de terceiros são armazenados em uma outra pasta raiz e não na pasta `app`. Não foi eu que escrevi esses scripts, então eu não quero que eles baguncem meu aplicativo (`bower_components`,` scripts`, `lib`). - Note: Find more details and reasoning behind the structure at [this original post on application structure](http://www.johnpapa.net/angular-app-structuring-guidelines/). + Nota: Encontre mais detalhes sobre essa estrutura em [esse post original sobre a estrutura da aplicação](http://www.johnpapa.net/angular-app-structuring-guidelines/). ### Layout - - Place components that define the overall layout of the application in a folder named `layout`. These may include a shell view and controller may act as the container for the app, navigation, menus, content areas, and other regions. + - Coloque os componentes que definem o layout geral do aplicativo em uma pasta chamada `layout`. Eles podem incluir uma view e uma controller que agem como recipiente para o app, navegação, menus, áreas de conteúdo, e outras regiões. - *Why?*: Organizes all layout in a single place re-used throughout the application. + **Por que?**: Organize todos os layouts em um único lugar reutilizado em toda a aplicação. ### Folders-by-Feature Structure +ou *Estrutura de Pastas-por-Recurso* - - Create folders named for the feature they represent. When a folder grows to contain more than 7 files, start to consider creating a folder for them. Your threshold may be different, so adjust as needed. + - Crie pastas nomeadas para cada recurso que elas representam. Quando uma pasta cresce ao ponto de conter mais de 7 arquivos, comece considerar a criação de uma pasta para eles. O seu limite pode ser diferente, por isso, ajuste conforme necessário. - *Why?*: A developer can locate the code, identify what each file represents at a glance, the structure is flat as can be, and there is no repetitive nor redundant names. + **Por que?**: O desenvolvedor pode localizar o código, identificar o que cada arquivo representa em resumo, a estrutura é plana como deve ser, e não há nenhum nome repetido ou redundante. - *Why?*: The LIFT guidelines are all covered. + **Por que?**: As orientações LIFT estão todas sendo respeitadas. - *Why?*: Helps reduce the app from becoming cluttered through organizing the content and keeping them aligned with the LIFT guidelines. + **Por que?**: Ajuda a reduzir o app de tornar-se desordenado através da organização do conteúdo e mantêm alinhado com as diretrizes LIFT. - *Why?*: When there are a lot of files (10+) locating them is easier with a consistent folder structures and more difficult in flat structures. + **Por que?**: Quando há um grande número de arquivos (10+) localizá-los é mais fácil com estruturas de pastas consistentes e mais difícil em estruturas planas. ```javascript /** - * recommended + * recomendado */ app/ @@ -2025,15 +2028,15 @@ ou *Tente manter-se em DRY - Não repita a si mesmo* session-detail.controller.js ``` - ![Sample App Structure](https://raw.githubusercontent.com/johnpapa/angularjs-styleguide/master/assets/modularity-2.png) + ![Exemplo de estrutura na aplicação](https://raw.githubusercontent.com/johnpapa/angularjs-styleguide/master/assets/modularity-2.png) - Note: Do not use structuring using folders-by-type. This requires moving to multiple folders when working on a feature and gets unwieldy quickly as the app grows to 5, 10 or 25+ views and controllers (and other features), which makes it more difficult than folder-by-feature to locate files. + Nota: Não estruture seu aplicativo usando pastas-por-tipo. Isto requer alternar entre várias pastas ao trabalhar em um recurso e fica difícil de manejar quando o aplicativo cresce rapidamente para 5, 10 ou 25+ views e controllers (e outros recursos), o que torna mais difícil do que pasta-por-recurso para localizar arquivos. ```javascript /* - * avoid - * Alternative folders-by-type. - * I recommend "folders-by-feature", instead. + * evite + * Alternativa pastas-por-tipo. + * Eu recomendo "pastas-por-recurso". */ app/ From 1e2ca801338209d8f47b2694c4b7fc6b88fa5cad Mon Sep 17 00:00:00 2001 From: vinicius-sabadim Date: Mon, 17 Aug 2015 16:35:56 -0300 Subject: [PATCH 038/248] Better translation --- i18n/PT-BR.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/i18n/PT-BR.md b/i18n/PT-BR.md index 22ef8192..ce166365 100644 --- a/i18n/PT-BR.md +++ b/i18n/PT-BR.md @@ -1986,7 +1986,7 @@ ou *Estrutura de Pastas-por-Recurso* **Por que?**: As orientações LIFT estão todas sendo respeitadas. - **Por que?**: Ajuda a reduzir o app de tornar-se desordenado através da organização do conteúdo e mantêm alinhado com as diretrizes LIFT. + **Por que?**: Através da organização do conteúdo, ajuda a reduzir o app de tornar-se desordenado e mantêm alinhado com as diretrizes LIFT. **Por que?**: Quando há um grande número de arquivos (10+) localizá-los é mais fácil com estruturas de pastas consistentes e mais difícil em estruturas planas. From d99b3a4da6615dff84dc96cc3ea0788a4b58fc71 Mon Sep 17 00:00:00 2001 From: Wolverine Date: Tue, 18 Aug 2015 16:28:21 +0800 Subject: [PATCH 039/248] Update zh-CN.md --- i18n/zh-CN.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/i18n/zh-CN.md b/i18n/zh-CN.md index f41f989d..241855c3 100644 --- a/i18n/zh-CN.md +++ b/i18n/zh-CN.md @@ -1013,7 +1013,7 @@ Angular社区是一个热衷于分享经验的令人难以置信的社区，尽 **[返回顶部](#目录)** ## Directives -###一个dirctive一个文件 +###一个directive一个文件 ###### [Style [Y070](#style-y070)] - 一个文件中只创建一个directive，并依照directive来命名文件。 From f696a293930f8e5995e9a4fd24fa7045082a7658 Mon Sep 17 00:00:00 2001 From: Xavier Haniquaut Date: Tue, 18 Aug 2015 14:08:50 +0200 Subject: [PATCH 040/248] [fr-FR] Refresh french translation : Intro --- i18n/fr-FR.md | 14 +++++--------- 1 file changed, 5 insertions(+), 9 deletions(-) diff --git a/i18n/fr-FR.md b/i18n/fr-FR.md index 65fee277..727321e4 100644 --- a/i18n/fr-FR.md +++ b/i18n/fr-FR.md @@ -1,16 +1,12 @@ -# Le Guide de Style Angular +# Charte stylistique Angular -*Le guide d'un point de vue personnel sur le style Angular par [@john_papa](//twitter.com/john_papa)* +*Guide de style par subjectif pour Angular par [@john_papa](//twitter.com/john_papa)* -*Translated by [Eric Lemerdy](https://github.com/ericlemerdy)* +Si vous cherchez un guide de style pour la syntaxe, les conventions, et la structuration d'applications Angular, alors vous êtes au bon endroit. Ces styles sont basés sur mon expérience de développement avec [Angular](//angularjs.org), mes présentations, [mes cours sur Pluralsight](http://pluralsight.com/training/Authors/Details/john-papa) et mon travail au sein de diverses équipes. ->The [original English version](http://jpapa.me/ngstyles) is the source of truth, as it is maintained and updated first. +Le but de ce guide de style est de proposer des conseils sur le développement d'applications Angular en exposant les conventions que j'utilise et plus important encore, pourquoi je les ai choisies. -Si vous cherchez un guide de style pour la syntaxe, les conventions, et la structuration d'application Angular, alors vous êtes au bon endroit. Ces styles sont basés sur mon expérience de dévelopement avec [Angular](//angularjs.org), mes présentations, [mes cours sur Pluralsight](http://pluralsight.com/training/Authors/Details/john-papa) et mon travail au sein des équipes. - -Le but de ce guide de style est de proposer des conseils sur le développement d'applications Angular en montrant les conventions que j'utilise et, plus important encore, les raisons des choix que j'ai pris. - ->Si vous appréciez ce guide, visitez mon cours [Angular Patterns: Clean Code](http://jpapa.me/ngclean) sur Pluralsight. +>Si vous appréciez ce guide, visitez mon cours [Angular Patterns: Clean Code](http://jpapa.me/ngclean) sur Pluralsight qui va de pair avec ce guide. [![Angular Patterns: Clean Code](https://raw.githubusercontent.com/johnpapa/angular-styleguide/master/assets/ng-clean-code-banner.png)](http://jpapa.me/ngclean) From f918bea566cea3aac4f33b4789113e67afbafdbd Mon Sep 17 00:00:00 2001 From: Xavier Haniquaut Date: Tue, 18 Aug 2015 14:31:58 +0200 Subject: [PATCH 041/248] [fr-FR] Refresh french translation : Credits --- i18n/fr-FR.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/i18n/fr-FR.md b/i18n/fr-FR.md index 727321e4..c30c15a7 100644 --- a/i18n/fr-FR.md +++ b/i18n/fr-FR.md @@ -10,10 +10,10 @@ Le but de ce guide de style est de proposer des conseils sur le développement d [![Angular Patterns: Clean Code](https://raw.githubusercontent.com/johnpapa/angular-styleguide/master/assets/ng-clean-code-banner.png)](http://jpapa.me/ngclean) -## Suprématie de la Communauté et Remerciements -Ne jamais travailler dans le vide. J'ai trouvé que la communauté Angular est un incroyable groupe dont les membres ont à coeur de partager leurs expériences. Ainsi, un ami et expert Angular Todd Motto et moi avons collaboré sur de nombreux styles et conventions. Nous sommes d'accord sur la plupart, et nous divergeons sur d'autres. Je vous encourage à visiter [les guideslines de Todd](https://github.com/toddmotto/angularjs-styleguide) pour vous faire un sentiment sur son approche et en quoi elle est comparable. +## Remerciements individuels et à la communauté +Ne jamais travailler en vase clos. J'ai trouvé que la communauté Angular est une incroyable communauté dont les membres ont à cœur de partager leurs expériences. Ainsi, avec mon ami et expert d'Angular, Todd Motto, nous avons collaboré sur de nombreux styles et conventions. Nous sommes d'accord sur la plupart, et nous divergeons sur d'autres. Je vous encourage à visiter [le guide de style de Todd](https://github.com/toddmotto/angularjs-styleguide) pour vous faire votre propre avis sur son approche et en quoi elle diverge. -De nombreux de mes styles proviennent des maintes scéances de pair programming que [Ward Bell](http://twitter.com/wardbell) et moi avons eu. Même si nous n'étions pas toujours d'accord, mon ami Ward a assurément contribué à influencer l'évolution ultime de ce guide. +Beaucoup de mes styles proviennent des nombreuses séances de pair programming avec [Ward Bell](http://twitter.com/wardbell). Mon ami Ward a assurément contribué à influencer l'évolution ultime de ce guide. ## Visualiser les Styles dans une Application d'Exemple Alors que ce guide explique le *quoi*, le *pourquoi* et le *comment*, il m'a été utile de les visualiser dans la pratique. Ce guide est accompagné par une application d'exemple qui suit ces styles et ces motifs. Vous pouvez trouver l'[application d'exemple (appellée modular) ici](https://github.com/johnpapa/ng-demos) dans le répertoire `modular`. Vous pouvez librement le récupérer, le cloner, ou le dupliquer pour le modifier. [Les instructions pour l'éxécuter sont contenues dans ce readme](https://github.com/johnpapa/ng-demos/tree/master/modular). From a07f4d62d5fd1e3ef7d49bd8ae5045560f5686da Mon Sep 17 00:00:00 2001 From: Xavier Haniquaut Date: Tue, 18 Aug 2015 14:48:41 +0200 Subject: [PATCH 042/248] [fr-FR] Refresh french translation : Sample app --- i18n/fr-FR.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/i18n/fr-FR.md b/i18n/fr-FR.md index c30c15a7..504acd30 100644 --- a/i18n/fr-FR.md +++ b/i18n/fr-FR.md @@ -15,8 +15,8 @@ Ne jamais travailler en vase clos. J'ai trouvé que la communauté Angular est u Beaucoup de mes styles proviennent des nombreuses séances de pair programming avec [Ward Bell](http://twitter.com/wardbell). Mon ami Ward a assurément contribué à influencer l'évolution ultime de ce guide. -## Visualiser les Styles dans une Application d'Exemple -Alors que ce guide explique le *quoi*, le *pourquoi* et le *comment*, il m'a été utile de les visualiser dans la pratique. Ce guide est accompagné par une application d'exemple qui suit ces styles et ces motifs. Vous pouvez trouver l'[application d'exemple (appellée modular) ici](https://github.com/johnpapa/ng-demos) dans le répertoire `modular`. Vous pouvez librement le récupérer, le cloner, ou le dupliquer pour le modifier. [Les instructions pour l'éxécuter sont contenues dans ce readme](https://github.com/johnpapa/ng-demos/tree/master/modular). +## Visualiser les styles dans une application d'exemple +Bien que ce guide explique le *quoi*, le *pourquoi* et le *comment*, il m'est utile de pouvoir les visualiser dans la pratique. Ce guide est accompagné par une application d'exemple qui suit ces styles et ces modèles. Vous pouvez trouver l'[application d'exemple (intitulée modular) ici](https://github.com/johnpapa/ng-demos) dans le répertoire `modular`. Vous pouvez librement le récupérer, le cloner, ou le **forker**. [Les instructions pour l’exécuter sont contenues dans ce readme](https://github.com/johnpapa/ng-demos/tree/master/modular). ## Traductions [Des traductions de ce guide stylistique Angular](https://github.com/johnpapa/angular-styleguide/tree/master/i18n) sont maintenues par la communauté et peuvent être trouvées ici. From 33ba276ab0cd602e7c61cbcc4b943b9bf70f90af Mon Sep 17 00:00:00 2001 From: Xavier Haniquaut Date: Tue, 18 Aug 2015 14:50:25 +0200 Subject: [PATCH 043/248] [fr-FR] Refresh french translation : Translations --- i18n/fr-FR.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/i18n/fr-FR.md b/i18n/fr-FR.md index 504acd30..f37bdf22 100644 --- a/i18n/fr-FR.md +++ b/i18n/fr-FR.md @@ -19,7 +19,7 @@ Beaucoup de mes styles proviennent des nombreuses séances de pair programming a Bien que ce guide explique le *quoi*, le *pourquoi* et le *comment*, il m'est utile de pouvoir les visualiser dans la pratique. Ce guide est accompagné par une application d'exemple qui suit ces styles et ces modèles. Vous pouvez trouver l'[application d'exemple (intitulée modular) ici](https://github.com/johnpapa/ng-demos) dans le répertoire `modular`. Vous pouvez librement le récupérer, le cloner, ou le **forker**. [Les instructions pour l’exécuter sont contenues dans ce readme](https://github.com/johnpapa/ng-demos/tree/master/modular). ## Traductions -[Des traductions de ce guide stylistique Angular](https://github.com/johnpapa/angular-styleguide/tree/master/i18n) sont maintenues par la communauté et peuvent être trouvées ici. +[Les traductions de ce guide stylistique pour Angular](https://github.com/johnpapa/angular-styleguide/tree/master/i18n) sont maintenues par la communauté et peuvent être trouvées ici. ## Table des matières From 98d7b8c9eab07aa263e56d173610ce38b902a0bd Mon Sep 17 00:00:00 2001 From: Xavier Haniquaut Date: Tue, 18 Aug 2015 15:03:04 +0200 Subject: [PATCH 044/248] [fr-FR] Refresh french translation : Table of contents --- i18n/fr-FR.md | 26 +++++++++++++------------- 1 file changed, 13 insertions(+), 13 deletions(-) diff --git a/i18n/fr-FR.md b/i18n/fr-FR.md index f37bdf22..6be6fa69 100644 --- a/i18n/fr-FR.md +++ b/i18n/fr-FR.md @@ -26,35 +26,35 @@ Bien que ce guide explique le *quoi*, le *pourquoi* et le *comment*, il m'est ut 1. [Responsabilité Unique](#responsabilité-unique) 1. [IIFE](#iife) 1. [Modules](#modules) - 1. [Controlleurs](#controlleurs) + 1. [Contrôleurs](#controlleurs) 1. [Services](#services) 1. [Factories](#factories) 1. [Services de données](#services-de-données) 1. [Directives](#directives) - 1. [Résolution des Promesses pour un controlleur](#résolution-des-promesses-pour-un-controlleur) - 1. [Annoter Manuellement pour l'Injection de Dépendances](#annoter-manuellement-pour-linjection-de-dépendances) - 1. [Minification et Annotation](#minification-et-annotation) - 1. [Gestion des Exceptions](#gestion-des-exceptions) + 1. [Résolution de promesses pour un contrôleur](#résolution-de-promesses-pour-un-contrôleur) + 1. [Annoter manuellement les dépendances à injecter](#annoter-manuellement-les-dépendances-à-injecter) + 1. [Minification et annotation](#minification-et-annotation) + 1. [Gestion des exceptions](#gestion-des-exceptions) 1. [Nommage](#nommage) - 1. [Le Principe LIFT de Structuration de l'Application](#le-principe-lift-de-structuration-de-lapplication) - 1. [Structure de l'Application](#structure-de-lapplication) + 1. [Architecture L.I.F.T.](#architecture-lift) + 1. [Architecture de l'application](#architecture-de-lapplication) 1. [Modularité](#modularité) - 1. [Logique de Démarrage](#logique-de-démarrage) - 1. [Les Services de Wrapper $ de Angular](#les-services-de-wrapper--de-angular) - 1. [Le Test](#le-test) + 1. [Logique d'initialisation](#logique-d-initialisation) + 1. [Services $ d'Angular](#services-dollar-d-angular) + 1. [Tests](#tests) 1. [Animations](#animations) 1. [Commentaires](#commentaires) 1. [JSHint](#js-hint) 1. [JSCS](#jscs) 1. [Constantes](#constantes) - 1. [Templates de Fichiers et Fragments](#templates-de-fichiers-et-fragments) + 1. [Templates et snippets](#templates-et-snippets) 1. [Générateur Yeoman](#générateur-yeoman) 1. [Routage](#routage) - 1. [Automatisation des Tâches](#automatisation-des-taches) + 1. [Automatisation des tâches](#automatisation-des-taches) 1. [Filtres](#filtres) 1. [Documentation Angular](#documentation-angular) 1. [Contribuer](#contribuer) - 1. [License](#license) + 1. [Licence](#license) ## Responsabilité Unique From 91731d33d659db354c8ff68abb64df0c2330d0cb Mon Sep 17 00:00:00 2001 From: Xavier Haniquaut Date: Tue, 18 Aug 2015 15:06:09 +0200 Subject: [PATCH 045/248] [fr-FR] Refresh french translation : Single responsability --- i18n/fr-FR.md | 24 ++++++++++++------------ 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/i18n/fr-FR.md b/i18n/fr-FR.md index 6be6fa69..bb4e33b5 100644 --- a/i18n/fr-FR.md +++ b/i18n/fr-FR.md @@ -58,33 +58,33 @@ Bien que ce guide explique le *quoi*, le *pourquoi* et le *comment*, il m'est ut ## Responsabilité Unique -### La règle de l'unicité +### Règle d'unicité ###### [Style [Y001](#style-y001)] - - Définir 1 composant par fichier. + - Définir un composant par fichier. - L'exemple suivant définit le module `app` et ses dépendances, définit un controlleur, et définit une factory le tout dans le même fichier. + L'exemple suivant définit le module `app` et ses dépendances, définit un contrôleur, et définit une factory le tout dans le même fichier. ```javascript /* à éviter */ angular - .module('app', ['ngRoute']) - .controller('SomeController', SomeController) - .factory('someFactory', someFactory); + .module('app', ['ngRoute']) + .controller('SomeController', SomeController) + .factory('someFactory', someFactory); function SomeController() { } function someFactory() { } ``` - Les même composants sont maintenant séparés dans leurs propres fichiers. + Les même composants sont maintenant séparés dans leurs propres fichiers. ```javascript /* recommandé */ // app.module.js angular - .module('app', ['ngRoute']); + .module('app', ['ngRoute']); ``` ```javascript @@ -92,8 +92,8 @@ Bien que ce guide explique le *quoi*, le *pourquoi* et le *comment*, il m'est ut // someController.js angular - .module('app') - .controller('SomeController', SomeController); + .module('app') + .controller('SomeController', SomeController); function SomeController() { } ``` @@ -103,8 +103,8 @@ Bien que ce guide explique le *quoi*, le *pourquoi* et le *comment*, il m'est ut // someFactory.js angular - .module('app') - .factory('someFactory', someFactory); + .module('app') + .factory('someFactory', someFactory); function someFactory() { } ``` From 183360a5641bc3e36cba06231e99a66135154265 Mon Sep 17 00:00:00 2001 From: Xavier Haniquaut Date: Tue, 18 Aug 2015 15:07:05 +0200 Subject: [PATCH 046/248] transform tabs to spaces --- i18n/fr-FR.md | 22 +++++++++++----------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/i18n/fr-FR.md b/i18n/fr-FR.md index bb4e33b5..3a30f594 100644 --- a/i18n/fr-FR.md +++ b/i18n/fr-FR.md @@ -207,7 +207,7 @@ Bien que ce guide explique le *quoi*, le *pourquoi* et le *comment*, il m'est ut ```javascript /* recommandé */ angular - .module('app', [ + .module('app', [ 'ngAnimate', 'ngRoute', 'app.shared', @@ -246,8 +246,8 @@ Bien que ce guide explique le *quoi*, le *pourquoi* et le *comment*, il m'est ut *Pourquoi ?* : Un module ne devrait être créé qu'une seule fois, et ensuite récupéré à partir de ce point et après. - - Utilisez `angular.module('app', []);` pour setter un module. - - Utilisez `angular.module('app');` pour getter un module. + - Utilisez `angular.module('app', []);` pour setter un module. + - Utilisez `angular.module('app');` pour getter un module. ### Fonctions Nommées ou Anonymes ###### [Style [Y024](#style-y024)] @@ -293,11 +293,11 @@ Bien que ce guide explique le *quoi*, le *pourquoi* et le *comment*, il m'est ut - Utilisez la syntaxe [`controllerAs`](http://www.johnpapa.net/do-you-like-your-angular-controllers-with-or-without-sugar/) au lieu de la syntaxe de `controlleur classique avec $scope`. - *Pourquoi ?* : Les controlleurs sont construits, recréés, et fournissent une unique nouvelle instance, et la syntaxe `controllerAs` est plus proche de celle d'un contructeur Javascript que la `syntaxe $scope classique`. + *Pourquoi ?* : Les controlleurs sont construits, recréés, et fournissent une unique nouvelle instance, et la syntaxe `controllerAs` est plus proche de celle d'un contructeur Javascript que la `syntaxe $scope classique`. - *Pourquoi ?* : Il encourage l'usage du binding entre un objet avec "point" et la Vue (ex. `customer.name` au lieu de `name`), ce qui est plus contextuel, plus facile à lire, et évite tout problème de référence qui peut arriver sans "point". + *Pourquoi ?* : Il encourage l'usage du binding entre un objet avec "point" et la Vue (ex. `customer.name` au lieu de `name`), ce qui est plus contextuel, plus facile à lire, et évite tout problème de référence qui peut arriver sans "point". - *Pourquoi ?* : Permet d'éviter l'usage des appels à `$parent` dans les Vues avec des controlleurs imbriqués. + *Pourquoi ?* : Permet d'éviter l'usage des appels à `$parent` dans les Vues avec des controlleurs imbriqués. ```html @@ -584,8 +584,8 @@ Bien que ce guide explique le *quoi*, le *pourquoi* et le *comment*, il m'est ut // Utilise JSONP pour ce navigateur s'il ne supporte pas CORS return $http.get(settings) .then(function(data) { - // Décompresse les données JSON dans l'objet réponse - // afin de rechercher maxRemainingAmount + // Décompresse les données JSON dans l'objet réponse + // afin de rechercher maxRemainingAmount vm.isCreditOk = vm.total <= maxRemainingAmount }) .catch(function(error) { @@ -607,7 +607,7 @@ Bien que ce guide explique le *quoi*, le *pourquoi* et le *comment*, il m'est ut function checkCredit() { return creditService.isOrderTotalOk(vm.total) - .then(function(isOk) { vm.isCreditOk = isOk; }) + .then(function(isOk) { vm.isCreditOk = isOk; }) .catch(showServiceError); }; } @@ -1709,7 +1709,7 @@ Bien que ce guide explique le *quoi*, le *pourquoi* et le *comment*, il m'est ut Note : Une autre possibilité serait de surcharger le service au lieu d'utiliser un décorateur. C'est une bonne possibilité, mais si vou voulez garder le comportement par défaut et l'étendre, un décorateur est plus approprié. - ```javascript + ```javascript /* recommandé */ angular .module('blocks.exception') @@ -1739,7 +1739,7 @@ Bien que ce guide explique le *quoi*, le *pourquoi* et le *comment*, il m'est ut toastr.error(exception.msg, errorData); }; } - ``` + ``` ### Catcher d'Exceptions ###### [Style [Y111](#style-y111)] From 37595ddf6764fc96f8d1e0e914a89fb234818d7b Mon Sep 17 00:00:00 2001 From: Xavier Haniquaut Date: Tue, 18 Aug 2015 15:18:24 +0200 Subject: [PATCH 047/248] [fr-FR] Refresh french translation : IIFE --- i18n/fr-FR.md | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/i18n/fr-FR.md b/i18n/fr-FR.md index 3a30f594..cc57a10c 100644 --- a/i18n/fr-FR.md +++ b/i18n/fr-FR.md @@ -112,14 +112,14 @@ Bien que ce guide explique le *quoi*, le *pourquoi* et le *comment*, il m'est ut **[Retour en haut de page](#table-des-matières)** ## IIFE -### Les Closures JavaScript +### Les fermetures (**closures**) JavaScript ###### [Style [Y010](#style-y010)] - - Encapsuler les composants Angular dans une Immediately Invoked Function Expression (IIFE) ou Expression de Fonction Immédiatement Invoquée. + - Encapsuler les composants Angular dans une **Immediately Invoked Function Expression** (IIFE) ou Expression de Fonction Immédiatement Invoquée. - *Pourquoi ?* : Une IIFE supprime les variables du scope global. Cela aide à éviter que les déclarations de variables et de fonctions ne vivent plus longtemps qu'attendu dans le scope global, ce qui aide aussi à éviter les collisions de variables. + *Pourquoi ?* : Une IIFE supprime les variables du scope global. Cela aide à éviter que les déclarations de variables et de fonctions ne vivent plus longtemps que prévu dans le scope global, ce qui aide aussi à éviter les collisions de variables. - *Pourquoi ?* : Lorsque votre code est minifié et embarqué dans un unique fichier pour le déploiement dans un serveur de production, vous pouvez avoir des collisions de variables et de nombreuses variables globales. Une IIFE protège contre ces derniers en fournissant un scope de variable pour chaque fichier. + *Pourquoi ?* : Lorsque votre code est minifié et embarqué dans un unique fichier pour le déploiement dans un serveur de production, vous pouvez avoir des collisions de variables et de nombreuses variables globales. Une IIFE vous protège contre ces dernières en fournissant un scope différent pour chaque fichier. ```javascript /* à éviter */ @@ -128,7 +128,7 @@ Bien que ce guide explique le *quoi*, le *pourquoi* et le *comment*, il m'est ut .module('app') .factory('logger', logger); - // la fonction de logger est ajoutée en tant que variable globale + // la fonction logger est ajoutée en tant que variable globale function logger() { } // storage.js @@ -170,9 +170,9 @@ Bien que ce guide explique le *quoi*, le *pourquoi* et le *comment*, il m'est ut })(); ``` - - Note : Pour des raisons de concision seulement, le reste des examples de ce guide peuvent avoir omis la syntaxe IIFE. + - Note : Pour des raisons de concision seulement, le reste des exemples de ce guide seront pas écrits avec la syntaxe IIFE. - - Note : Les IIFE empêchent le code code de test d'atteindre des membres privés comme des expressions régulières ou des fonctions helper ce qui est bon pour tester unitairement directement indépendamment. Cependant, vous pouvez les tester à travers des membres accessibles ou en les exposant à travers leur propre composant. Par exemple en plaçant des fonctions helper, des expressions régulières ou des constantes dans leur propre factory ou contante. + - Note : Les IIFE empêchent le code de test d'atteindre des membres privés, comme les expressions régulières ou les fonctions utilitaires (**helpers**), qu'il est souvent meilleur de tester indépendamment. Cependant, vous pouvez les tester à travers les membres accessibles ou en les exposant à travers leur propre composant. Par exemple en les plaçant dans leur propre factory ou constante. **[Retour en haut de page](#table-des-matières)** From 21aaca4162a8edd9aedddb2434b69e1255c75291 Mon Sep 17 00:00:00 2001 From: Xavier Haniquaut Date: Tue, 18 Aug 2015 15:38:10 +0200 Subject: [PATCH 048/248] [fr-FR] Refresh french translation : Modules --- i18n/fr-FR.md | 55 +++++++++++++++++++++++++++++---------------------- 1 file changed, 31 insertions(+), 24 deletions(-) diff --git a/i18n/fr-FR.md b/i18n/fr-FR.md index cc57a10c..7418ba2b 100644 --- a/i18n/fr-FR.md +++ b/i18n/fr-FR.md @@ -16,7 +16,7 @@ Ne jamais travailler en vase clos. J'ai trouvé que la communauté Angular est u Beaucoup de mes styles proviennent des nombreuses séances de pair programming avec [Ward Bell](http://twitter.com/wardbell). Mon ami Ward a assurément contribué à influencer l'évolution ultime de ce guide. ## Visualiser les styles dans une application d'exemple -Bien que ce guide explique le *quoi*, le *pourquoi* et le *comment*, il m'est utile de pouvoir les visualiser dans la pratique. Ce guide est accompagné par une application d'exemple qui suit ces styles et ces modèles. Vous pouvez trouver l'[application d'exemple (intitulée modular) ici](https://github.com/johnpapa/ng-demos) dans le répertoire `modular`. Vous pouvez librement le récupérer, le cloner, ou le **forker**. [Les instructions pour l’exécuter sont contenues dans ce readme](https://github.com/johnpapa/ng-demos/tree/master/modular). +Bien que ce guide explique le *quoi*, le *pourquoi* et le *comment*, il m'est utile de pouvoir les visualiser dans la pratique. Ce guide est accompagné par une application d'exemple qui suit ces styles et ces modèles. Vous pouvez trouver l'[application d'exemple (intitulée modular) ici](https://github.com/johnpapa/ng-demos) dans le répertoire `modular`. Vous pouvez librement le récupérer, le cloner, ou le *forker*. [Les instructions pour l’exécuter sont contenues dans ce readme](https://github.com/johnpapa/ng-demos/tree/master/modular). ## Traductions [Les traductions de ce guide stylistique pour Angular](https://github.com/johnpapa/angular-styleguide/tree/master/i18n) sont maintenues par la communauté et peuvent être trouvées ici. @@ -61,7 +61,7 @@ Bien que ce guide explique le *quoi*, le *pourquoi* et le *comment*, il m'est ut ### Règle d'unicité ###### [Style [Y001](#style-y001)] - - Définir un composant par fichier. + - Définissez un composant par fichier. L'exemple suivant définit le module `app` et ses dépendances, définit un contrôleur, et définit une factory le tout dans le même fichier. @@ -112,10 +112,10 @@ Bien que ce guide explique le *quoi*, le *pourquoi* et le *comment*, il m'est ut **[Retour en haut de page](#table-des-matières)** ## IIFE -### Les fermetures (**closures**) JavaScript +### Les fermetures (*closures*) JavaScript ###### [Style [Y010](#style-y010)] - - Encapsuler les composants Angular dans une **Immediately Invoked Function Expression** (IIFE) ou Expression de Fonction Immédiatement Invoquée. + - Encapsulez les composants Angular dans une *Immediately Invoked Function Expression* (IIFE) ou Expression de Fonction Immédiatement Invoquée. *Pourquoi ?* : Une IIFE supprime les variables du scope global. Cela aide à éviter que les déclarations de variables et de fonctions ne vivent plus longtemps que prévu dans le scope global, ce qui aide aussi à éviter les collisions de variables. @@ -172,25 +172,25 @@ Bien que ce guide explique le *quoi*, le *pourquoi* et le *comment*, il m'est ut - Note : Pour des raisons de concision seulement, le reste des exemples de ce guide seront pas écrits avec la syntaxe IIFE. - - Note : Les IIFE empêchent le code de test d'atteindre des membres privés, comme les expressions régulières ou les fonctions utilitaires (**helpers**), qu'il est souvent meilleur de tester indépendamment. Cependant, vous pouvez les tester à travers les membres accessibles ou en les exposant à travers leur propre composant. Par exemple en les plaçant dans leur propre factory ou constante. + - Note : Les IIFE empêchent le code de test d'atteindre des membres privés, comme les expressions régulières ou les fonctions utilitaires (*helpers*), qu'il est souvent meilleur de tester indépendamment. Cependant, vous pouvez les tester à travers les membres accessibles ou en les exposant à travers leur propre composant. Par exemple en les plaçant dans leur propre factory ou constante. **[Retour en haut de page](#table-des-matières)** ## Modules -### Éviter les Collisions de Nommage +### Éviter les collisions de nommage ###### [Style [Y020](#style-y020)] - - Utilisez des conventions de nommages uniques avec des séparations pour les sous-modules. + - Utilisez des conventions de nommages uniques avec des séparateurs pour les sous-modules. - *Pourquoi ?* : Les noms uniques aident à éviter les collisions de nom de module. Les séparateurs aident à définir les modules et leur hiérarchie de sous-modules. Par exemple, `app` pourrait être le module racine tandis que `app.dashboard` et `app.users` serait les modules qui sont utilisés en tant que dépendances de `app`. + *Pourquoi ?* : Les noms uniques aident à éviter les collisions de nom de module. Les séparateurs aident à définir les modules et la hiérarchie de leurs sous-modules. Par exemple, `app` pourrait être le module principal (*root*) tandis que `app.dashboard` et `app.users` seraient des sous-modules utilisés en tant que dépendances de `app`. -### Définitions (i.e. Setters) +### Mutateurs (*Setters*) ###### [Style [Y021](#style-y021)] - - Déclarer des modules sans variable en utilisant la syntaxe setter. + - Déclarez les modules sans variables en utilisant la syntaxe *setter*. - *Pourquoi ?* : Avec 1 composant par fichier, on ne devrait pas avoir besoin d'introduire une variable pour le module. + *Pourquoi ?* : Avec un composant par fichier, on ne devrait pas avoir besoin d'introduire une variable pour le module. ```javascript /* à éviter */ @@ -202,7 +202,7 @@ Bien que ce guide explique le *quoi*, le *pourquoi* et le *comment*, il m'est ut ]); ``` - Utilisez à la place la syntaxe setter simple. + Utilisez à la place la syntaxe *setter*. ```javascript /* recommandé */ @@ -215,12 +215,12 @@ Bien que ce guide explique le *quoi*, le *pourquoi* et le *comment*, il m'est ut ]); ``` -### Getters +### Accesseurs (*Getters*) ###### [Style [Y022](#style-y022)] - - Lorsque vous utilisez un module, évitez d'utiliser une variable en utilisant plutôt le chaînage avec la syntaxe du getter. + - Lorsque vous utilisez un module, évitez d'utiliser une variable en utilisant plutôt le chaînage avec la syntaxe *getter*. - *Pourquoi ?* : Cela produit du code plus lisible et évite les collisions de variable ou les fuites. + *Pourquoi ?* : le code est plus lisible et évite les collisions de variables ou les fuites. ```javascript /* à éviter */ @@ -242,19 +242,26 @@ Bien que ce guide explique le *quoi*, le *pourquoi* et le *comment*, il m'est ut ### Setting ou Getting ###### [Style [Y023](#style-y023)] - - Ne settez qu'une fois et gettez pour toutes les autres instances. + - N'utilisez le *setter* qu'une fois et le *getter* pour toutes les autres instances. - *Pourquoi ?* : Un module ne devrait être créé qu'une seule fois, et ensuite récupéré à partir de ce point et après. + *Pourquoi ?* : Un module ne devrait être créé qu'une seule fois, et ensuite récupéré à partir de ce point. - - Utilisez `angular.module('app', []);` pour setter un module. - - Utilisez `angular.module('app');` pour getter un module. + ```javascript + /* recommended */ -### Fonctions Nommées ou Anonymes + // pour setter un module + angular.module('app', []); + + // pour getter un module + angular.module('app'); + ``` + +### Fonctions nommées ou anonymes ###### [Style [Y024](#style-y024)] - - Utilisez des fonctions nommées au lieu de passer une fonction anonyme comme callback. + - Utilisez des fonctions nommées au lieu de passer des fonction anonymes dans les *callbacks*. - *Pourquoi ?* : Celà produit du code plus lisible, est plus facile à débugguer, et réduit la quantité de code callback imbriqué. + *Pourquoi ?* : le code plus lisible, est plus facile à déboguer, et réduit l'imbrication des *callbacks*. ```javascript /* à éviter */ @@ -265,7 +272,7 @@ Bien que ce guide explique le *quoi*, le *pourquoi* et le *comment*, il m'est ut ``` ```javascript - /* recommendé */ + /* recommandé */ // dashboard.js angular @@ -307,7 +314,7 @@ Bien que ce guide explique le *quoi*, le *pourquoi* et le *comment*, il m'est ut ``` ```html - +
{{ customer.name }}
From 14aa5812f341b9e0d8e15adc5be88ac958f6a7f3 Mon Sep 17 00:00:00 2001 From: Xavier Haniquaut Date: Tue, 18 Aug 2015 17:16:06 +0200 Subject: [PATCH 049/248] [fr-FR] Refresh french translation : Controllers --- i18n/fr-FR.md | 204 +++++++++++++++++++++++++------------------------- 1 file changed, 102 insertions(+), 102 deletions(-) diff --git a/i18n/fr-FR.md b/i18n/fr-FR.md index 7418ba2b..2baee656 100644 --- a/i18n/fr-FR.md +++ b/i18n/fr-FR.md @@ -26,7 +26,7 @@ Bien que ce guide explique le *quoi*, le *pourquoi* et le *comment*, il m'est ut 1. [Responsabilité Unique](#responsabilité-unique) 1. [IIFE](#iife) 1. [Modules](#modules) - 1. [Contrôleurs](#controlleurs) + 1. [Contrôleurs](#controleurs) 1. [Services](#services) 1. [Factories](#factories) 1. [Services de données](#services-de-données) @@ -220,7 +220,7 @@ Bien que ce guide explique le *quoi*, le *pourquoi* et le *comment*, il m'est ut - Lorsque vous utilisez un module, évitez d'utiliser une variable en utilisant plutôt le chaînage avec la syntaxe *getter*. - *Pourquoi ?* : le code est plus lisible et évite les collisions de variables ou les fuites. + *Pourquoi ?* : Le code est plus lisible et évite les collisions de variables ou les fuites. ```javascript /* à éviter */ @@ -261,7 +261,7 @@ Bien que ce guide explique le *quoi*, le *pourquoi* et le *comment*, il m'est ut - Utilisez des fonctions nommées au lieu de passer des fonction anonymes dans les *callbacks*. - *Pourquoi ?* : le code plus lisible, est plus facile à déboguer, et réduit l'imbrication des *callbacks*. + *Pourquoi ?* : Le code plus lisible, est plus facile à déboguer, et réduit l'imbrication des *callbacks*. ```javascript /* à éviter */ @@ -293,18 +293,18 @@ Bien que ce guide explique le *quoi*, le *pourquoi* et le *comment*, il m'est ut **[Retour en haut de page](#table-des-matières)** -## Controlleurs +## Contrôleurs -### La Syntaxe Vue controllerAs +### Syntaxe de la vue avec `controllerAs` ###### [Style [Y030](#style-y030)] - - Utilisez la syntaxe [`controllerAs`](http://www.johnpapa.net/do-you-like-your-angular-controllers-with-or-without-sugar/) au lieu de la syntaxe de `controlleur classique avec $scope`. + - Utilisez la syntaxe avec [`controllerAs`](http://www.johnpapa.net/do-you-like-your-angular-controllers-with-or-without-sugar/) au lieu de la syntaxe classique avec `$scope`. - *Pourquoi ?* : Les controlleurs sont construits, recréés, et fournissent une unique nouvelle instance, et la syntaxe `controllerAs` est plus proche de celle d'un contructeur Javascript que la `syntaxe $scope classique`. + *Pourquoi ?* : Les contrôleurs sont construits, recréés, et fournissent une unique nouvelle instance. La syntaxe utilisant `controllerAs` est plus proche de celle d'un constructeur Javascript que la syntaxe classique avec `$scope`. - *Pourquoi ?* : Il encourage l'usage du binding entre un objet avec "point" et la Vue (ex. `customer.name` au lieu de `name`), ce qui est plus contextuel, plus facile à lire, et évite tout problème de référence qui peut arriver sans "point". + *Pourquoi ?* : Elle encourage l'usage du *binding* entre un objet (avec la notation pointée) et la vue (ex. `customer.name` au lieu de `name`). Elle est plus contextuelle, plus facile à lire, et évite tout problème de référence qui peut arriver sans la notation « point ». - *Pourquoi ?* : Permet d'éviter l'usage des appels à `$parent` dans les Vues avec des controlleurs imbriqués. + *Pourquoi ?* : Elle permet d'éviter l'usage des appels à `$parent` dans les vues avec des contrôleurs imbriqués. ```html @@ -320,16 +320,16 @@ Bien que ce guide explique le *quoi*, le *pourquoi* et le *comment*, il m'est ut ``` -### La Syntaxe de Controlleur controllerAs +### Syntaxe du contrôleur avec `controllerAs` ###### [Style [Y031](#style-y031)] - - Utilisez la syntaxe `controllerAs` au lieu de la syntaxe de `controlleur classique avec $scope`. + - Utilisez la syntaxe avec `controllerAs` au lieu de la syntaxe de classique avec `$scope`. - - La syntaxe `controllerAs` utilise `this` à l'intérieur des controlleurs qui se font relier au `$scope`. + - La syntaxe avec `controllerAs` utilise `this` à l'intérieur des contrôleurs qui se fait *binder* à `$scope` implicitement. - *Pourquoi ?* : `controllerAs` est un sucre syntaxique sur le `$scope`. Vous pouvez toujours vous relier à la Vue et toujours accéder aux métodes du `$scope`. + *Pourquoi ?* : `controllerAs` est une simplification (sucre) syntaxique de `$scope`. Vous pouvez toujours vous *binder* dans la vue et accéder aux méthodes de `$scope`. - *Pourquoi ?* : Permet d'éviter la tentation d'utiliser les méthodes du `$scope` à l'intérieur d'un controlleur alors qu'il serait par ailleurs meilleur de les éviter ou de les déplacer dans une factory. Considérez utiliser le `$scope` dans une factory, ou seulement si nécessaire dans un controlleur. Par exemple lorsqu'il faut publier ou souscrire des événements en utilisant [`$emit`](https://docs.angularjs.org/api/ng/type/$rootScope.Scope#$emit), [`$broadcast`](https://docs.angularjs.org/api/ng/type/$rootScope.Scope#$broadcast), ou [`$on`](https://docs.angularjs.org/api/ng/type/$rootScope.Scope#$on) considérez déplacer ces usages dans une factory et les invoquer depuis le controlleur. + *Pourquoi ?* : Permet d'éviter la tentation d'utiliser les méthodes de `$scope` à l'intérieur d'un contrôleur. Il est par ailleurs, meilleure pratique de les éviter dans les contrôleurs mais plutôt de les déplacer dans une factory. Considérez utiliser `$scope` dans un contrôleur seulement si nécessaire. Par exemple lorsqu'il faut publier ou souscrire à des événements en utilisant [`$emit`](https://docs.angularjs.org/api/ng/type/$rootScope.Scope#$emit), [`$broadcast`](https://docs.angularjs.org/api/ng/type/$rootScope.Scope#$broadcast), ou [`$on`](https://docs.angularjs.org/api/ng/type/$rootScope.Scope#$on) considérez déplacer ces usages dans une factory et les invoquer depuis le contrôleur. ```javascript /* à éviter */ @@ -347,12 +347,12 @@ Bien que ce guide explique le *quoi*, le *pourquoi* et le *comment*, il m'est ut } ``` -### controllerAs avec vm +### `controllerAs` avec `vm` ###### [Style [Y032](#style-y032)] - - Utilisez une variable de capture pour `this` quand vous utilisez la syntaxe `controllerAs`. Choisissez un nom de variable consistant tel que `vm`, qui signifie ViewModel. + - Utilisez une variable de capture pour `this` quand vous utilisez la syntaxe avec `controllerAs`. Choisissez un nom de variable consistent tel que `vm` (pour « ViewModel »). - *Pourquoi ?* : Le mot clé `this` est contextuel et son utilisation au sein d'une fonction à l'intérieur d'un controlleur pourrait changer son contexte. Capturer le contexte de `this` évite de rencontrer ce problème. + *Pourquoi ?* : `this` est contextuel et son utilisation au sein d'une fonction à l'intérieur d'un contrôleur pourrait faire changer son contexte. Capturer le contexte de `this` évite de rencontrer ce problème. ```javascript /* à éviter */ @@ -371,14 +371,14 @@ Bien que ce guide explique le *quoi*, le *pourquoi* et le *comment*, il m'est ut } ``` - Note : Vous pouvez évitez n'importe quel avertissement [jshint](http://www.jshint.com/) en plaçant le commentaire ci-dessous au dessus de la ligne de code. Cependant, ce n'est pas nécesaire lorsque la fonction est nommée en utilisant la CasseEnMajuscule, puisque cette convention signifie que c'est une fonction constructeur, ce qu'est un controlleur en Angular. + Note : Vous pouvez évitez n'importe quel avertissement [jshint](http://www.jshint.com/) en plaçant le commentaire suivant au dessus de la ligne de code. Cependant, il n'est pas nécessaire lorsque la fonction est nommée en utilisant la CasseEnMajuscule, puisque cette convention signifie que c'est la fonction est un constructeur. C'est précisément la nature d'un contrôleur dans Angular. ```javascript /* jshint validthis: true */ var vm = this; ``` - Note : Lors de la création de watchs dans un controlleur en utilisant `controller as`, vous pouvez watcher les membres `vm.*` en utilisant la syntaxe suivante. (Créez des watchs avec prudence puisqu'ils ajoutent plus de charge au cycle de digest.) + Note : Lors de la création de *watchers* dans un contrôleur en utilisant `controlleAs`, vous pouvez *watcher* les différents `vm.*` en utilisant la syntaxe suivante. (Créez des *watchers* avec prudence puisqu'ils ajoutent plus de charge au cycle de *digest*.) ```html @@ -396,15 +396,14 @@ Bien que ce guide explique le *quoi*, le *pourquoi* et le *comment*, il m'est ut } ``` -### Les Membres Bindable au Début +### Placement des membres *bindables* au début ###### [Style [Y033](#style-y033)] - - Placez les membres bindables au début du controlleur, par ordre alphabétique, et non pas dispersés à travers le code du controlleur. + - Placez les membres *bindables* au début du contrôleur, par ordre alphabétique, et non pas dispersés à travers le code du contrôleur. - *Pourquoi ?* : Placer les membres bindables au début permet de faciliter la lecture et vous aide à identifier instantanément quels membres du controlleur peut être bindé et utilisés dans la Vue. + *Pourquoi ?* : Placer les membres *bindables* au début permet de faciliter la lecture et vous aide à identifier instantanément quels membres du contrôleur peuvent-être *bindés* et utilisés dans la vue. - *Pourquoi ?* : Placer les fonction anonymes sur la même ligne peut être facile, mais lorsque ces fonctions ont plus d'une ligne de code elles peuvent réduire la lisibilité. Définir les fonctions sous les membres bindables (les fonctions seront hissées) déplace les détails d'implémentation en bas, guardant les membres bindables en haut, - Setting anonymous functions in-line can be easy, but when those functions are more than 1 line of code they can reduce the readability. Defining the functions below the bindable members (the functions will be hoisted) moves the implementation details down, keeps the bindable members up top, and makes it easier to read. + *Pourquoi ?* : Définir des fonctions anonymes *in-line* peut être facile, mais lorsque ces fonctions font plus d'une ligne de code elles peuvent réduire la lisibilité. Définir les fonctions sous les membres *bindables* (les fonctions seront *hoistées*) déplace les détails d'implémentation en bas, gardant les membres *bindables* en haut, ```javascript /* avoid */ @@ -450,9 +449,9 @@ Bien que ce guide explique le *quoi*, le *pourquoi* et le *comment*, il m'est ut } ``` - ![Les Controlleur Utilisant "Au dessus de la Réduction"](https://raw.githubusercontent.com/johnpapa/angular-styleguide/master/assets/above-the-fold-1.png) + ![Contrôleur utilisant la syntaxe avec les membres bindables au dessus](https://raw.githubusercontent.com/johnpapa/angular-styleguide/master/assets/above-the-fold-1.png) - Note : Si la fonction est un one-liner, considérez de la garder bien en haut, tant que la lisibilité n'est pas affectée. + Note : Si la fonction est un *oneliner* vous pouvez la garder en haut du contrôleur, tant que la lisibilité n'est pas affectée. ```javascript /* à éviter */ @@ -462,11 +461,11 @@ Bien que ce guide explique le *quoi*, le *pourquoi* et le *comment*, il m'est ut vm.gotoSession = gotoSession; vm.refresh = function() { /** - * lines - * of + * Nombreuses lignes + * de * code - * affects - * readability + * affectant + * la lisibilité */ }; vm.search = search; @@ -476,35 +475,35 @@ Bien que ce guide explique le *quoi*, le *pourquoi* et le *comment*, il m'est ut ```javascript /* recommandé */ - function Sessions(dataservice) { + function Sessions(sessionDataService) { var vm = this; vm.gotoSession = gotoSession; - vm.refresh = dataservice.refresh; // Le one-liner est acceptable + vm.refresh = sessionDataService.refresh; // *oneliner* acceptable vm.search = search; vm.sessions = []; vm.title = 'Sessions'; ``` -### Déclaration de Fonctions pour Cacher les Détails d'Implémentation +### Déclaration des fonctions pour cacher les détails d'implémentation ###### [Style [Y034](#style-y034)] - - Utilisez les déclarations de fonctions pour cacher les détails d'implémentation. Gardez vos membres bindables tout en haut. Quand vous avez besoin de binder une fonction dans un controlleur, faites-la pointer vers la déclaration de la fonction plus bas dans le fichier. Ceci est directement lié à la section des Membres Bindable au Début. Pour plus de détails, vous pouvez lire [cet article](http://www.johnpapa.net/angular-function-declarations-function-expressions-and-readable-code). + - Utilisez les déclarations de fonctions pour cacher les détails d'implémentation. Gardez vos membres *bindables* en haut. Quand vous avez besoin de *binder* une fonction dans un contrôleur, faites-la pointer vers la déclaration de la fonction plus bas dans le fichier. Ceci est directement lié à la section du placement des membres *bindables* au début. Pour plus de détails, vous pouvez lire [cet article](http://www.johnpapa.net/angular-function-declarations-function-expressions-and-readable-code). - *Pourquoi ?* : Placer les membres bindables en haut rend plus facile la lecture et vous aide instantanément à identifier quels membres du controlleur peuvent être bindés et utilisés dans la Vue. (Même chose que plus haut.) + *Pourquoi ?* : Placer les membres *bindables* en haut facilite la lecture et vous aide instantanément à identifier quels membres du contrôleur peuvent être *bindés* et utilisés dans la vue. - *Pourquoi ?* : Placer les détails d'implémentation d'une fonction plus bas dans le fichier déplace cette complexité en dehors du regard ainsi vous pouvez ne voir que les choses importantes en haut. + *Pourquoi ?* : Placer les détails d'implémentation d'une fonction plus bas dans le fichier permet de masquer la complexité. Ainsi vous ne pouvez voir que les choses importantes en haut. - *Pourquoi ?* : Les déclarations de fichiers sont remontées donc il n'y a aucun problème à utiliser une fonction avant qu'elle ne soit définie (alors que ça le serait avec les expressions de fonction). + *Pourquoi ?* : Les déclarations de fonctions sont *hoistées* donc il n'y a pas problème à utiliser une fonction avant qu'elle ne soit définie (alors que ça serait le cas avec les expressions de fonction). - *Pourquoi ?* : Vous ne vous préocuperez plus des déclarations de fonctions déplaçant `var a` avant `var b` cassant ainsi votre code car `a` dépend de `b`. + *Pourquoi ?* : Vous ne vous préoccuperez plus des déclarations de fonctions déplaçant `var a` avant `var b` cassant ainsi votre code car `a` dépendait de `b`. - *Pourquoi ?* : L'ordre est critique avec les expressions de fonction + *Pourquoi ?* : L'ordre est critique avec les expressions de fonctions. ```javascript /** - * à éviter - * L'utilisation des expressions de fonction. + * Evitez + * l'utilisation des expressions de fonctions. */ function Avengers(dataservice, logger) { var vm = this; @@ -530,13 +529,13 @@ Bien que ce guide explique le *quoi*, le *pourquoi* et le *comment*, il m'est ut } ``` - Remarquez que les choses importantes sont dispersées dans l'exemple précédent. Dans l'exemple ci-dessous, remarquez que les choses importantes sont tout en haut. Par exemple, les membres bindés au controlleur tels que `vm.avengers` et `vm.title`. Les détails d'implémentation sont plus bas dessous. C'est simplement plus facile à lire. + Remarquez que dans l'exemple précédent les choses importantes sont dispersées. Dans l'exemple ci-dessous, vous noterez que le contenu important est en haut. Par exemple, les membres *bindables* au contrôleur tels que `vm.avengers` ou `vm.title`. Les détails d'implémentation sont plus bas. C'est simplement plus facile à lire. ```javascript /* * recommandé - * L'utilisation des déclarations de fonction - * et les membres bindables tout en haut. + * Utilisation des déclarations de fonction + * et les membres bindables au début. */ function Avengers(dataservice, logger) { var vm = this; @@ -561,16 +560,18 @@ Bien que ce guide explique le *quoi*, le *pourquoi* et le *comment*, il m'est ut } ``` -### Déplacer la Logique des Controlleurs +### Déplacez la logique métier dans les services ###### [Style [Y035](#style-y035)] - - Déplacer la logique d'un controlleur en la déléguant à des services et des factories. + - Déplacer la logique d'un contrôleur en la déléguant à des services ou *factories*. + + *Pourquoi ?* : La logique peut être ré-utilisée par plusieurs contrôleurs lorsqu'elle est placée au sein d'un service et exposée via une fonction. - *Pourquoi ?* : La logique peut être ré-utilisée par plusieurs controlleurs lorsqu'elle est placée au sein d'un service et exposée via une fonction. + *Pourquoi ?* : La logique dans un service peut être facilement isolée pour les tests unitaires, tandis que la logique d'appel dans un contrôleur peut facilement être *mockée*. - *Pourquoi ?* : La logique d'un service peut plus facilement être isolée dans un test unitaire, tandis que la logique d'appel dans le controlleur peut facilement être mockée. + *Pourquoi ?* : Cela supprime des dépendances et cache les détails d'implémentation au contrôleur. - *Pourquoi ?* : Cela supprime des dépendances et cache les détails d'implémentation au controlleur. + *Pourquoi ?* : Permet de garder le contrôleur le plus minimal et focalisé possible. ```javascript @@ -583,22 +584,21 @@ Bien que ce guide explique le *quoi*, le *pourquoi* et le *comment*, il m'est ut function checkCredit() { var settings = {}; - // Obtenir l'URL de base du service credit à partir de la config - // Positionne les headers requis pour le service credit + // Obtenir l'URL de base du service crédit à partir de la config + // Positionne les headers requis pour le service crédit // Prépare l'URL query string ou l'objet de données avec les données de requête. - // Ajoute les infos d'identification de l'utilsiateur afin que le service obtienne - // les bons droits de limite credit pour cet utilisateur. - // Utilise JSONP pour ce navigateur s'il ne supporte pas CORS + // Ajoute les infos d'identification de l'utilisateur afin que le service obtienne les bons droits de limite credit pour cet utilisateur. + // Utilise JSONP pour ce navigateur s'il ne supporte pas les CORS return $http.get(settings) .then(function(data) { - // Décompresse les données JSON dans l'objet réponse - // afin de rechercher maxRemainingAmount - vm.isCreditOk = vm.total <= maxRemainingAmount + // Décompresse les données JSON dans l'objet de réponse + // afin de rechercher maxRemainingAmount + vm.isCreditOk = vm.total <= maxRemainingAmount }) .catch(function(error) { // Interpréter l'erreur // Gérer le timeout ? Réessayer ? Essayer un service alternatif ? - // Re-rejetter avec une erreur appropriée à la vue de l'utilisateur + // Re-rejeter avec une erreur appropriée de l'utilisateur final }); }; } @@ -614,27 +614,27 @@ Bien que ce guide explique le *quoi*, le *pourquoi* et le *comment*, il m'est ut function checkCredit() { return creditService.isOrderTotalOk(vm.total) - .then(function(isOk) { vm.isCreditOk = isOk; }) + .then(function(isOk) { vm.isCreditOk = isOk; }) .catch(showServiceError); }; } ``` -### Gardez des Controlleurs Focalisés +### Gardez les contrôleurs focalisés ###### [Style [Y037](#style-y037)] - - Définir un controlleur pour une vue, et n'essayez pas de ré-utiliser le controlleur pour d'autres vues. Au lieu de cela, déplacez la logique réutilisable vers des factories et gardez le controlleur simple et focalisé sur sa vue. + - Définissez un contrôleur pour une vue, et n'essayez pas de ré-utiliser le contrôleur pour d'autres vues. Au lieu de cela, déplacez la logique réutilisable vers les *factories* et gardez le contrôleur simple et focalisé sur sa vue. - *Pourquoi ?*: La réutilisation de controlleurs sur plusieurs vues est fragile et une bonne couverture de tests de bout en bout ("end to end" ou "e2e") est requise afin d'assurer la stabilité dans les grosses applications. + *Pourquoi ?*: La réutilisation des contrôleurs sur plusieurs vues est fragilisante pour l'application et une bonne couverture de tests *end-to-end* (*e2e*) est requise afin d'assurer la stabilité sur l'ensemble d'une grosse application. -### Assigner les Controlleurs +### Assignation des contrôleurs ###### [Style [Y038](#style-y038)] - - Lorsqu'un controlleur doit être associé à une vue et qu'un composant pourrait être ré-utilisé par d'autres controlleurs ou vues, définissez les controlleurs avec leurs routes. + - Lorsqu'un contrôleur doit être associé à une vue et qu'un composant pourraient être ré-utilisés par d'autres contrôleurs ou vues, définissez les contrôleurs avec leurs routes. - Note : Si une Vue est chargée via d'autres moyens que la route, alors utilisez la syntaxe `ng-controller="Avengers as vm"`. + Note : Si une vue est chargée via d'autres moyens qu'une route, alors utilisez la syntaxe avec `ng-controller="Avengers as vm"`. - *Pourquoi ?* : Associer le controlleur dans la route permet que différentes routes invoquent d'autres paires de controlleurs et vues. Lorsque les controlleurs sont assignés dans la vue avec [`ng-controller`](https://docs.angularjs.org/api/ng/directive/ngController), cette vue est toujours associée avec le même controlleur. + *Pourquoi ?* : Associer le contrôleur dans la route permet à différentes routes d'invoquer d'autres paires contrôleur-vue. Lorsque les contrôleurs sont assignés dans la vue avec [`ng-controller`](https://docs.angularjs.org/api/ng/directive/ngController), cette vue est toujours associée avec le même contrôleur. ```javascript /* à éviter - lorsque l'utilisation avec une route et une association dynamique est voulue */ @@ -901,11 +901,11 @@ Bien que ce guide explique le *quoi*, le *pourquoi* et le *comment*, il m'est ut - Refactorer la logique pour faire les opérations sur les données et les interactions avec la donnée dans une factory. Rendez les services de données responsables des appels ajax, du local storage, du stockage en mémoire, ou toute autre opérations sur les données. - *Pourquoi ?* : La responsabilité du controlleur est la présentation et l'assemblage des informations pour la vue. Il ne devrait pas se soucier de la façon dont la donnée est récupérée, mais seulement de la façon de la demander. Séparer des services de données déplace la logique du 'comment récupérer une donnée' dans ce service de donnée, et laisse le controlleur plus simple et plus focalisé sur la vue. + *Pourquoi ?* : La responsabilité du contrôleur est la présentation et l'assemblage des informations pour la vue. Il ne devrait pas se soucier de la façon dont la donnée est récupérée, mais seulement de la façon de la demander. Séparer des services de données déplace la logique du 'comment récupérer une donnée' dans ce service de donnée, et laisse le contrôleur plus simple et plus focalisé sur la vue. - *Pourquoi ?* : Cela le rend plus facile à tester (en mockant ou avec le vrai) les appels aux données lorsque l'on teste un controlleur qui utilise un service de données. + *Pourquoi ?* : Cela le rend plus facile à tester (en mockant ou avec le vrai) les appels aux données lorsque l'on teste un contrôleur qui utilise un service de données. - *Pourquoi ?* : L'implémentation d'un service de données peut avoir du code très spécifique pour gérer le référentiel des données. Celà peut inclure des entêtes, la façon de dialoguer avec la donnée, ou des dépendances vers d'autres services tels que $http. La séparation de la logique vers un service de données encapsule cette logique dans un unique endroit en cachant les détails d'implémentation du consommateur externe (peut-être un controlleur), en rendant également plus simple les changements d'implémentation. + *Pourquoi ?* : L'implémentation d'un service de données peut avoir du code très spécifique pour gérer le référentiel des données. Celà peut inclure des entêtes, la façon de dialoguer avec la donnée, ou des dépendances vers d'autres services tels que $http. La séparation de la logique vers un service de données encapsule cette logique dans un unique endroit en cachant les détails d'implémentation du consommateur externe (peut-être un contrôleur), en rendant également plus simple les changements d'implémentation. ```javascript /* Recommandé */ @@ -938,12 +938,12 @@ Bien que ce guide explique le *quoi*, le *pourquoi* et le *comment*, il m'est ut } ``` - Note : Le service de données est appellé depuis des consommateurs, tels que des controlleurs, en leur cachant l'implémentation, comme le montre l'éxemple ci-dessous. + Note : Le service de données est appellé depuis des consommateurs, tels que des contrôleurs, en leur cachant l'implémentation, comme le montre l'éxemple ci-dessous. ```javascript /* Recommandé */ - // un controlleur qui appelle la factory du service de données + // un contrôleur qui appelle la factory du service de données angular .module('app.avengers') .controller('Avengers', Avengers); @@ -1194,15 +1194,15 @@ Bien que ce guide explique le *quoi*, le *pourquoi* et le *comment*, il m'est ut ### Directives et ControllerAs ###### [Style [Y075](#style-y075)] - - Utilisez la syntaxe `controller as` avec une directive pour être cohérent avec l'utilisation de `controller as` pour l'association de la vue et du controlleur. + - Utilisez la syntaxe `controller as` avec une directive pour être cohérent avec l'utilisation de `controller as` pour l'association de la vue et du contrôleur. *Pourquoi ?* : Ça fait sens et ce n'est pas difficile. - Note : La directive ci-dessous démontre une façon parmis d'autres d'utiliser le scope à l'intérieur de la fonction link et dans un controlleur de directive, par l'utilisation de controllerAs. J'ai in-liné le template que pour le mettre au même endroit. + Note : La directive ci-dessous démontre une façon parmis d'autres d'utiliser le scope à l'intérieur de la fonction link et dans un contrôleur de directive, par l'utilisation de controllerAs. J'ai in-liné le template que pour le mettre au même endroit. Note : Concernant l'injection de dépendance, voir [Identifier Manuellement les Dépendances](#manual-annotating-for-dependency-injection). - Note : Remarquez que le controlleur de la directive est à l'extérieur de la closure de la directive. Cette façon de faire évite le problème des injections plus disponibles après le `return`. + Note : Remarquez que le contrôleur de la directive est à l'extérieur de la closure de la directive. Cette façon de faire évite le problème des injections plus disponibles après le `return`. ```html
@@ -1260,9 +1260,9 @@ Bien que ce guide explique le *quoi*, le *pourquoi* et le *comment*, il m'est ut ###### [Style [Y076](#style-y076)] - - Utilisez `bindToController = true` lorsque vous utilisez la syntaxe `controller as` avec une directive quand vous voulez binder le scope externe au scope du controlleur de la directive. + - Utilisez `bindToController = true` lorsque vous utilisez la syntaxe `controller as` avec une directive quand vous voulez binder le scope externe au scope du contrôleur de la directive. - *Pourquoi ?* : Cela rend plus facile de binder le scope externe au scope du controlleur de la directive. + *Pourquoi ?* : Cela rend plus facile de binder le scope externe au scope du contrôleur de la directive. Note : `bindToController` a été introduit à partir de Angular 1.3.0. @@ -1307,18 +1307,18 @@ Bien que ce guide explique le *quoi*, le *pourquoi* et le *comment*, il m'est ut **[Retour en haut de page](#table-des-matières)** -## Résolution des Promesses pour un Controlleur +## Résolution des Promesses pour un Contrôleur ### Promesses d'Activation du Controller ###### [Style [Y080](#style-y080)] - - Résolvez la logique de démarrage d'un controlleur dans une fonction `activate`. + - Résolvez la logique de démarrage d'un contrôleur dans une fonction `activate`. - *Pourquoi ?* : Placer la logique de démarrage toujours au même endroit permet de le rendre plus facile à localiser, plus cohérent à tester, et permet d'éviter la dispersion de la logique d'activation à travers le controlleur. + *Pourquoi ?* : Placer la logique de démarrage toujours au même endroit permet de le rendre plus facile à localiser, plus cohérent à tester, et permet d'éviter la dispersion de la logique d'activation à travers le contrôleur. - *Pourquoi ?* : La fonction `activate` d'un controlleur rend pratique la ré-utilisation de la logique pour un refraichissement du controlleur ou de la vue, garde cette logique à un seul endroit, envoie l'utilisateur plus rapidement à la Vue, rend les animations faciles sur la `ng-view` ou l'`ui-view`, et c'est rendu plus vif à l'utilisateur. + *Pourquoi ?* : La fonction `activate` d'un contrôleur rend pratique la ré-utilisation de la logique pour un refraichissement du contrôleur ou de la vue, garde cette logique à un seul endroit, envoie l'utilisateur plus rapidement à la Vue, rend les animations faciles sur la `ng-view` ou l'`ui-view`, et c'est rendu plus vif à l'utilisateur. - Note : Si vous avez besoin d'annuler sous conditions la route avant de vous mettre à utiliser le controlleur, utilisez une [résolution de route](#style-y081) à la place. + Note : Si vous avez besoin d'annuler sous conditions la route avant de vous mettre à utiliser le contrôleur, utilisez une [résolution de route](#style-y081) à la place. ```javascript /* à éviter */ @@ -1357,15 +1357,15 @@ Bien que ce guide explique le *quoi*, le *pourquoi* et le *comment*, il m'est ut ### Promesses de Résolution de Route ###### [Style [Y081](#style-y081)] - - Lorsqu'un controlleur dépend d'une promesse qui doit être résolue avant qu'un controlleur soit activé, résolvez ces dépendances dans le `$routeProvider`. Si vous avez besoin d'annuler une route sous certaines conditions avant que le controlleur soit activé, utilisez un resolver de route. + - Lorsqu'un contrôleur dépend d'une promesse qui doit être résolue avant qu'un contrôleur soit activé, résolvez ces dépendances dans le `$routeProvider`. Si vous avez besoin d'annuler une route sous certaines conditions avant que le contrôleur soit activé, utilisez un resolver de route. - Utilisez un resolver de route dès lors que vous voulez décider d'annuler la route avant même de commencer à naviguer vers la Vue. - *Pourquoi ?* : Un controlleur pourrait avoir besoin de données avant qu'il se charge. Cette donnée pourrait venir d'une promesse via une factory personnalisée ou de [$http](https://docs.angularjs.org/api/ng/service/$http). Utiliser une [resolution de route](https://docs.angularjs.org/api/ngRoute/provider/$routeProvider) permet à la promesse de se résoudre avant que la logique du controlleur s'éxécute, ainsi on peut prendre des actions basées sur cette donnée à partir de la promesse. + *Pourquoi ?* : Un contrôleur pourrait avoir besoin de données avant qu'il se charge. Cette donnée pourrait venir d'une promesse via une factory personnalisée ou de [$http](https://docs.angularjs.org/api/ng/service/$http). Utiliser une [resolution de route](https://docs.angularjs.org/api/ngRoute/provider/$routeProvider) permet à la promesse de se résoudre avant que la logique du contrôleur s'éxécute, ainsi on peut prendre des actions basées sur cette donnée à partir de la promesse. - *Pourquoi ?* : Le code s'éxécute après la route et dans la fonction activate du controlleur. La Vue commence à se charger tout de suite. Le data binding démarre quand la promesse d'activation se résoud. Une animation de "chargement" peut être affichée pendant que la vue opère la transition (via `ng-view` ou `ui-view`). + *Pourquoi ?* : Le code s'éxécute après la route et dans la fonction activate du contrôleur. La Vue commence à se charger tout de suite. Le data binding démarre quand la promesse d'activation se résoud. Une animation de "chargement" peut être affichée pendant que la vue opère la transition (via `ng-view` ou `ui-view`). - Note : Le code s'éxécute avant la route via une promesse. Le rejet de la promesse annule le routage. Sa résolution met la nouvelle vue en attente de la résolution du routage. Une animation de "chargement" peut être affichée avant la résolution et lorsque la vue entre en transition. Si vous voulez aller à la Vue plus vite et que vous n'avez pas besoin d'un point pour décider si vous voulez atteindre la Vue, il est conseillé d'utiliser la [technique de l'activation de controlleur](#style-y080) à la place. + Note : Le code s'éxécute avant la route via une promesse. Le rejet de la promesse annule le routage. Sa résolution met la nouvelle vue en attente de la résolution du routage. Une animation de "chargement" peut être affichée avant la résolution et lorsque la vue entre en transition. Si vous voulez aller à la Vue plus vite et que vous n'avez pas besoin d'un point pour décider si vous voulez atteindre la Vue, il est conseillé d'utiliser la [technique de l'activation de contrôleur](#style-y080) à la place. ```javascript /* à éviter */ @@ -1466,7 +1466,7 @@ Bien que ce guide explique le *quoi*, le *pourquoi* et le *comment*, il m'est ut - Eviter l'utilisation de la syntaxe raccourcie de déclaration des dépendances sans utiliser une approche sûre pour la minification. - *Pourquoi ?* : Les paramètres du composant (ex: controlleur, factory, etc.) seront converties en variables mutilées. Par exemple, ˋcommonˋet ˋdataserviceˋ deviendraient ˋaˋet ˋbˋ et ne seraient pas trouvées par Angular. + *Pourquoi ?* : Les paramètres du composant (ex: contrôleur, factory, etc.) seront converties en variables mutilées. Par exemple, ˋcommonˋet ˋdataserviceˋ deviendraient ˋaˋet ˋbˋ et ne seraient pas trouvées par Angular. ```javascript /* à éviter - non sûr pour la minification */ @@ -1529,7 +1529,7 @@ Bien que ce guide explique le *quoi*, le *pourquoi* et le *comment*, il m'est ut } ``` - Note : Lorsque votre fonction est sous une instruction de return, le $inject peut ne pas être accessible (cela pourrait arriver dans une directive). Vous pouvez vous en sortir en bougeant le controlleur en dehors de la directive. + Note : Lorsque votre fonction est sous une instruction de return, le $inject peut ne pas être accessible (cela pourrait arriver dans une directive). Vous pouvez vous en sortir en bougeant le contrôleur en dehors de la directive. ```javascript /* À éviter */ @@ -1840,7 +1840,7 @@ Bien que ce guide explique le *quoi*, le *pourquoi* et le *comment*, il m'est ut * possibilités couramment rencontrées. */ - // Controlleurs + // Contrôleurs avengers.js avengers.controller.js avengersController.js @@ -1856,7 +1856,7 @@ Bien que ce guide explique le *quoi*, le *pourquoi* et le *comment*, il m'est ut * recommandé */ - // controlleurs + // contrôleurs avengers.controller.js avengers.controller.spec.js @@ -1882,13 +1882,13 @@ Bien que ce guide explique le *quoi*, le *pourquoi* et le *comment*, il m'est ut avenger-profile.directive.spec.js ``` - Note : Une autre convention courante consiste à nommer les fichiers de controlleurs sans le mot `controller` dans le nom de fichier comme `avengers.js`au lieu de `avengers.controller.js`. Toutes les autres conventions étant maintenues avec un suffixe par type. Les controlleurs étant les les types de composant les plus courants, ça permet d'économiser la frappe au clavier tout en étant facilement identifiable. Je vous conseille de choisir une convention et de vous y tenir dans toute l'équipe. Ma préference est `avengers.controller.js`. + Note : Une autre convention courante consiste à nommer les fichiers de contrôleurs sans le mot `controller` dans le nom de fichier comme `avengers.js`au lieu de `avengers.controller.js`. Toutes les autres conventions étant maintenues avec un suffixe par type. Les contrôleurs étant les les types de composant les plus courants, ça permet d'économiser la frappe au clavier tout en étant facilement identifiable. Je vous conseille de choisir une convention et de vous y tenir dans toute l'équipe. Ma préference est `avengers.controller.js`. ```javascript /** * recommandé */ - // Controlleurs + // Contrôleurs avengers.js avengers.spec.js ``` @@ -1912,12 +1912,12 @@ Bien que ce guide explique le *quoi*, le *pourquoi* et le *comment*, il m'est ut avenger-profile.directive.spec.js ``` -### Nommage des Controlleurs +### Nommage des Contrôleurs ###### [Style [Y123](#style-y123)] - - Utilisez des noms cohérents pour tous les controlleurs nommés d'après leur fonctionnalité. Utilisez le CamelCaseEnMajuscule, puisque ce sont des constructeurs. + - Utilisez des noms cohérents pour tous les contrôleurs nommés d'après leur fonctionnalité. Utilisez le CamelCaseEnMajuscule, puisque ce sont des constructeurs. - *Pourquoi ?* : Fournit une façon cohérente d'identifier rapidement et de référencer les controlleurs. + *Pourquoi ?* : Fournit une façon cohérente d'identifier rapidement et de référencer les contrôleurs. *Pourquoi ?* : Le CamelCaseEnMajuscules est la convention pour identifier les objets qui peuvent être instanciés avec un controleur. @@ -1934,10 +1934,10 @@ Bien que ce guide explique le *quoi*, le *pourquoi* et le *comment*, il m'est ut function HeroAvengersController() { } ``` -### Suffixe des Noms de Controlleurs +### Suffixe des Noms de Contrôleurs ###### [Style [Y124](#style-y124)] - - Ajoutez au nom du controlleur le suffixe ˋControllerˋ. + - Ajoutez au nom du contrôleur le suffixe ˋControllerˋ. *Pourquoi ?* : Le suffixe ˋControllerˋ est utilisé souvent et il est plus explicitement descriptif. @@ -2066,7 +2066,7 @@ Bien que ce guide explique le *quoi*, le *pourquoi* et le *comment*, il m'est ut - Lorsque vous regardez un fichier vous devriez instantanément savoir ce qu'il contient ce qu'il représente. - *Pourquoi ?* : Vous passez moins de temps à fouiller et vous perdre pour cherche le code, et devenez de plus en plus efficient. Si ça implique des noms de fichier plus long, alors d'accord. Soyez descriptif avec les noms de fichier et leur contenu ne doit contenir exactement qu'un seul composant. Éviter les fichier avec plusieurs controlleurs, plusieurs services, ou un mélange. On pourrait admettre une exception à cette règle si j'ai un ensemble de fonctionnalités très petites qui sont toutes reliées entre elles, elles sont toujours facilement identifiables. + *Pourquoi ?* : Vous passez moins de temps à fouiller et vous perdre pour cherche le code, et devenez de plus en plus efficient. Si ça implique des noms de fichier plus long, alors d'accord. Soyez descriptif avec les noms de fichier et leur contenu ne doit contenir exactement qu'un seul composant. Éviter les fichier avec plusieurs contrôleurs, plusieurs services, ou un mélange. On pourrait admettre une exception à cette règle si j'ai un ensemble de fonctionnalités très petites qui sont toutes reliées entre elles, elles sont toujours facilement identifiables. ### Plat ###### [Style [Y143](#style-y143)] @@ -2089,14 +2089,14 @@ Bien que ce guide explique le *quoi*, le *pourquoi* et le *comment*, il m'est ut ### Règles Générales ###### [Style [Y150](#style-y150)] - - Vous devez avoir une vue court terme et une vision à long terme. En d'autres mots, commencez petit et garder en tête là où en est votre application. Tout le code de l'appli va dans un répertoire racine nommé `app`. Tout contenu fonctionnel doit être rangé dans son propre fichier. Chaque controlleur, service, module, vue doit avoir son propre fichier. Tous les scripts provenant de fournisseurs extérieurs doivent être rangés dans un autre répertoire racine et non dans le répertoire `app`. Le code que l'on écrit pas soi-même ne doit pas se mélanger avec son appli (`bower_components`, `script`, `lib`). + - Vous devez avoir une vue court terme et une vision à long terme. En d'autres mots, commencez petit et garder en tête là où en est votre application. Tout le code de l'appli va dans un répertoire racine nommé `app`. Tout contenu fonctionnel doit être rangé dans son propre fichier. Chaque contrôleur, service, module, vue doit avoir son propre fichier. Tous les scripts provenant de fournisseurs extérieurs doivent être rangés dans un autre répertoire racine et non dans le répertoire `app`. Le code que l'on écrit pas soi-même ne doit pas se mélanger avec son appli (`bower_components`, `script`, `lib`). Note : Vous trouverez plus de détails et les justifications derrière la structure sur [ce post original sur la structure des applications](http://www.johnpapa.net/angular-app-structuring-guidelines/). ### Layout ###### [Style [Y151](#style-y151)] - - Placez les composants qui définissent le layout principal de l'application dans un répertoire nommé `layout`. Il devrait inclure une vue noyau et le controlleur devrait agir comme conteneur pour l'appli, la navigation, les menus, les zones de contenu, et les autres régions. + - Placez les composants qui définissent le layout principal de l'application dans un répertoire nommé `layout`. Il devrait inclure une vue noyau et le contrôleur devrait agir comme conteneur pour l'appli, la navigation, les menus, les zones de contenu, et les autres régions. *Pourquoi ?* : Organise tout le layout à un seul endroit réutilisé dans l'application. @@ -2154,7 +2154,7 @@ Bien que ce guide explique le *quoi*, le *pourquoi* et le *comment*, il m'est ut ![Structure d'une Appli Exemple](https://raw.githubusercontent.com/johnpapa/angular-styleguide/master/assets/modularity-2.png) - Note : N'utilisez pas une structuration de répertoires-par-type. Cela requiert de se déplacer entre de multiples répertoires lorsqu'on travaille sur une fonctionnalité et cela devient rapidement difficile à manier lorsque l'application grossit à 5, 10 ou plus de 25 vues et controlleurs (et autres), ce qui complique la localisation par rapport à des répertoires-par-fonctionnalité. + Note : N'utilisez pas une structuration de répertoires-par-type. Cela requiert de se déplacer entre de multiples répertoires lorsqu'on travaille sur une fonctionnalité et cela devient rapidement difficile à manier lorsque l'application grossit à 5, 10 ou plus de 25 vues et contrôleurs (et autres), ce qui complique la localisation par rapport à des répertoires-par-fonctionnalité. ```javascript /* @@ -2777,7 +2777,7 @@ Utilisez des templates de fichier ou des fragments pour vous aider à suivre des - Dans un fichier de type JavaScript, tapez ces commandes suivies par la touche `TAB` ```javascript - ngcontroller // crée un controlleur Angular + ngcontroller // crée un contrôleur Angular ngdirective // crée une directive Angular ngfactory // crée une factory Angular ngmodule // crée un module Angular @@ -2804,7 +2804,7 @@ Utilisez des templates de fichier ou des fragments pour vous aider à suivre des - Dans un fichier de type JavaScript, tapez ces commandes suivies de la touche `TAB` : ```javascript - ng-c // crée un controlleur Angular + ng-c // crée un contrôleur Angular ng-f // crée une factory Angular ng-m // crée un module Angular ``` From 3da6ff7c33e58662703ca74e17f5d36689a83879 Mon Sep 17 00:00:00 2001 From: Xavier Haniquaut Date: Tue, 18 Aug 2015 17:20:47 +0200 Subject: [PATCH 050/248] [fr-FR] Refresh french translation : Services --- i18n/fr-FR.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/i18n/fr-FR.md b/i18n/fr-FR.md index 2baee656..16c81ac1 100644 --- a/i18n/fr-FR.md +++ b/i18n/fr-FR.md @@ -689,9 +689,9 @@ Bien que ce guide explique le *quoi*, le *pourquoi* et le *comment*, il m'est ut ### Singletons ###### [Style [Y040](#style-y040)] - - Les Services sont instanciés avec le mot clé `new`, utilisez `this` pour les méthodes publiques et les variables. Puisque ces derniers sont tellement similaires aux factories, utilisez à la place une factory pour la cohérence. + - Les services sont instanciés avec le mot clé `new`, utilisez `this` pour les méthodes publiques et les variables. Puisque ces derniers sont tellement similaires aux *factories*, utilisez à la place une *factory* pour la cohérence. - Note : [Tous les serices Angular services sont des singletons](https://docs.angularjs.org/guide/services). Celà signifie qu'il n'y a qu'une seule instance d'un service donné par injecteur. + Note : [Tous les services Angular sont des singletons](https://docs.angularjs.org/guide/services). Cela signifie qu'il n'y a qu'une seule instance d'un service donné par injecteur. ```javascript // service From 69238f75aef59ec85b302c28c160409ba09bf290 Mon Sep 17 00:00:00 2001 From: Xavier Haniquaut Date: Tue, 18 Aug 2015 17:42:26 +0200 Subject: [PATCH 051/248] [fr-FR] Refresh french translation : Factories --- i18n/fr-FR.md | 62 +++++++++++++++++++++++++-------------------------- 1 file changed, 31 insertions(+), 31 deletions(-) diff --git a/i18n/fr-FR.md b/i18n/fr-FR.md index 16c81ac1..70048ea5 100644 --- a/i18n/fr-FR.md +++ b/i18n/fr-FR.md @@ -56,7 +56,7 @@ Bien que ce guide explique le *quoi*, le *pourquoi* et le *comment*, il m'est ut 1. [Contribuer](#contribuer) 1. [Licence](#license) -## Responsabilité Unique +## Responsabilité unique ### Règle d'unicité ###### [Style [Y001](#style-y001)] @@ -721,32 +721,32 @@ Bien que ce guide explique le *quoi*, le *pourquoi* et le *comment*, il m'est ut } ``` -**[Retour en faut de page](#table-des-matières)** +**[Retour en haut de page](#table-des-matières)** ## Factories -### Responsabilité Unique +### Responsabilité unique ###### [Style [Y050](#style-y050)] - - Les factories ne devraient avoir qu'une [unique responsabilité](http://en.wikipedia.org/wiki/Single_responsibility_principle), c'est-à-dire encapsulé par son contexte. Une fois qu'une factory commence à dépasser ce but unique, une nouvelle factory devrait être créée. + - Les *factories* ne devraient avoir qu'une [seule et unique responsabilité](http://en.wikipedia.org/wiki/Single_responsibility_principle), qui serait encapsulée par son contexte. Une fois qu'une *factory* commence à dépasser cet unique cadre, une nouvelle *factory* devrait être créée. ### Singletons ###### [Style [Y051](#style-y051)] - - Les factories sont des singletons et renvoient un objet qui contient les membres du service. + - Les *factories* sont des singletons et retournent un objet qui contient les membres du service. Note : [Tous les services Angular sont des singletons](https://docs.angularjs.org/guide/services). -### Membres Accessibles Tout en Haut +### Membres accessibles au début ###### [Style [Y052](#style-y052)] - - Exposer les membres appellables du services (son interface) en haut, utilisant une technique dérivée du Principe du Module Révélateur ou [Revealing Module Pattern](http://addyosmani.com/resources/essentialjsdesignpatterns/book/#revealingmodulepatternjavascript). + - Placez les membres appelables du services (son interface) en haut, utilisant une technique dérivée du [*Revealing Module Pattern*](http://addyosmani.com/resources/essentialjsdesignpatterns/book/#revealingmodulepatternjavascript). - *Pourquoi ?* : Placer les membres appellables tout en haut le rend facile à lire et vous aide à identifier instantanément quels membres du service peut être appellé et doit être testé unitairement (et/ou mocké). + *Pourquoi ?* : Placer les membres appelables au début facilite la lecture et vous aide à identifier instantanément quels membres du service peuvent être appelés et doivent être testés unitairement (et/ou *mockés*). - *Pourquoi ?* : Ceci est spécialement conseillé lorsque le fichier devient un peu long et celà aide à éviter le besoin de faire défiler pour voir ce qui est exposé. + *Pourquoi ?* : C'est particulièrement efficace lorsque le fichier devient long et permet d'éviter de faire défiler tout le code pour voir ce qui est exposé. - *Pourquoi ?* : Placer les fonctions au fil de l'écriture semble être facile, mais quand ces fonctions ont plus d'une ligne de code, elles peuvent réduire la lisibilité et causer plus de défilement. Définir l'interface à appeller via le service renvoyé déplace les détails d'implémentation plus bas, garde l'interface appellante tout en haut, et rend le tout plus facile à lire. + *Pourquoi ?* : Placer les fonctions au fil de l'écriture semble facile, mais quand elles font plus d'une ligne, elles peuvent vite réduire la lisibilité et causer plus de défilement. Définir l'interface à appeler via le service retourné déplace les détails d'implémentation plus bas, garde l'interface d'appel en haut, et rend le tout plus facile à lire. ```javascript /* à éviter */ @@ -790,52 +790,52 @@ Bien que ce guide explique le *quoi*, le *pourquoi* et le *comment*, il m'est ut } ``` - De cette façon, les bindings sont dupliqués à travers l'objet hôte, les valeurs primitives ne peuvant se mettre à jour toutes seules grâce au principe du module révélateur. + De cette façon, les *bindings* sont répliqués à travers l'objet de capture, les valeurs primitives ne peuvent pas se mettre à jour toutes seules grâce au *revealing module pattern*. - ![Factories Utilisants "Au dessus du Pliage"](https://raw.githubusercontent.com/johnpapa/angular-styleguide/master/assets/above-the-fold-2.png) + ![Factories utilisant la syntaxe avec les membres bindables au dessus](https://raw.githubusercontent.com/johnpapa/angular-styleguide/master/assets/above-the-fold-2.png) -### Déclaration de Fonctions pour Cacher les Détails d'Implémentation +### Déclaration des fonctions pour cacher les détails d'implémentation ###### [Style [Y053](#style-y053)] - - Utilisez les déclarations de fonction pour cacher les détails d'implémentation. Gardez les membres accessibles de la factory tout en haut. Faites-les pointer vers les déclarations de fonction qui apparaissent plus loin dans le fichier. Pour plus de détails, voir [ce post](http://www.johnpapa.net/angular-function-declarations-function-expressions-and-readable-code). + - Utilisez les déclarations de fonctions pour cacher les détails d'implémentation. Gardez les membres accessibles de la *factory* en haut. Faites-les pointer vers les déclarations de fonction qui apparaissent plus loin dans le fichier. Pour plus de détails, vous pouvez lire [cet article](http://www.johnpapa.net/angular-function-declarations-function-expressions-and-readable-code). - *Pourquoi ?* : Placer les membres accessibles tout en haut permet de le rendre facile à lire et vous aide à identifier instantanément quelles fonctions de la factory vous pouvez accéder de l'extérieur. + *Pourquoi ?* : Placer les membres accessibles en haut facilite la lecture et vous aide instantanément à identifier quels membres de la *factory* peuvent être appelés depuis l'extérieur. - *Pourquoi ?* : Placer les détails d'implémentation d'une fonction plus loin dans le fichier déplace cette complexité en dehors de la vue afin de voir les choses importantes tout en haut. + *Pourquoi ?* : Placer les détails d'implémentation d'une fonction plus bas dans le fichier permet de masquer la complexité. Ainsi vous ne pouvez voir que les choses importantes en haut. - *Pourquoi ?* : Les déclarations de fonctions sont hissées de telle sorte qu'il n'y ait aucun soucis à utiliser une fonction avant qu'elle ne soit définie (comme il serait de mise avec les expressions fonctionnelles). + *Pourquoi ?* : Les déclarations de fonctions sont *hoistées* donc il n'y a pas problème à utiliser une fonction avant qu'elle ne soit définie (alors que ça serait le cas avec les expressions de fonction). - *Pourquoi ?* : Vous n'aurez plus jamais à vous en faire avec les déclarations de fonction dont le déplacement de `var a` avant `var b` pourrait casser votre code à cause d'une dépendance de `a` vers `b`. + *Pourquoi ?* : Vous ne vous préoccuperez plus des déclarations de fonctions déplaçant `var a` avant `var b` cassant ainsi votre code car `a` dépendait de `b`. - *Pourquoi ?* : L'ordre est critique avec les expressions fonctionnelles. + *Pourquoi ?* : L'ordre est critique avec les expressions de fonctions. ```javascript /** * À éviter - * L'utilisation des expressions fonctionnelles + * Utilisation des expressions de fonctions */ function dataservice($http, $location, $q, exception, logger) { var isPrimed = false; var primePromise; var getAvengers = function() { - // avec les détails d'implémentation ici + // détails d'implémentation }; var getAvengerCount = function() { - // avec les détails d'implémentation ici + // détails d'implémentation }; var getAvengersCast = function() { - // avec les détails d'implémentation ici + // détails d'implémentation }; var prime = function() { - // avec les détails d'implémentation ici + // détails d'implémentation }; var ready = function(nextPromises) { - // avec les détails d'implémentation ici + // détails d'implémentation }; var service = { @@ -852,8 +852,8 @@ Bien que ce guide explique le *quoi*, le *pourquoi* et le *comment*, il m'est ut ```javascript /** * recommandé - * L'utilisation des déclararions de fonction - * et des membres accessibles tout en haut. + * Utilisation des déclarations de fonctions + * et des membres accessibles au début. */ function dataservice($http, $location, $q, exception, logger) { var isPrimed = false; @@ -871,19 +871,19 @@ Bien que ce guide explique le *quoi*, le *pourquoi* et le *comment*, il m'est ut //////////// function getAvengers() { - // avec les détails d'implémentation ici + // détails d'implémentation } function getAvengerCount() { - // avec les détails d'implémentation ici + // détails d'implémentation } function getAvengersCast() { - // avec les détails d'implémentation ici + // détails d'implémentation } function prime() { - // avec les détails d'implémentation ici + // détails d'implémentation } function ready(nextPromises) { From 32950f07d4d81103c39d57aa14c056319ca2acbe Mon Sep 17 00:00:00 2001 From: Xavier Haniquaut Date: Tue, 18 Aug 2015 19:14:40 +0200 Subject: [PATCH 052/248] [fr-FR] Refresh french translation : Data services --- i18n/fr-FR.md | 34 +++++++++++++++++----------------- 1 file changed, 17 insertions(+), 17 deletions(-) diff --git a/i18n/fr-FR.md b/i18n/fr-FR.md index 70048ea5..75f4fbb3 100644 --- a/i18n/fr-FR.md +++ b/i18n/fr-FR.md @@ -894,23 +894,23 @@ Bien que ce guide explique le *quoi*, le *pourquoi* et le *comment*, il m'est ut **[Retour en haut de page](#table-des-matières)** -## Services de Données +## Services de données -### Séparer les Appels de Données +### Séparer les appels aux données ###### [Style [Y060](#style-y060)] - - Refactorer la logique pour faire les opérations sur les données et les interactions avec la donnée dans une factory. Rendez les services de données responsables des appels ajax, du local storage, du stockage en mémoire, ou toute autre opérations sur les données. + - *Refactorez* la logique pour faire les opérations et interactions avec les données dans une *factory*. Rendez les services de données responsables des appels *XHR*, du *local storage*, du stockage en mémoire, ou de toute autre opération sur les données. - *Pourquoi ?* : La responsabilité du contrôleur est la présentation et l'assemblage des informations pour la vue. Il ne devrait pas se soucier de la façon dont la donnée est récupérée, mais seulement de la façon de la demander. Séparer des services de données déplace la logique du 'comment récupérer une donnée' dans ce service de donnée, et laisse le contrôleur plus simple et plus focalisé sur la vue. + *Pourquoi ?* : Les responsabilités du contrôleur sont la présentation et l'assemblage des informations pour la vue. Il ne devrait pas avoir à se soucier de la façon dont les données sont récupérées mais seulement de la façon de les demander. Séparer les services de données transforme la logique du contrôleur en logique de « À quel service vais-je demander ces données ? ». Le contrôleur esr alors plus simple est plus focalisé sur sa vue. - *Pourquoi ?* : Cela le rend plus facile à tester (en mockant ou avec le vrai) les appels aux données lorsque l'on teste un contrôleur qui utilise un service de données. + *Pourquoi ?* : Cela rend plus facile à tester (*mocké* ou en utilisant le vrai) les appels aux données lorsque l'on teste un contrôleur qui utilise un service de données. - *Pourquoi ?* : L'implémentation d'un service de données peut avoir du code très spécifique pour gérer le référentiel des données. Celà peut inclure des entêtes, la façon de dialoguer avec la donnée, ou des dépendances vers d'autres services tels que $http. La séparation de la logique vers un service de données encapsule cette logique dans un unique endroit en cachant les détails d'implémentation du consommateur externe (peut-être un contrôleur), en rendant également plus simple les changements d'implémentation. + *Pourquoi ?* : L'implémentation d'un service de données peut contenir du code très spécifique pour gérer le système de données. Cela peut inclure des entêtes, la façon de dialoguer avec les données, ou d'autres services tels que `$http`. Séparer la logique vers un service de données permet d'encapsuler cette logique dans un unique endroit en cachant les détails d'implémentation des consommateurs externes (tel qu'un contrôleur), en rendant également plus simple les changements d'implémentation. ```javascript /* Recommandé */ - // une factory service de données + // Factory jouant le rôle de service de données angular .module('app.core') .factory('dataservice', dataservice); @@ -938,12 +938,12 @@ Bien que ce guide explique le *quoi*, le *pourquoi* et le *comment*, il m'est ut } ``` - Note : Le service de données est appellé depuis des consommateurs, tels que des contrôleurs, en leur cachant l'implémentation, comme le montre l'éxemple ci-dessous. + Note : Le service de données est appelé par des consommateurs extérieur, tels que des contrôleurs, en leur cachant l'implémentation, comme ci-dessous. ```javascript /* Recommandé */ - // un contrôleur qui appelle la factory du service de données + // Contrôleur appelant la factory faisant le service de données angular .module('app.avengers') .controller('Avengers', Avengers); @@ -972,12 +972,12 @@ Bien que ce guide explique le *quoi*, le *pourquoi* et le *comment*, il m'est ut } ``` -### Retourner une promesse depuis un appel de donnée +### Retourner une promesse suite à un appel de données ###### [Style [Y061](#style-y061)] - - Lorsqu'un service de données retourne une promesse telle que $http, retournez une promesse dans votre fonction appelée. + - Quand vous appelez un service de données tel que `$http` qui retourne une *promise*, retournez également une *promise* dans votre fonction appelante. - *Pourquoi ?* : Vous pouvez chainer les promesses entre elles et ajouter des actions après que l'appel des données soit terminé puis résoudre ou rejeter la promesse. + *Pourquoi ?* : Vous pouvez chaîner les promesses entre elles et entreprendre d'autres actions après que l'appel soit terminé, puis résoudre ou rejeter la promesse. ```javascript /* recommandé */ @@ -987,13 +987,13 @@ Bien que ce guide explique le *quoi*, le *pourquoi* et le *comment*, il m'est ut function activate() { /** * Etape 1 - * Appel la fonction getAvengers pour récupérer - * les données avenger et attend la promesse + * Appelle la fonction getAvengers pour récupérer + * les données «avenger» et attend la promise. */ return getAvengers().then(function() { /** * Etape 4 - * Exécute une action à la résolution de la promesse finale + * Exécute une action à la résolution de la promise finale. */ logger.info('Activated Avengers View'); }); @@ -1003,13 +1003,13 @@ Bien que ce guide explique le *quoi*, le *pourquoi* et le *comment*, il m'est ut /** * Etape 2 * Appel du service de données pour récupérer les données - * et attend la promesse + * et attend la promesse. */ return dataservice.getAvengers() .then(function(data) { /** * Etape 3 - * Défini les donnée et résoue la promesse + * Définit les données et résout la promesse. */ vm.avengers = data; return vm.avengers; From a6c021bf9c562fd92fc050ab58feca83153512bf Mon Sep 17 00:00:00 2001 From: Xavier Haniquaut Date: Tue, 18 Aug 2015 19:55:56 +0200 Subject: [PATCH 053/248] [fr-FR] Refresh french translation : Directives --- i18n/fr-FR.md | 88 +++++++++++++++++++++++++++++---------------------- 1 file changed, 50 insertions(+), 38 deletions(-) diff --git a/i18n/fr-FR.md b/i18n/fr-FR.md index 75f4fbb3..79928fcf 100644 --- a/i18n/fr-FR.md +++ b/i18n/fr-FR.md @@ -1020,16 +1020,16 @@ Bien que ce guide explique le *quoi*, le *pourquoi* et le *comment*, il m'est ut **[Retour en haut de page](#table-des-matières)** ## Directives -### Limite de 1 Par Fichier +### Une directive par fichier ###### [Style [Y070](#style-y070)] - - Créer une directive par fichier. Nommer le fichier en fonction de la directive. + - Créez seulement une directive par fichier. Nommer le fichier en fonction de la directive. - *Pourquoi ?* : C'est facile de placer toutes les directives dans un fichier, mais difficile de les séparer, certains sont partagés par toute l'application, certain par modules, et certain juste par un module. + *Pourquoi ?* : Il est facile de placer toutes les directives dans un fichier, mais il l'est moins de les séparer après coup. Certaines sont partagées dans toute l'application, certaines par modules, et certaines juste par un seul module. - *Pourquoi ?* : Une directive par fichier est plus facilement maintenable. + *Pourquoi ?* : Une directive par fichier leur permet d'être plus facilement maintenables. - > Note : "**Bonne pratique** : Les directives devraient pouvoir s'auto-nettoyer. Vous pouvez utiliser `element.on('$destroy', ...)` ou `scope.$on('$destroy', ...)` pour lancer une fonction de nettoyage quand une directive est enlevée" ... - Documentation d'Angular + > Note : "**Bonne pratique** : Les directives devraient pouvoir s'auto-nettoyer. Vous pouvez utiliser `element.on('$destroy', ...)` ou bien `scope.$on('$destroy', ...)` pour lancer une fonction de nettoyage quand une directive est enlevée" ... - Documentation d'Angular ```javascript /* à éviter */ @@ -1038,25 +1038,25 @@ Bien que ce guide explique le *quoi*, le *pourquoi* et le *comment*, il m'est ut angular .module('app.widgets') - /* directive order spécifique pour le module order */ + /* directive spécifique pour le module order */ .directive('orderCalendarRange', orderCalendarRange) - /* directive sales pouvant être utilisée n'importe où dans l'application sales */ + /* directive pouvant être utilisée n'importe où dans l'application sales */ .directive('salesCustomerInfo', salesCustomerInfo) - /* directive spinner pouvant être utilisée n'importe où dans l'application */ + /* directive pouvant être utilisée n'importe où dans l'application */ .directive('sharedSpinner', sharedSpinner); function orderCalendarRange() { - /* détails de l'implémentation */ + /* détails d'implémentation */ } function salesCustomerInfo() { - /* détails de l'implémentation */ + /* détails d'implémentation */ } function sharedSpinner() { - /* détails de l'implémentation */ + /* détails d'implémentation */ } ``` @@ -1065,7 +1065,7 @@ Bien que ce guide explique le *quoi*, le *pourquoi* et le *comment*, il m'est ut /* calendarRange.directive.js */ /** - * @desc directive order spécifique pour le module order pour la compagnie Acme + * @desc directive spécifique pour le module order de l'entreprise Acme * @example
*/ angular @@ -1073,7 +1073,7 @@ Bien que ce guide explique le *quoi*, le *pourquoi* et le *comment*, il m'est ut .directive('acmeOrderCalendarRange', orderCalendarRange); function orderCalendarRange() { - /* détails de l'implémentation */ + /* détails d'implémentation */ } ``` @@ -1082,7 +1082,7 @@ Bien que ce guide explique le *quoi*, le *pourquoi* et le *comment*, il m'est ut /* customerInfo.directive.js */ /** - * @desc directive sales pouvant être utilisée n'importe où dans l'application sales pour la compagnie Acme + * @desc directive pouvant être utilisée n'importe où dans l'application sales de l'entreprise Acme * @example
*/ angular @@ -1090,7 +1090,7 @@ Bien que ce guide explique le *quoi*, le *pourquoi* et le *comment*, il m'est ut .directive('acmeSalesCustomerInfo', salesCustomerInfo); function salesCustomerInfo() { - /* détails de l'implémentation */ + /* détails d'implémentation */ } ``` @@ -1099,7 +1099,7 @@ Bien que ce guide explique le *quoi*, le *pourquoi* et le *comment*, il m'est ut /* spinner.directive.js */ /** - * @desc directive spinner pouvant être utilisée n'importe où dans l'application pour la compagnie Acme + * @desc directive pouvant être utilisée n'importe où dans l'application de l'entreprise Acme * @example
*/ angular @@ -1107,38 +1107,38 @@ Bien que ce guide explique le *quoi*, le *pourquoi* et le *comment*, il m'est ut .directive('acmeSharedSpinner', sharedSpinner); function sharedSpinner() { - /* détails de l'implémentation */ + /* détails d'implémentation */ } ``` - Note : Il y a plusieurs options de nommage pour les directives, puisqu'elles peuvent être utilisé par des scopes plus ou moins larges. Choisissez un nom qui rend la directive et son fichier clair et distinct. Des exemples sont définis plus bas, mais regarder la section des noms pour plus de recommandations. + Note : Il y a plusieurs options de nommage pour les directives puisqu'elles peuvent être utilisées à des échelles (*scopes*) plus ou moins larges. Choisissez un nom qui rend la directive et son fichier clairs et distincts. Des exemples sont définis plus bas mais regardez la section [nommage](#nommage) pour plus de recommandations. -### Manipuler le DOM dans une Directive +### Manipuler le DOM dans une directive ###### [Style [Y072](#style-y072)] - - Quand le DOM est directement manipulé, utilisez une directive. Si une alternative peut être utilisé avec le CSS pour définir le style ou les [services d'animation](https://docs.angularjs.org/api/ngAnimate), les templates Angular , [`ngShow`](https://docs.angularjs.org/api/ng/directive/ngShow) ou [`ngHide`](https://docs.angularjs.org/api/ng/directive/ngHide), mieux vaut les utiliser à la place. Par exemple, si la directive affiche ou cache un élément, utilisez ngHide/ngShow. + - Quand vous manipulez le DOM est directement, utilisez une directive. S'il existe des alternatives, comme par exemple le CSS pour définir les styles ou les [services d'animation](https://docs.angularjs.org/api/ngAnimate), les *templates* Angular , [`ngShow`](https://docs.angularjs.org/api/ng/directive/ngShow) ou [`ngHide`](https://docs.angularjs.org/api/ng/directive/ngHide), utilisez les à la place. Par exemple si la directive affiche ou cache un élément, utilisez ngHide ou ngShow. - *Pourquoi ?* : La manipulation du DOM peut être difficile à tester, debugger, et il y a souvent une meilleure façon de faire (e.g. CSS, animations, templates) + *Pourquoi ?* : La manipulation du DOM peut être difficile à tester, déboguer, et il y a souvent une meilleure façon de faire (ex : CSS, animations, *templates*). -### Fournir un Unique Préfixe de Directive +### Utiliser un unique préfixe de directive ###### [Style [Y073](#style-y073)] - - Definissez un préfixe de directive court, unique et descriptif tel que `acmeSalesCustomerInfo` et déclaré en HTML comme `acme-sales-customer-info`. + - Définissez un unique préfixe de directive court et descriptif comme dans `acmeSalesCustomerInfo` et utilisé dans le HTML de la façon suivante : `acme-sales-customer-info`. - *Pourquoi ?* : Le préfixe court et unique identifie le contexte et l'origine de la directive. Par exemple, un préfixe `cc-` peut indiquer que la directive fait partie de l'application CodeCamper alors que `acme-` peut indiquer une directive de la companie Acme. + *Pourquoi ?* : Un préfixe court et unique identifie le contexte et l'origine de la directive. Par exemple, un préfixe comme `cc-` peut indiquer que la directive fait partie de l'application CodeCamper tandis que `acme-` peut indiquer une directive de l'entreprise Acme. - Note : Evitez `ng-` car il est réservé pour les directives Angular. Cherchez les directives largement utilisées pour éviter les conflits de nom, tel que `ion-` pour le [Framework Ionic](http://ionicframework.com/). + Note : Évitez d'utiliser le préfixe `ng-` car il est réservé pour les directives Angular. Cherchez les directives populaire pour éviter les conflits de nommage, tel que `ion-` pour les directives du framework [Ionic](http://ionicframework.com/). -### Restreindre aux Éléments et aux Attributs +### Restreindre aux éléments et aux attributs ###### [Style [Y074](#style-y074)] - - Lors de la création d'une directive qui fait du sens comme élément indépendant, permettez la restriction `E` (élément personnalisé) et éventuellement la restriction `A` (attribut personnalisé). En général, s'il devrait avoir son propre contrôle, `E` est le plus indiqué. Le conseil le plus général est de permettre `EA` mais se dirige vers une implémentation en tant qu'élément lorsqu'il est indépendant et en tant qu'attribut lorsqu'il améliore un élément DOM existant. + - Lors de la création d'une directive qui fait du sens comme élément indépendant, autorisez la restriction `E` (élément personnalisé) et éventuellement la restriction `A` (attribut personnalisé). En général, s'il devrait avoir son propre contrôle, `E` est le plus indiqué. La convention la plus utilisée est de permettre `EA` mais se dirige vers une implémentation en tant qu'élément lorsque la directive est indépendante et en tant qu'attribut lorsqu'elle augmente son propre élément de DOM. - *Pourquoi ?* : Çela a du sens. + *Pourquoi ?* : Cela a du sens. - *Pourquoi ?* : Même s'il est autorisé d'utiliser une directive en tant que classe, si la directive agit vraiement comme un élément, elle fait plus de sens en tant qu'élément ou au moins en tant qu'attribut. + *Pourquoi ?* : Même s'il est autorisé d'utiliser une directive en tant que classe, si la directive agit vraiment comme un élément, elle fait plus de sens en tant qu'élément ou au moins en tant qu'attribut. - Note : EA est la valeur par défaut avec Angular 1.3 + + Note : EA est la valeur par défaut dans Angular 1.3 + ```html @@ -1191,18 +1191,18 @@ Bien que ce guide explique le *quoi*, le *pourquoi* et le *comment*, il m'est ut } ``` -### Directives et ControllerAs +### Directives et `controllerAs` ###### [Style [Y075](#style-y075)] - - Utilisez la syntaxe `controller as` avec une directive pour être cohérent avec l'utilisation de `controller as` pour l'association de la vue et du contrôleur. + - Utilisez la syntaxe avec `controllerAs` avec une directive pour être cohérent avec l'utilisation de `controllerAs` pour l'association de la vue et de son contrôleur. *Pourquoi ?* : Ça fait sens et ce n'est pas difficile. - Note : La directive ci-dessous démontre une façon parmis d'autres d'utiliser le scope à l'intérieur de la fonction link et dans un contrôleur de directive, par l'utilisation de controllerAs. J'ai in-liné le template que pour le mettre au même endroit. + Note : La directive ci-dessous montre une façon parmi d'autres d'utiliser *scope* à l'intérieur de la fonction `link` et dans un contrôleur de directive, par l'utilisation de `controllerAs`. J'ai *inliné* le template pour tout mettre au même endroit. - Note : Concernant l'injection de dépendance, voir [Identifier Manuellement les Dépendances](#manual-annotating-for-dependency-injection). + Note : Concernant l'injection de dépendances, voir [Annoter manuellement les dépendances à injecter](#annoter-manuellement-les-dépendances-à-injecter). - Note : Remarquez que le contrôleur de la directive est à l'extérieur de la closure de la directive. Cette façon de faire évite le problème des injections plus disponibles après le `return`. + Note : Remarquez que le contrôleur de la directive est à l'extérieur de la *closure* de la directive. Cette façon de faire évite le problème d'indisponibilité des injections après le `return`. ```html
@@ -1239,7 +1239,7 @@ Bien que ce guide explique le *quoi*, le *pourquoi* et le *comment*, il m'est ut ExampleController.$inject = ['$scope']; function ExampleController($scope) { - // Injection du $scope seuelement pour la comparaison + // Injection de $scope seulement pour la comparaison var vm = this; vm.min = 3; @@ -1258,11 +1258,23 @@ Bien que ce guide explique le *quoi*, le *pourquoi* et le *comment*, il m'est ut
min={{vm.min}}
``` + Note : Vous pouvez aussi nommer le contrôleur au moment où vous l'injectez dans la fonction de `link` et accéder aux attributs de la directive en temps que propriétés du contrôleur. + + ```javascript + // Alternative to above example + function linkFunc(scope, el, attr, vm) { + console.log('LINK: scope.min = %s *** should be undefined', scope.min); + console.log('LINK: scope.max = %s *** should be undefined', scope.max); + console.log('LINK: vm.min = %s', vm.min); + console.log('LINK: vm.max = %s', vm.max); + } + ``` + ###### [Style [Y076](#style-y076)] - - Utilisez `bindToController = true` lorsque vous utilisez la syntaxe `controller as` avec une directive quand vous voulez binder le scope externe au scope du contrôleur de la directive. + - Utilisez `bindToController = true` lorsque vous utilisez la syntaxe avec `controllerAs` avec une directive quand vous voulez *binder* le *scope* externe au *scope* du contrôleur de la directive. - *Pourquoi ?* : Cela rend plus facile de binder le scope externe au scope du contrôleur de la directive. + *Pourquoi ?* : Cela rend plus facile de *binder* le *scope* externe au *scope* du contrôleur de la directive. Note : `bindToController` a été introduit à partir de Angular 1.3.0. From 1189d5518bf7e1596be42caed545c1b173e82ed7 Mon Sep 17 00:00:00 2001 From: Xavier Haniquaut Date: Tue, 18 Aug 2015 20:24:04 +0200 Subject: [PATCH 054/248] [fr-FR] Refresh french translation : Resolving Promises for a Controller --- i18n/fr-FR.md | 31 +++++++++++++++---------------- 1 file changed, 15 insertions(+), 16 deletions(-) diff --git a/i18n/fr-FR.md b/i18n/fr-FR.md index 79928fcf..bab89f61 100644 --- a/i18n/fr-FR.md +++ b/i18n/fr-FR.md @@ -1319,18 +1319,17 @@ Bien que ce guide explique le *quoi*, le *pourquoi* et le *comment*, il m'est ut **[Retour en haut de page](#table-des-matières)** -## Résolution des Promesses pour un Contrôleur - -### Promesses d'Activation du Controller +## Résolution des *promises* pour un contrôleur +### *Promises* d'activation du contrôleur ###### [Style [Y080](#style-y080)] - - Résolvez la logique de démarrage d'un contrôleur dans une fonction `activate`. + - Résolvez la logique d'initialisation d'un contrôleur dans une fonction `activate`. - *Pourquoi ?* : Placer la logique de démarrage toujours au même endroit permet de le rendre plus facile à localiser, plus cohérent à tester, et permet d'éviter la dispersion de la logique d'activation à travers le contrôleur. + *Pourquoi ?* : Placer la logique d'initialisation toujours au même endroit permet de la rendre plus facile à localiser, plus cohérente à tester, et permet d'éviter sa dispersion à travers le contrôleur. - *Pourquoi ?* : La fonction `activate` d'un contrôleur rend pratique la ré-utilisation de la logique pour un refraichissement du contrôleur ou de la vue, garde cette logique à un seul endroit, envoie l'utilisateur plus rapidement à la Vue, rend les animations faciles sur la `ng-view` ou l'`ui-view`, et c'est rendu plus vif à l'utilisateur. + *Pourquoi ?* : La fonction `activate` du contrôleur rend pratique la ré-utilisation de la logique pour un rafraîchissement du contrôleur ou de la vue, garde cette logique en un seul endroit, envoie la vue à l'utilisateur plus rapidement, rend les animations faciles sur `ng-view` ou `ui-view` et rend l'interface plus réactive pour l'utilisateur. - Note : Si vous avez besoin d'annuler sous conditions la route avant de vous mettre à utiliser le contrôleur, utilisez une [résolution de route](#style-y081) à la place. + Note : Si vous avez besoin d'annuler de façon conditionnelle la route avant d'utiliser le contrôleur, utilisez la [résolution de route](#style-y081) à la place. ```javascript /* à éviter */ @@ -1366,18 +1365,18 @@ Bien que ce guide explique le *quoi*, le *pourquoi* et le *comment*, il m'est ut } ``` -### Promesses de Résolution de Route +### *Promises* de résolution de route ###### [Style [Y081](#style-y081)] - - Lorsqu'un contrôleur dépend d'une promesse qui doit être résolue avant qu'un contrôleur soit activé, résolvez ces dépendances dans le `$routeProvider`. Si vous avez besoin d'annuler une route sous certaines conditions avant que le contrôleur soit activé, utilisez un resolver de route. + - Lorsqu'un contrôleur dépend d'une *promise* qui doit être résolue avant que le contrôleur soit activé, résolvez ces dépendances dans le `$routeProvider` avant que la logique du contrôleur soit exécutée. Si vous avez besoin d'annuler une route de façon conditionnelle avant que le contrôleur soit activé, utilisez un *resolver* de route. - - Utilisez un resolver de route dès lors que vous voulez décider d'annuler la route avant même de commencer à naviguer vers la Vue. + - Utilisez un *resolver* de route quand vous voulez pouvoir décider d'annuler la route avant même de commencer à naviguer vers la vue. - *Pourquoi ?* : Un contrôleur pourrait avoir besoin de données avant qu'il se charge. Cette donnée pourrait venir d'une promesse via une factory personnalisée ou de [$http](https://docs.angularjs.org/api/ng/service/$http). Utiliser une [resolution de route](https://docs.angularjs.org/api/ngRoute/provider/$routeProvider) permet à la promesse de se résoudre avant que la logique du contrôleur s'éxécute, ainsi on peut prendre des actions basées sur cette donnée à partir de la promesse. + *Pourquoi ?* : Un contrôleur pourrait avoir besoin de données avant de se charger. Ces données pourraient provenir d'une promesse via une *factory* ou de [`$http`](https://docs.angularjs.org/api/ng/service/$http). Utiliser une [résolution de route](https://docs.angularjs.org/api/ngRoute/provider/$routeProvider) permet à la promesse de se résoudre avant que la logique du contrôleur s’exécute, alors seulement, on peut exécuter les actions basées sur les données fournies via la *promises*. - *Pourquoi ?* : Le code s'éxécute après la route et dans la fonction activate du contrôleur. La Vue commence à se charger tout de suite. Le data binding démarre quand la promesse d'activation se résoud. Une animation de "chargement" peut être affichée pendant que la vue opère la transition (via `ng-view` ou `ui-view`). + *Pourquoi ?* : Le code s’exécute après la route et dans la fonction `activate` du contrôleur. La vue commence à se charger tout de suite. Le *data-binding* démarre quand la *promise* d'activation se résout. Une animation de « chargement » peut être affichée pendant la transition (via `ng-view` ou `ui-view`). - Note : Le code s'éxécute avant la route via une promesse. Le rejet de la promesse annule le routage. Sa résolution met la nouvelle vue en attente de la résolution du routage. Une animation de "chargement" peut être affichée avant la résolution et lorsque la vue entre en transition. Si vous voulez aller à la Vue plus vite et que vous n'avez pas besoin d'un point pour décider si vous voulez atteindre la Vue, il est conseillé d'utiliser la [technique de l'activation de contrôleur](#style-y080) à la place. + Note : Le code s’exécute avant la route via une *promise*. Le rejet de la promesse annule le routage. Sa résolution met la future vue en attente de la résolution du routage. Une animation de « chargement » peut être affichée avant la résolution et lorsque la vue change d'état. Si vous voulez aller à la vue plus vite et que vous n'avez pas besoin d'une étape pour décider si vous pouvez l'atteindre, il est conseillé d'utiliser à la place la [technique de la fonction `activate` dans le contrôleur](#style-y080). ```javascript /* à éviter */ @@ -1389,7 +1388,7 @@ Bien que ce guide explique le *quoi*, le *pourquoi* et le *comment*, il m'est ut var vm = this; // non-résolue vm.movies; - // résolue de façon asynchrone + // résolu de façon asynchrone movieService.getMovies().then(function(response) { vm.movies = response.movies; }); @@ -1430,7 +1429,7 @@ Bien que ce guide explique le *quoi*, le *pourquoi* et le *comment*, il m'est ut } ``` - Note : L'exemple ci-dessous montre que la résolution de routage pointe vers une fonction nommée, laquelle est plus facile à débugguer et dont l'injection de dépendance est plus facile à gérer. + Note : L'exemple ci-dessous montre que la résolution du routage pointe vers une fonction nommée, laquelle est plus facile à déboguer et dont l'injection de dépendance est plus facile à gérer. ```javascript /* encore mieux */ @@ -1467,7 +1466,7 @@ Bien que ce guide explique le *quoi*, le *pourquoi* et le *comment*, il m'est ut vm.movies = moviesPrepService.movies; } ``` - Note : Les dépendances dans l'exemple de code sur `movieService` ne sont pas directement compatibles avec la minification. Pour les détails sur la façon de rendre ce code compatible avec la minification, voir la section sur l'[injection de dépendance](#manual-annotating-for-dependency-injection) et sur [la minification et les annotations](#minification-and-annotation). + Note : Les dépendances sur `movieService` dans l'exemple ne sont pas directement compatibles avec le processus de minification. Pour plus de détails sur la façon de rendre ce code minifiable sans risques, voir la section sur l'[injection de dépendances](#manual-annotating-for-dependency-injection) et sur [la minification et les annotations](#minification-and-annotation). **[Retour en haut de page](#table-des-matières)** From c06bbc4063f69d2b0d6f7d08d37e982540631aba Mon Sep 17 00:00:00 2001 From: Xavier Haniquaut Date: Tue, 18 Aug 2015 20:47:24 +0200 Subject: [PATCH 055/248] [fr-FR] Refresh french translation : Manual Annotating for Dependency Injection --- i18n/fr-FR.md | 39 ++++++++++++++++++++------------------- 1 file changed, 20 insertions(+), 19 deletions(-) diff --git a/i18n/fr-FR.md b/i18n/fr-FR.md index bab89f61..2cccb733 100644 --- a/i18n/fr-FR.md +++ b/i18n/fr-FR.md @@ -1470,17 +1470,17 @@ Bien que ce guide explique le *quoi*, le *pourquoi* et le *comment*, il m'est ut **[Retour en haut de page](#table-des-matières)** -## Annoter Manuellement pour l'Injection de Dépendances +## Annotation manuelle pour l'injection de dépendances -### Non Sur pour la Minification +### Risques pour la minification ###### [Style [Y090](#style-y090)] - - Eviter l'utilisation de la syntaxe raccourcie de déclaration des dépendances sans utiliser une approche sûre pour la minification. + - Évitez l'utilisation de la syntaxe raccourcie pour déclaration de dépendances. Ulilisez plutôt une approche compatible avec la minification. - *Pourquoi ?* : Les paramètres du composant (ex: contrôleur, factory, etc.) seront converties en variables mutilées. Par exemple, ˋcommonˋet ˋdataserviceˋ deviendraient ˋaˋet ˋbˋ et ne seraient pas trouvées par Angular. + *Pourquoi ?* : Les paramètres des composants (ex: contrôleur, *factory*, etc.) vont êtres convertis en variables raccourcies. Par exemple, ˋcommonˋ et ˋdataserviceˋ deviendraient ˋaˋ et ˋbˋ et ne seraient pas trouvées par Angular. ```javascript - /* à éviter - non sûr pour la minification */ + /* à éviter - non compatible avec la minification */ angular .module('app') .controller('Dashboard', Dashboard); @@ -1489,23 +1489,23 @@ Bien que ce guide explique le *quoi*, le *pourquoi* et le *comment*, il m'est ut } ``` - Ce code pourrait produire des variables mutilées après minification et en cela provoquer des erreurs à l'éxécution. + Ce code pourrait produire des variables raccourcies après minification et provoquer des erreurs à l’exécution. ```javascript - /* à éviter - non sûr pour la minification */ + /* à éviter - non compatible avec la minification */ angular.module('app').controller('Dashboard', d);function d(a, b) { } ``` -### Identifier Manuellement les Dépendances +### Identification manuelle des dépendances ###### [Style [Y091](#style-y091)] - - Utilisez ˋ$injectˋpour identifier manuellement vos dépendances de composants Angular. + - Utilisez ˋ$injectˋ pour identifier manuellement les dépendances de vos composants Angular. - *Pourquoi ? * : Cette technique est la même que celle utilisée par [`ng-annotate`](https://github.com/olov/ng-annotate), que je recommande pour automatiser la création de dépendances sûres pour la minification. Si ˋng-annotateˋ détecte que l'injection a déjà été faite, celà ne la dupliquera pas. + *Pourquoi ? * : Cette technique réplique celle utilisée par [`ng-annotate`](https://github.com/olov/ng-annotate), que je recommande afin d'automatiser la création de dépendances compatible avec la minification. Si ˋng-annotateˋ détecte que l'injection a déjà été faite, cela ne la dupliquera pas. - *Pourquoi ?* : Ca préserve vos dépendances d'être vulnérable aux problèmes de minification lorsque les paramètres sont mutilés. Par exemple, ˋcommonˋet ˋdataserviceˋpourraient devenir ˋaˋ et ˋbˋ et ne pas être trouvés par Angular. + *Pourquoi ?* : Ça assure la compatibilité de vos dépendances à la minification. Par exemple, ˋcommonˋ et ˋdataserviceˋ pourraient devenir ˋaˋ et ˋbˋ et ne pas être trouvés par Angular. - *Pourquoi ?* : Eviter de créer en ligne une longue liste de dépendances peut rendre le tableau difficile à lire. De même, il peut entraîner une confusion dans la mesure où le tableau est une série de chaînes de caratères alors que le dernier élément est le nom de la fonction du composant. + *Pourquoi ?* : Pour éviter de créer *inline* une longue liste de dépendances car les longs tableaux sont difficiles à lire. De même, cela peut être gênant de voir un tableau composé d'une série de *strings* alors que son dernier élément est un appel à la fonction du composant. ```javascript /* à éviter */ @@ -1540,7 +1540,7 @@ Bien que ce guide explique le *quoi*, le *pourquoi* et le *comment*, il m'est ut } ``` - Note : Lorsque votre fonction est sous une instruction de return, le $inject peut ne pas être accessible (cela pourrait arriver dans une directive). Vous pouvez vous en sortir en bougeant le contrôleur en dehors de la directive. + Note : Lorsque votre fonction se situe sous un `return`, le `$inject` peut ne pas être accessible (cela pourrait arriver dans une directive). Vous pouvez vous en sortir en sortant le contrôleur de la directive. ```javascript /* À éviter */ @@ -1550,7 +1550,7 @@ Bien que ce guide explique le *quoi*, le *pourquoi* et le *comment*, il m'est ut controller: DashboardPanelController, controllerAs: 'vm' }; - return ddo + return ddo; DashboardPanelController.$inject = ['logger']; // Inatteignable function DashboardPanelController(logger) { @@ -1560,7 +1560,7 @@ Bien que ce guide explique le *quoi*, le *pourquoi* et le *comment*, il m'est ut ```javascript /* recommandé */ - // A l'exterieur d'une définition de directive + // à l'exterieur d'une définition de directive function outer() { var ddo = { controller: DashboardPanelController, @@ -1568,19 +1568,20 @@ Bien que ce guide explique le *quoi*, le *pourquoi* et le *comment*, il m'est ut }; return ddo; } + DashboardPanelController.$inject = ['logger']; function DashboardPanelController(logger) { } ``` -### Identifier Manuellement les Dépendances du Route Resolver +### Identification manuelle des dépendances du *route resolver* ###### [Style [Y092](#style-y092)] - - Utilisez `$inject pour identifier manuellement vos dépendances du route resolver pour les composants Angular. + - Utilisez `$inject` pour identifier manuellement vos dépendances du *route resolver* pour les composants Angular. - *Pourquoi ?* : Cette technique divise la fonction anonyme pour le route resolver, la rendant plsu facile à lire. + *Pourquoi ?* : Cette technique divise la fonction anonyme pour le *route resolver*, le rendant plus facile à lire. - *Pourquoi ?* : Une instruction `$inject` peut facilement précéder le resolver à manipuler rendant n'importe quelle dépendance sûre à la minification. + *Pourquoi ?* : Une instruction `$inject` peut facilement précéder le *resolver* à manipuler rendant n'importe quelle dépendance compatible avec la minification. ```javascript /* recommandé */ From e41164f2787a594ff9038eb7e4c894f9f4f7dfb3 Mon Sep 17 00:00:00 2001 From: Xavier Haniquaut Date: Tue, 18 Aug 2015 21:05:33 +0200 Subject: [PATCH 056/248] [fr-FR] Refresh french translation : Minification and Annotation --- i18n/fr-FR.md | 24 ++++++++++++------------ 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/i18n/fr-FR.md b/i18n/fr-FR.md index 2cccb733..92738bf6 100644 --- a/i18n/fr-FR.md +++ b/i18n/fr-FR.md @@ -1612,13 +1612,13 @@ Bien que ce guide explique le *quoi*, le *pourquoi* et le *comment*, il m'est ut - Utilisez [ng-annotate](//github.com/olov/ng-annotate) pour [Gulp](http://gulpjs.com) ou [Grunt](http://gruntjs.com) et commentez les fonctions qui nécessitent l'injection de dépendances automatique en utilisant `/** @ngInject */`. - *Pourquoi ?* : Ca préserve votre code de n'importe quelle dépendance qui pourrait ne pas utiliser les pratiques sûres à la minification. + *Pourquoi ?* : Cela prévient votre code d'erreur provenant de dépendances n'utilisant pas les bonnes pratiques au regard de la minification. - *Pourquoi ?*: [`ng-min`](https://github.com/btford/ngmin) est déprécié. + *Pourquoi ?*: [`ng-min`](https://github.com/btford/ngmin) est obsolète. - >Je préfère Gulp car ça me paraît plus facile à écrire, lire et débugger. + >Je préfère Gulp car ça me paraît plus facile à écrire, lire et déboguer. - Le code suivant n'utilise pas de dépendances sûres à la minification. + Le code suivant n'utilise pas de dépendances compatibles avec la minification. ```javascript angular @@ -1638,7 +1638,7 @@ Bien que ce guide explique le *quoi*, le *pourquoi* et le *comment*, il m'est ut } ``` - Lorsque le code ci-dessus est éxécuté par ng-annotate il produira le résultat suivant avec l'annotation ˋ$injectˋ et deviendra sûr à la minification. + Lorsque le code ci-dessus sera exécuté par `ng-annotate`, il produira le résultat suivant avec l'annotation ˋ$injectˋ et deviendra alors compatible avec la minification. ```javascript angular @@ -1660,9 +1660,9 @@ Bien que ce guide explique le *quoi*, le *pourquoi* et le *comment*, il m'est ut Avengers.$inject = ['storageService', 'avengerService']; ``` - Note : Si ˋng-annotateˋ détecte que l'injection a déjà été faite (ex : ˋ@ngInjectˋ a été détécté), il ne dupliquera pas le code ˋ$injectˋ. + Note : Si ˋng-annotateˋ détecte que l'injection a déjà été faite (ex : ˋ@ngInjectˋ a été détecté), il ne dupliquera pas le code ˋ$injectˋ. - Note : Lors de l'utilisation d'un route resolver, vous pouvez préfixer la fonction de résolution avec `/* @ngInject */` et cela produira le code proprepement annoté, en gardant toute dépendance injectée sûre à la minification. + Note : Lors de l'utilisation d'un *route resolver*, vous pouvez préfixer la fonction de résolution avec `/* @ngInject */` et cela produira le code proprement annoté, en gardant toutes les dépendances injectées compatibles avec la minification. ```javascript // En utilisant les annotations @ngInject @@ -1681,17 +1681,17 @@ Bien que ce guide explique le *quoi*, le *pourquoi* et le *comment*, il m'est ut } ``` - > Note : A partir d'Angular 1.3, utilisez le paramètre ˋngStrictDiˋ de la directive [`ngApp`](https://docs.angularjs.org/api/ng/directive/ngApp). Avec ce paramètre, l'injecteur sera créé en mode "strict-di" qui rendra fera échouer les invocations de fonctions de l'application qui n'utilisent pas explicitement les annotation de fonction (ceci peut ne pas être sûr à la minification). Débugger les informations qui seront logguées dans la console peut aider à débusquer le code à l'origine. + > Note : A partir d'Angular 1.3, utilisez le paramètre ˋngStrictDiˋ de la directive [`ngApp`](https://docs.angularjs.org/api/ng/directive/ngApp) pour détecter un potentiel oubli. Avec ce paramètre, l'injecteur sera créé en mode "strict-di" qui fera échouer les invocations de fonctions de l'application qui n'utiliseraient pas explicitement les annotations de fonctions (et qui rendraient l'application non-minifiable). Des infos de débogage seront alors logguées dans la console pour aider à retrouver code à l'origine de l'alerte. Je préfère utiliser `ng-strict-di` uniquement pour le débogage. `` -### Utilisation de Gulp ou Grunt pour ng-annotate +### Utilisation de Gulp ou Grunt pour `ng-annotate` ###### [Style [Y101](#style-y101)] - - Utilisez [gulp-ng-annotate](https://www.npmjs.org/package/gulp-ng-annotate) ou [grunt-ng-annotate](https://www.npmjs.org/package/grunt-ng-annotate) dans une tâche de build automatisée. Injectez `/* @ngInject */` avant toute fonction qui possède des dépendances. + - Utilisez [gulp-ng-annotate](https://www.npmjs.org/package/gulp-ng-annotate) ou [grunt-ng-annotate](https://www.npmjs.org/package/grunt-ng-annotate) dans une tâche de *build* automatisée. Injectez `/* @ngInject */` avant toute fonction qui a des dépendances. - *Pourquoi ?* : ng-annotate va intercepter la plupart des dépendances, mais parfois va nécessiter des indices grâce à l'utilisation de la syntaxe `/* @ngInject */ˋ. + *Pourquoi ?* : `ng-annotate` va intercepter la plupart des dépendances, mais parfois va nécessiter des indices grâce à l'utilisation de l'ajout de `/* @ngInject */ˋ. - Le code ci-dessous est un exemple d'une tâche gulp qui utilise ngAnnotate + Le code ci-dessous est un exemple d'une tâche gulp qui utilise `ngAnnotate` ```javascript gulp.task('js', ['jshint'], function() { From d728e01d9ee45c7bf5928641c546e68f39e9de30 Mon Sep 17 00:00:00 2001 From: Xavier Haniquaut Date: Tue, 18 Aug 2015 21:26:19 +0200 Subject: [PATCH 057/248] [fr-FR] Refresh french translation : Exception Handling --- i18n/fr-FR.md | 51 ++++++++++++++++++++++++++++++++------------------- 1 file changed, 32 insertions(+), 19 deletions(-) diff --git a/i18n/fr-FR.md b/i18n/fr-FR.md index 92738bf6..a36b6a8f 100644 --- a/i18n/fr-FR.md +++ b/i18n/fr-FR.md @@ -1719,14 +1719,14 @@ Bien que ce guide explique le *quoi*, le *pourquoi* et le *comment*, il m'est ut ## Gestion des Exceptions -### decorateurs +### Décorateurs ###### [Style [Y110](#style-y110)] - - Utilisez un [decorateur](https://docs.angularjs.org/api/auto/service/$provide#decorator), au moment de la configuration en utilisant le service [`$provide`](https://docs.angularjs.org/api/auto/service/$provide), sur le service [`$exceptionHandler`](https://docs.angularjs.org/api/ng/service/$exceptionHandler) pour effecture des actions personnalisées lorsque des exceptions se produisent. + - Utilisez un [décorateur](https://docs.angularjs.org/api/auto/service/$provide#decorator), au moment de la configuration en utilisant le service [`$provide`](https://docs.angularjs.org/api/auto/service/$provide), sur le service [`$exceptionHandler`](https://docs.angularjs.org/api/ng/service/$exceptionHandler) pour effectuer des actions personnalisées lorsque des exceptions se produisent. - *Pourquoi ?* : Fournir un moyen cohérent pour gérer les exceptions non interceptées d'Angular pendant le développement ou à l'éxécution. + *Pourquoi ?* : Cela fournit un moyen cohérent pour gérer les exceptions non interceptées d'Angular pendant le développement ou à l’exécution. - Note : Une autre possibilité serait de surcharger le service au lieu d'utiliser un décorateur. C'est une bonne possibilité, mais si vou voulez garder le comportement par défaut et l'étendre, un décorateur est plus approprié. + Note : Une autre possibilité serait de surcharger le service au lieu d'utiliser un décorateur. C'est une bonne option, mais si vous voulez vous conformer au comportement standard et l'étendre, un décorateur est plus approprié. ```javascript /* recommandé */ @@ -1751,8 +1751,8 @@ Bien que ce guide explique le *quoi*, le *pourquoi* et le *comment*, il m'est ut }; /** * On pourrait ajouter l'erreur à une collection d'un service, - * ajouter les erreurs au $rootScope, loguer les erreurs vers un serveur distant, - * ou loguer locallement. Ou rejetter directement. C'est entièrement votre choix. + * ajouter les erreurs au $rootScope, loguer les erreurs sur un serveur distant, + * ou les loguer localement. Ou alors les rejeter directement. C'est entièrement votre choix. * throw exception; */ toastr.error(exception.msg, errorData); @@ -1760,14 +1760,14 @@ Bien que ce guide explique le *quoi*, le *pourquoi* et le *comment*, il m'est ut } ``` -### Catcher d'Exceptions +### Intercepteurs d'exceptions ###### [Style [Y111](#style-y111)] - - Créer une factory qui expose une interface pour attraper et gérer correctement les exceptions. + - Créez une *factory* qui expose une interface pour intercepter et gérer correctement les exceptions. - *Pourquoi ?* : Fournir un moyen cohérent pour gérer les exception qui peuvent être déclenchées dans votre code (par example, pendant un appel Ajax ou lors d'un échec d'une promesse). + *Pourquoi ?* : Cela fournit un moyen cohérent pour intercepter les exceptions qui peuvent être déclenchées dans votre code (par exemple, pendant une requête XHR ou lors d'un échec de *promise*). - Note : Le catcher d'axception est bon pour attraper et réagir à des exceptions spécifiques provenant d'appels dont vous savez qu'elles sont déclenchées. Par exemple, lorsque on fait un appel Ajax pour récuppérer des données d'un serveur distant et que vous voulez attraper n'importe quelles exceptions provenant de ce service uniquement et réagir seulement à celui-ci. + Note : Le intercepteur d'exceptions est bon pour intercepter et réagir à des exceptions spécifiques potentielles provenant d'appels qui pourraient en produire. Par exemple, lorsque on fait une requête XHR pour récupérer des données d'un service web distant et que vous voulez intercepter n'importe quelles exceptions provenant de ce service uniquement et réagir seulement à celles-ci. ```javascript /* recommandé */ @@ -1791,33 +1791,46 @@ Bien que ce guide explique le *quoi*, le *pourquoi* et le *comment*, il m'est ut } ``` -### Erreurs de Routage +### Erreurs de routage ###### [Style [Y112](#style-y112)] - - Gérez et loguez toute erreur de routage en utilisant [`$routeChangeError`](https://docs.angularjs.org/api/ngRoute/service/$route#$routeChangeError). + - Gérez et loguez toutes les erreurs de routage en utilisant [`$routeChangeError`](https://docs.angularjs.org/api/ngRoute/service/$route#$routeChangeError). - *Pourquoi ?* : Fournir un moyen cohérent de gérer les erreurs de routage. + *Pourquoi ?* : Pour fournir un moyen cohérent de gestion des erreurs de routage. - *Pourquoi ?* : Fournir potentiellement une meilleure expérience utilisateur si une erreur de routage se produit et les rediriger vers un écran convivial avec plus de détails ou les possibilités de s'en sortir. + *Pourquoi ?* : Pour fournir potentiellement une meilleure expérience utilisateur si une erreur de routage se produit et rediriger vers un écran approprié avec plus de détails ou les possibilités pour s'en sortir. ```javascript /* recommandé */ + var handlingRouteChangeError = false; + function handleRoutingErrors() { /** - * Annulation du routage: - * Sur une erreur de routage, aller au dashboard. - * Fournir une clause de sortie s'il essaye de le faire deux fois. + * Annulation du routage : + * sur une erreur de routage, aller au dashboard. + * Fournit une clause de sortie s'il essaye de le faire deux fois. */ $rootScope.$on('$routeChangeError', function(event, current, previous, rejection) { - var destination = (current && (current.title || current.name || current.loadedTemplateUrl)) || + if (handlingRouteChangeError) { return; } + handlingRouteChangeError = true; + var destination = (current && (current.title || + current.name || current.loadedTemplateUrl)) || 'unknown target'; - var msg = 'Error routing to ' + destination + '. ' + (rejection.msg || ''); + var msg = 'Error routing to ' + destination + '. ' + + (rejection.msg || ''); + /** * Loguer éventuellement en utilisant un service personnalisé ou $log. * (N'oubliez pas d'injecter votre service personnalisé) */ logger.warning(msg, [current]); + + /** + * Lors d'une erreur de routage aller sur une autre route / état. + */ + $location.path('/'); + } ); } From 4a4f361ccc201449f774725e1e346ad9c8e076b4 Mon Sep 17 00:00:00 2001 From: Xavier Haniquaut Date: Tue, 18 Aug 2015 22:12:02 +0200 Subject: [PATCH 058/248] [fr-FR] Refresh french translation : Namming --- i18n/fr-FR.md | 86 +++++++++++++++++++++++++++++++++------------------ 1 file changed, 56 insertions(+), 30 deletions(-) diff --git a/i18n/fr-FR.md b/i18n/fr-FR.md index a36b6a8f..ae0c524f 100644 --- a/i18n/fr-FR.md +++ b/i18n/fr-FR.md @@ -1840,29 +1840,29 @@ Bien que ce guide explique le *quoi*, le *pourquoi* et le *comment*, il m'est ut ## Nommage -### Règles de Nommage +### Conventions de nommage ###### [Style [Y120](#style-y120)] - - Utilisez des noms cohérents pour tous les composants en utilisant un pattern qui décrit la fonctionnalité de ce composant puis (éventuellement) son type. Le pattern que je recommande est `fonctionnalité.type.js`. Il y a 2 noms pour la plupart des resources: - * le nom du fichier (`avengers.controller.js`) - * le nom du composant déclaré à Angular (`AvengersController`) + - Utilisez des noms cohérents pour tous les composants en utilisant un motif qui décrit la fonctionnalité du composant puis (éventuellement) son type. Le motif que je recommande est `fonctionnalité.type.js`. Il y a deux noms pour la plupart des ressources : + * le nom du fichier (`avengers.controller.js`) + * le nom du composant déclaré à Angular (`AvengersController`) - *Pourquoi ?* : Les conventions de nommage donnent une façon cohérente de s'y retrouver en un clin d'oeil. La cohérence dans tout le projet est vitale. La cohérence au sein de l'équipe est importante. La cohérence dans l'entreprise apporte une efficacité redoutable. + *Pourquoi ?* : Les conventions de nommage permettent de de nommer de façon cohérente et de retrouver du contenu en un clin d'œil. La cohérence à toute l'échelle du projet est vitale. La cohérence au sein d'une équipe est importante. La cohérence dans une entreprise apporte une efficacité redoutable. - *Pourquoi ?* : Les conventions de nommage doivent simplement vous aider à naviguer dans le code plus vite et le rendre plus facile à comprendre. + *Pourquoi ?* : Les conventions de nommage doivent simplement vous aider à naviguer dans votre code plus vite et le rendre plus facile à comprendre. -### Nom des Fichiers de Fonctionnalités +### Nom des fichiers de fonctionnalités ###### [Style [Y121](#style-y121)] - - Utilisez des noms cohérents pour tous les composants qui suivent un pattern qui décrit la fonctionnalité d'un composant et (éventuellent) son type. Le pattern que je recommande est `fonctionnalité.type.js`. + - Utilisez des noms cohérents pour tous les composants qui suivent un motif qui décrit leur fonctionnalité et (éventuellement) leur type. Le motif que je recommande est `fonctionnalité.type.js`. *Pourquoi ?* : Offre une façon cohérente d'identifier rapidement les composants. - *Pourquoi ?* : Fournit un pattern matching pour automatiser des tâches. + *Pourquoi ?* : Permet de faire *matcher* par nom de fichier au sein d'un processus d'automatisation. ```javascript /** - * possibilités couramment rencontrées. + * Options courantes */ // Contrôleurs @@ -1907,7 +1907,7 @@ Bien que ce guide explique le *quoi*, le *pourquoi* et le *comment*, il m'est ut avenger-profile.directive.spec.js ``` - Note : Une autre convention courante consiste à nommer les fichiers de contrôleurs sans le mot `controller` dans le nom de fichier comme `avengers.js`au lieu de `avengers.controller.js`. Toutes les autres conventions étant maintenues avec un suffixe par type. Les contrôleurs étant les les types de composant les plus courants, ça permet d'économiser la frappe au clavier tout en étant facilement identifiable. Je vous conseille de choisir une convention et de vous y tenir dans toute l'équipe. Ma préference est `avengers.controller.js`. + Note : Une autre convention courante consiste à nommer les fichiers des contrôleurs sans le mot `controller` dans le nom de fichier comme `avengers.js`au lieu de `avengers.controller.js`. Toutes les autres conventions tiennent à garder le suffixe du type. Le contrôleur étant le type de composant le plus courant, cela permet alors d'économiser à la frappe tout en restant facilement identifiable. Je vous conseille de choisir une convention et de vous y tenir dans toute l'équipe. Ma préference est `avengers.controller.js`. ```javascript /** @@ -1918,14 +1918,14 @@ Bien que ce guide explique le *quoi*, le *pourquoi* et le *comment*, il m'est ut avengers.spec.js ``` -### Nommage des Fichiers de Test +### Nommage des fichiers de test ###### [Style [Y122](#style-y122)] - - Les spécifications du nommage des tests est similaire à celui du composant qu'il teste avec un suffixe `spec`. + - Le nommage des spécifications de test est similaire à celui des celui du composant qu'il teste avec le suffixe `spec`. *Pourquoi ?* : Fournit une façon cohérente d'identifier rapidement les composants. - *Pourquoi ?* : Permet le pattern matching pour [karma](http://karma-runner.github.io/) ou d'autres moteurs de tests. + *Pourquoi ?* : Permet de faire *matcher* par nom de fichier dans [karma](http://karma-runner.github.io/) ou d'autres moteurs de tests. ```javascript /** @@ -1940,11 +1940,11 @@ Bien que ce guide explique le *quoi*, le *pourquoi* et le *comment*, il m'est ut ### Nommage des Contrôleurs ###### [Style [Y123](#style-y123)] - - Utilisez des noms cohérents pour tous les contrôleurs nommés d'après leur fonctionnalité. Utilisez le CamelCaseEnMajuscule, puisque ce sont des constructeurs. + - Utilisez des noms cohérents pour tous les contrôleurs nommés d'après leur fonctionnalité. Utilisez le UpperCamelCase pour les contrôleurs, car ce sont des constructeurs. *Pourquoi ?* : Fournit une façon cohérente d'identifier rapidement et de référencer les contrôleurs. - *Pourquoi ?* : Le CamelCaseEnMajuscules est la convention pour identifier les objets qui peuvent être instanciés avec un controleur. + *Pourquoi ?* : Le UpperCamelCase est la convention pour identifier les objets qui peuvent être instanciés avec un constructeur. ```javascript /** @@ -1959,12 +1959,12 @@ Bien que ce guide explique le *quoi*, le *pourquoi* et le *comment*, il m'est ut function HeroAvengersController() { } ``` -### Suffixe des Noms de Contrôleurs +### Suffixe du nom des contrôleurs ###### [Style [Y124](#style-y124)] - Ajoutez au nom du contrôleur le suffixe ˋControllerˋ. - *Pourquoi ?* : Le suffixe ˋControllerˋ est utilisé souvent et il est plus explicitement descriptif. + *Pourquoi ?* : Le suffixe ˋControllerˋ est souvent utilisé et il est explicite. ```javascript /** @@ -1979,12 +1979,18 @@ Bien que ce guide explique le *quoi*, le *pourquoi* et le *comment*, il m'est ut function AvengersController(){ } ``` -### Nommage des Factory +### Nommage des *factory* et des services ###### [Style [Y125](#style-y125)] - - Utilisez des noms cohérents pour toutes les foactories nommées d'après la fonctionnalitée. Utilisez le camel-case pour les services et les factories. + - Utilisez des noms cohérents pour toutes les *factories* et les services nommés d'après leur fonctionnalités. Utilisez le lowerCamelCase pour les services et les *factories*. Évitez de préfixer les *factories* et les services par `$`. N'ajoutez le suffixe `Service` à leurs noms uniquement si sa nature n'est pas claire (par exemple dans le cas des noms). - *Pourquoi ?* : Fournit une façon cohérente d'identifier rapidement et de référencer les factories. + *Pourquoi ?* : Fournit une façon cohérente d'identifier rapidement et de référencer les *factories* et les services. + + *Pourquoi ?* : Permet d'éviter les collisions avec les services et *factories* d'Angular qui ont déjà le préfixe `$`. + + *Pourquoi ?* : Les services aux noms explicites tels que `logger` n'ont pas besoin d'être préfixés. + + *Pourquoi ?* : Des alias tels que 'avengers' sont des noms et ont besoin d'un suffixe. Ce dernier doit être nommé `avengersService`. ```javascript /** @@ -1999,10 +2005,30 @@ Bien que ce guide explique le *quoi*, le *pourquoi* et le *comment*, il m'est ut function logger(){ } ``` -### Nommage des Directives de Composants + ```javascript + /** + * recommended + */ + + // credit.service.js + angular + .module + .factory('creditService', creditService); + + function creditService() { } + + // credit.service.js + angular + .module + .service('customersService', customersService); + + function customersService() { } + ``` + +### Nommage des directives ###### [Style [Y126](#style-y126)] - - Utilisez des noms cohérents pour toutes les directives en utilisant le camel-case. Utilisez un préfixe court pour décrire le domaine à laquelle les directives appartiennent (exemples : préfixe de la société ou préfixe du projet). + - Utilisez des noms cohérents pour toutes les directives en utilisant le lowerCamelCase. Utilisez un préfixe court pour décrire le domaine auquel les directives appartiennent (par exemple le préfixe de la société ou du projet). *Pourquoi ?* : Fournit une façon cohérente d'identifier rapidement et de référencer les composants. @@ -2024,25 +2050,25 @@ Bien que ce guide explique le *quoi*, le *pourquoi* et le *comment*, il m'est ut ### Modules ###### [Style [Y127](#style-y127)] - - Lorqu'il y a de multiples modules, le fichier du module principal est nommé ˋapp.module.jsˋ tandis que les autres modules dépendants sont nommés d'après ce qu'ils représentent. Par exemple, un module d'admin est nommé ˋadmin.module.jsˋ. Les noms des modules déclarés seraient respectivement ˋappˋ et ˋadminˋ. + - Lorqu'il y a de multiples modules, nommez le fichier du module principal ˋapp.module.jsˋ et nommez les autres modules qui en sont dépendants d'après ce qu'ils représentent. Par exemple, nommez un module d'administration ˋadmin.module.jsˋ. Les noms des modules déclarés seraient alors respectivement ˋappˋ et ˋadminˋ. - *Pourquoi ?* : Fournit de la cohérence pour les applications multi-modules, et pour les applications qui grossissent. + *Pourquoi ?* : Fournit de la cohérence pour les applications modulaires, et pour prévoir l'extension des applications. - *Pourquoi ?* : Fournit une façon aisée d'utiliser l'automatisation des tâches afin de charger toutes les définitions de modules en premier, puis ensuite tous les autres fichiers angular (pour l'assemblage). + *Pourquoi ?* : Fournit une façon aisée d'utiliser des processus d'automatisation des tâches afin de charger toutes les définitions de modules en premier, puis ensuite tous les autres fichiers Angular (pour l'assemblage). ### Configuration ###### [Style [Y128](#style-y128)] - - Séparer la configuration d'un module dans son propre fichier nommé d'après le module. Un fichier de configuration du module principal ˋappˋ est nommé ˋapp.config.jsˋ (ou simplement ˋconfig.jsˋ). Une configuration pour un module nommé ˋadmin.module.jsˋ est nommé ˋadmin.config.jsˋ. + - Séparez la configuration d'un module dans son propre fichier nommé d'après le module. Un fichier de configuration du module principal ˋappˋ est nommé ˋapp.config.jsˋ (ou simplement ˋconfig.jsˋ). Une configuration pour un module nommé ˋadmin.module.jsˋ est nommé ˋadmin.config.jsˋ. - *Pourquoi ?* : Sépare la configuration de la définition du module, du composant et du code actif. + *Pourquoi ?* : Sépare la configuration de la définition du module, des composants et du code actif. - *Pourquoi ?* : Fournit un endroit bien identifié pour mettre la configuration d'un module. + *Pourquoi ?* : Fournit un endroit bien identifié pour régler la configuration d'un module. ### Routes ###### [Style [Y129](#style-y129)] - - Séparez la configuration de la route dans son propre fichier. Un exemple pourrait être ˋapp.route.jsˋ pour le module principal et ˋadmin.route.jsˋ pour le module d'ˋadminˋ. Même pour de petites applications, il est préférable de privilégier cette séparation du reste de la configuration. + - Séparez la configuration du routage dans son propre fichier. Un exemple pourrait être ˋapp.route.jsˋ pour le module principal et ˋadmin.route.jsˋ pour le module d'administration. Même pour de petites applications, il est préférable de privilégier cette séparation du reste de la configuration. **[Retour en haut de page](#table-des-matières)** From 29444f05089c0453fcfef631a0d891adca7b6c4f Mon Sep 17 00:00:00 2001 From: Xavier Haniquaut Date: Tue, 18 Aug 2015 22:39:32 +0200 Subject: [PATCH 059/248] [fr-FR] Refresh french translation : LIFT --- i18n/fr-FR.md | 32 ++++++++++++++++---------------- 1 file changed, 16 insertions(+), 16 deletions(-) diff --git a/i18n/fr-FR.md b/i18n/fr-FR.md index ae0c524f..c6dcc34b 100644 --- a/i18n/fr-FR.md +++ b/i18n/fr-FR.md @@ -2072,27 +2072,27 @@ Bien que ce guide explique le *quoi*, le *pourquoi* et le *comment*, il m'est ut **[Retour en haut de page](#table-des-matières)** -## Le Principe LIFT de Structuration de l'Application +## Architecture L.I.F.T. ### LIFT ###### [Style [Y140](#style-y140)] - - Structurez votre application afin de pouvoir `L`ocaliser le code plus rapidement, `I`dentifier le code d'un seul coup, garder la structure la plus platte possible (`F`lattest), et essayez (`T`ry) de rester DRY (Don't Repeat Yourself). La structure doit suivre ces 4 règles de bases. + - Structurez votre application afin de pouvoir `L`ocaliser le code plus rapidement, `I`dentifier le code d'un seul coup, garder la structure la plus plate possible (`F`lattest), et essayez (`T`ry) de rester DRY (Don't Repeat Yourself). La structure doit suivre ces quatre règles de base. - *Pourquoi LIFT ?* : Fournit une structure cohérente qui passe bien à l'échelle, qui est modulaire, et facilite l'augmentation de l'efficacité du développeur. Une autre façon de valider la structure de votre application est de vous demander : à quelle vitesse vous pouvez ouvrir et travailler dans tous les fichiés liés à une fonctionnalité ? + *Pourquoi ?* : L.I.F.T. fournit une structure cohérente qui peut grossir facilement, qui est modulaire, et augmente facilement l'efficacité de développement. Une autre façon de valider la structure de votre application est de vous demander à quelle vitesse vous pouvez ouvrir et travailler dans tous les fichiers liés à une fonctionnalité. - Lorsque je trouve que ma structure n'est pas confortable, je reviens en arrière et je revisite les règles LIFT. + Lorsque je trouve que ma structure n'est pas confortable, je reviens en arrière et consulte à nouveau les règles L.I.F.T. - 1. `L`ocaliser le code est facile - 2. `I`dentifier le code d'un coup - 3. `F`lat (platte) structure autant que possible - 4. `T`ry (essayer) de rester DRY (Don’t Repeat Yourself, Ne Pas Se Répéter) ou T-DRY + 1. `L`ocaliser notre code est facile. + 2. `I`dentifier le code d'un coup. + 3. `F`lat structure (structure plate) autant que possible. + 4. `T`ry (Essayer) de ne pas se répéter (T-DRY). ### Localisation ###### [Style [Y141](#style-y141)] - Rendez la localisation du code intuitive, simple et rapide. - *Pourquoi ?* : Je trouve que c'est super important pour un projet. Si l'équipe ne peut pas trouver rapidement les fichiers sur lesquels elle doit travailler, ils ne vont pas être en mesure de travailler aussi efficacement que possible, et la structure devra changer. Vous ne connaissez peut-être pas le nom du fichier où la position des fichiers liés, alors les placer dans les endroits les plus intuitifs et proches les uns les autres permet de gagner un paquet de temps. Une structure de répertoire descriptive peut aider à ça. + *Pourquoi ?* : Je trouve que c'est super important pour un projet. Si l'équipe ne peut pas trouver rapidement les fichiers sur lesquels elle doit travailler, elle ne va pas être en mesure de travailler aussi efficacement que possible, et la structure doit changer. Vous ne connaissez peut-être pas le nom du fichier où la position des fichiers liés, alors les placer dans les endroits les plus intuitifs et proches les uns les autres permet de gagner beaucoup de temps. Une structure de répertoire descriptive peut aider. ``` /bower_components @@ -2115,23 +2115,23 @@ Bien que ce guide explique le *quoi*, le *pourquoi* et le *comment*, il m'est ut ### Identification ###### [Style [Y142](#style-y142)] - - Lorsque vous regardez un fichier vous devriez instantanément savoir ce qu'il contient ce qu'il représente. + - Lorsque vous regardez un fichier vous devriez instantanément savoir ce qu'il contient et représente. - *Pourquoi ?* : Vous passez moins de temps à fouiller et vous perdre pour cherche le code, et devenez de plus en plus efficient. Si ça implique des noms de fichier plus long, alors d'accord. Soyez descriptif avec les noms de fichier et leur contenu ne doit contenir exactement qu'un seul composant. Éviter les fichier avec plusieurs contrôleurs, plusieurs services, ou un mélange. On pourrait admettre une exception à cette règle si j'ai un ensemble de fonctionnalités très petites qui sont toutes reliées entre elles, elles sont toujours facilement identifiables. + *Pourquoi ?* : Vous passez moins de temps à fouiller et vous perdre pour trouver du code, et devenez de plus en plus efficace. Si ça implique des noms de fichier plus long, alors d'accord. Soyez descriptif avec les noms des fichiers et leur contenu ne doit correspondre qu'à un seul composant. Évitez les fichiers avec plusieurs contrôleurs, plusieurs services, ou un mélange. On pourrait admettre une exception à cette règle si j'ai un ensemble de très petites fonctionnalités qui sont toutes reliées entre elles, elles sont toujours facilement identifiables. ### Plat ###### [Style [Y143](#style-y143)] - - Gardez une structure de répertoire à plat le plus longtemps possible. Lorsque vous avez 7 fichiers ou plus, commencez à penser à séparer. + - Gardez une structure de répertoire à plat le plus longtemps possible. Lorsque vous avez sept fichiers ou plus, commencez à penser à séparer. - *Pourquoi ?* : Personne ne souhaite rechercher dans 7 niveaux de répertoires pour trouver un fichier. Pensez aux menus des sites web… rien de plus profond que 2 niveaux ne devrait être sérieursement pris en considération. Dans une structure de répertoire, il n'y a pas de nombre d'or, mais lorsqu'un répertoire à entre 7 et 10 fichiers, il serait temps de créer des sous-répertoires. Basez cela sur votre niveau de confort. Utilisez une structure plus plate jusqu'à ce qu'il y ait un évident intérêt (pour respecter les autres principes LIFT) à créer un sous-répertoire. + *Pourquoi ?* : Personne ne souhaite rechercher dans sept niveaux de répertoires pour trouver un fichier. Pensez aux menus des sites web… Rien de plus profond que deux niveaux ne devrait être sérieusement pris en considération. Dans une structure de répertoire, il n'y a pas de nombre d'or, mais lorsqu'un répertoire à entre sept et dix fichiers, il serait temps de créer des sous-répertoires. Ajustez cela à votre de confort. Utilisez une structure plus plate jusqu'à ce qu'il y ait un intérêt évident (pour respecter les autres principes L.I.F.T.) à créer un sous-répertoire. -### T-DRY (Essayer de respecter DRY) +### T-DRY (Essayer de ne pas se répéter) ###### [Style [Y144](#style-y144)] - - Ne vous répétez pas (DRY), mais pas bêtement à tout prix ni en sacrifiant la lisibilité. + - Ne vous répétez pas (DRY), mais ne sacrifiez pas la lisibilité. - *Pourquoi ?* : Ne pas se répéter (DRY) est important, mais pas cricial si vous en êtesréduit à sacrifier les autres principes LIFT, c'est que qu'on peut appeller T-DRY (Essayer de ne pas se répéter). Je ne voudrai pas écrire session-view.html pour une vue, parce que, c'est évidemment une vue. Si ce n'est pas évident ou par convention, alors nommez-le. + *Pourquoi ?* : Ne pas se répéter (DRY) est important, mais pas critique si vous en êtes réduit à sacrifier les autres principes L.I.F.T, c'est ce qu'on sous-entend par T-DRY. Je ne veux pas écrire `session-view.html` pour une vue parce que c'est trivial. Si ce n'est pas évident ou si la convention le précise alors nommez-le. **[Retour en haut de page](#table-des-matières)** From 4eed1f671c447dfc8cb7e94b5b953135ef7f2180 Mon Sep 17 00:00:00 2001 From: Xavier Haniquaut Date: Tue, 18 Aug 2015 23:00:01 +0200 Subject: [PATCH 060/248] [fr-FR] Refresh french translation : Structure of the application --- i18n/fr-FR.md | 32 ++++++++++++++++---------------- 1 file changed, 16 insertions(+), 16 deletions(-) diff --git a/i18n/fr-FR.md b/i18n/fr-FR.md index c6dcc34b..510b29fd 100644 --- a/i18n/fr-FR.md +++ b/i18n/fr-FR.md @@ -2135,34 +2135,34 @@ Bien que ce guide explique le *quoi*, le *pourquoi* et le *comment*, il m'est ut **[Retour en haut de page](#table-des-matières)** -## Structure de l'Application +## Architecture de l'application -### Règles Générales +### Règles globales ###### [Style [Y150](#style-y150)] - - Vous devez avoir une vue court terme et une vision à long terme. En d'autres mots, commencez petit et garder en tête là où en est votre application. Tout le code de l'appli va dans un répertoire racine nommé `app`. Tout contenu fonctionnel doit être rangé dans son propre fichier. Chaque contrôleur, service, module, vue doit avoir son propre fichier. Tous les scripts provenant de fournisseurs extérieurs doivent être rangés dans un autre répertoire racine et non dans le répertoire `app`. Le code que l'on écrit pas soi-même ne doit pas se mélanger avec son appli (`bower_components`, `script`, `lib`). + - Vous devez avoir une vue court terme et une vision à long terme. En d'autres mots, commencez petit et gardez en tête là où veut aller votre application. Tout le code de l'application va dans un répertoire de départ nommé `app` à la racine du projet. Tout élément fonctionnel doit être rangé dans son propre et unique fichier. Chaque contrôleur, service, module, vue doit avoir son propre fichier. Tous les scripts externes doivent être rangés dans un autre répertoire à la racine du projet et non dans le répertoire `app`. Le code que l'on a pas écrit ne doit pas se mélanger avec le code de l'application (`bower_components`, `script`, `lib`). - Note : Vous trouverez plus de détails et les justifications derrière la structure sur [ce post original sur la structure des applications](http://www.johnpapa.net/angular-app-structuring-guidelines/). + Note : Vous trouverez plus de détails et de justifications concernant l'architecture sur [ce post original sur la structure des applications](http://www.johnpapa.net/angular-app-structuring-guidelines/). ### Layout ###### [Style [Y151](#style-y151)] - - Placez les composants qui définissent le layout principal de l'application dans un répertoire nommé `layout`. Il devrait inclure une vue noyau et le contrôleur devrait agir comme conteneur pour l'appli, la navigation, les menus, les zones de contenu, et les autres régions. + - Placez les composants qui définissent l'agencement visuel principal de l'application dans un répertoire nommé `layout`. Il devrait inclure une « vue-enveloppe » et le contrôleur devrait agir comme conteneur pour l'application, la navigation, les menus, les zones de contenu, et les autres régions. - *Pourquoi ?* : Organise tout le layout à un seul endroit réutilisé dans l'application. + *Pourquoi ?* : Cela organise tout l'agencement visuel à un seul endroit réutilisé dans toute l'application. -### Structure en Répertoires-par-Fonctionnalités +### Structure « répertoire-fonctionnalité » ###### [Style [Y152](#style-y152)] - - Créez des répertoires nommés d'après les fonctionnalités qu'elles représentent. Lorsqu'un répertoire grossit jusqu'à atteindre plus de 7 fichiers, commencez à penser la création d'un répertoire pour ceux-ci. Si votre seuil est différent, ajustez-le au besoin. + - Créez des répertoires nommés d'après les fonctionnalités qu'elles représentent. Lorsqu'un répertoire grossit jusqu'à atteindre plus de sept fichiers, commencez à penser la création d'un sous-répertoire pour ceux-ci. Si votre seuil est différent, ajustez au besoin. - *Pourquoi ?* : Un développeur peut localiser, identifier ce que représente chaque fichier en sune seule fois, la structure est aussi plate que possible, et il n'y a ni répétitions ni noms redondants. + *Pourquoi ?* : Un développeur peut localiser, identifier ce que représente chaque fichier en une seule fois, la structure est aussi plate que possible, et il n'y a ni répétitions ni redondance de nommage. - *Pourquoi ?* : Les règles LIFT sont toutes couvertes. + *Pourquoi ?* : Les règles L.I.F.T. sont toutes respectées. - *Pourquoi ?* : Aide à diminuer l'entropie de l'appli en organizant le contenu et en le maintenant aligné avec les principes LIFT. + *Pourquoi ?* : Aide à diminuer l'entropie de l'application en organisant le contenu et en le maintenant en accord avec les principes L.I.F.T. - *Pourquoi ?* : Lorsqu'il y a de nombreux fichiers (+ de 10) les repérer est plus facile avec une structure de répertoires cohérente et plus difficile dans une structure à plat. + *Pourquoi ?* : Lorsqu'il y a de nombreux fichiers (plus de dix), les repérer est plus facile avec une structure de répertoires cohérente que dans une structure à plat. ```javascript /** @@ -2203,15 +2203,15 @@ Bien que ce guide explique le *quoi*, le *pourquoi* et le *comment*, il m'est ut session-detail.controller.js ``` - ![Structure d'une Appli Exemple](https://raw.githubusercontent.com/johnpapa/angular-styleguide/master/assets/modularity-2.png) + ![Image d'un exemple de structure d'application](https://raw.githubusercontent.com/johnpapa/angular-styleguide/master/assets/modularity-2.png) - Note : N'utilisez pas une structuration de répertoires-par-type. Cela requiert de se déplacer entre de multiples répertoires lorsqu'on travaille sur une fonctionnalité et cela devient rapidement difficile à manier lorsque l'application grossit à 5, 10 ou plus de 25 vues et contrôleurs (et autres), ce qui complique la localisation par rapport à des répertoires-par-fonctionnalité. + Note : N'utilisez pas une structuration « répertoire-type ». Cela requiert de se déplacer entre de multiples répertoires lors du travail sur une fonctionnalité et cela devient rapidement difficile à manier lorsque l'application passe de à cinq, dix ou plus de vingt-cinq vues et contrôleurs (et autres fonctionnalités), ce qui complique la localisation par rapport à une structure en « répertoire-fonctionnalité ». ```javascript /* * à éviter - * Trouver une alternative aux répertoires-par-type. - * Je vous conseille les "répertoires-par-fonctionnalité", à la place. + * Alternative aux « répertoires-type » : + * Je vous conseille les « répertoires-fonctionnalité » */ app/ From 1804ca058be10973cbff65746c97f312265f7be0 Mon Sep 17 00:00:00 2001 From: Xavier Haniquaut Date: Tue, 18 Aug 2015 23:24:39 +0200 Subject: [PATCH 061/248] [fr-FR] Refresh french translation : Modularity --- i18n/fr-FR.md | 43 ++++++++++++++++++++++--------------------- 1 file changed, 22 insertions(+), 21 deletions(-) diff --git a/i18n/fr-FR.md b/i18n/fr-FR.md index 510b29fd..4acc6a7d 100644 --- a/i18n/fr-FR.md +++ b/i18n/fr-FR.md @@ -2218,6 +2218,7 @@ Bien que ce guide explique le *quoi*, le *pourquoi* et le *comment*, il m'est ut app.module.js app.config.js app.routes.js + directives.js controllers/ attendees.js session-detail.js @@ -2250,65 +2251,65 @@ Bien que ce guide explique le *quoi*, le *pourquoi* et le *comment*, il m'est ut ## Modularité -### De Nombreux Petits Modules Auto-Suffisants +### Nombreux petits modules auto-suffisants ###### [Style [Y160](#style-y160)] - - Créez de petits modules qui encapsulent une responsabilité. + - Créez de petits modules qui encapsulent une seule responsabilité. - *Pourquoi ?* : Les Applications modulaires rendent faciles le branchement rapide puisqu'elles permettent aux équipes de développement de construire des sections verticales de l'application et de livrer incrémentalement. Cela signifie que nous pouvons brancher de nouvelles fonctionnalités à mesure que nous les développons. + *Pourquoi ?* : Les applications modulaires rendent facile la compossibilité rapide puisqu'elles permettent aux équipes de développement de construire verticalement des sections de l'application et de livrer incrémentalement. Cela signifie que nous pouvons brancher de nouvelles fonctionnalités au fur et à mesure de leur développement. -### Création d'un Module Applicatif +### Création d'un module applicatif ###### [Style [Y161](#style-y161)] - Créez un module racine pour l'application dont le rôle est d'assembler tous les modules et fonctionnalités de votre application. Nommez-le comme votre application. - *Pourquoi ?* : Angular encourage la modularité et la séparation des responsabilités. La création d'un module racine pour l'application dont le rôle est de lier ensemble les autres modules fournit un moyen très direct d'ajouter et de retirer des modules à votre application. + *Pourquoi ?* : Angular encourage la modularité et la séparation des responsabilités. La création d'un module racine pour l'application dont le rôle est de lier ensemble des autres modules fournit un moyen très direct d'ajouter et de retirer des modules à votre application. -### Garder le Module Applicatif Léger +### Garder le module applicatif léger ###### [Style [Y162](#style-y162)] - Ne placez dans le module applicatif que la logique d'assemblage de l'application. Laissez les fonctionnalités dans leurs propres modules. - *Pourquoi ?* : Ajouter des responsabilités supplémentaires à l'application racine pour récupérer des données, afficher des vues, ou toute autre logique non reliée à l'assemblage de l'application trouble le module applicatif rend plus difficile à réutiliser ou éteindre les ensembles de fonctionnalités. + *Pourquoi ?* : Ajouter des responsabilités supplémentaires à la racine de l'application pour récupérer des données, afficher des vues, ou toute autre logique non reliée à l'assemblage de l'application trouble le module applicatif et rend plus difficile à réutiliser ou éteindre les ensembles de fonctionnalités. *Pourquoi ?* : Le module applicatif devient une déclaration qui montre quels modules aident à constituer l'application. -### Les Macro Fonctionnalités en tant que Modules +### Les macro-fonctionnalités sont des modules ###### [Style [Y163](#style-y163)] - - Créez des modules qui représentent des macro fonctionnalités, comme le layout, les services ré-utilisables et partagés, les dashboards, et les fonctionnalités applicatives spécifiques (par exemple : clients, admin, ventes). + - Créez des modules qui représentent des macro-fonctionnalités, comme l'agencement graphique (*layout*), les services ré-utilisables et partagés, les dashboards, et les fonctionnalités applicatives spécifiques (par exemple : clients, admin, ventes). *Pourquoi ?* : Les modules auto-suffisants peuvent être ajoutés à l'application avec peu ou pas de friction. - *Pourquoi ?* : Les sprints ou itérations peuvent se focaliser sur les macro-fonctionnalités et les activer à la fin de l'itération. + *Pourquoi ?* : Les sprints ou itérations peuvent être focalisés sur les macro-fonctionnalités. Elles peuvent être activées à la fin de ceux-ci. - *Pourquoi ?* : Séparer les macros-fonctionnalités rend plus facile les tests des modules en isolation et la réutilisation du code. + *Pourquoi ?* : Séparer les macros-fonctionnalités en modules les rend plus facile à tester de façon isolée et à la réutilisation. ### Les Blocks Ré-Utilisables en tant que Modules ###### [Style [Y164](#style-y164)] - - Créez des modules qui représentent des blocs d'application ré-utilisables pour les services en commun tels que la gestion d'exceptions, les logs, les diagnostics, la sécurité et la gestion des données en locale. + - Créez des modules qui représentent des blocs ré-utilisables dans l'application pour les services en commun tels que la gestion des exceptions, les logs, les diagnostics, la sécurité et la gestion des données locale. - *Pourquoi ?* : Ces types de fonctinnalités sont requises dans de nombreuses application, donc en les gardant séparées dans leur propres modules elles peuvent être génériques par rapport aux applications et peuvent être ré-utilisées pour d'autres applications. + *Pourquoi ?* : Ces types de fonctionnalités sont requises dans de nombreuses application, donc en les gardant séparées dans leur propres modules elles peuvent être génériques et peuvent être ré-utilisées pour d'autres applications. -### Dependences Entre Modules +### Dépendances entre modules ###### [Style [Y165](#style-y165)] - Le module racine de l'application dépend des modules des fonctionnalités spécifiques et de certains modules partagés et ré-utilisables. - ![Modularity and Dependencies](https://raw.githubusercontent.com/johnpapa/angular-styleguide/master/assets/modularity-1.png) + ![Modularité et Dépendences](https://raw.githubusercontent.com/johnpapa/angular-styleguide/master/assets/modularity-1.png) - *Pourquoi?* : Le module principal de l'appli continent une déclaration rapidement identifible des fonctionnalités de l'application. + *Pourquoi?* : Le module principal de l'application continent manifeste des fonctionnalités de l'application. - *Pourquoi ?* : Chaque groupe de fonctionnalité contient une déclaration de ce dont il dépend, de ce fait il peut être tiré comme dépendance dans d'autres applications et continuer à fonctionner. + *Pourquoi ?* : Chaque groupe de fonctionnalités contient une déclaration de ce dont il dépend, de ce fait il peut être importé comme dépendance dans d'autres applications et continuer à fonctionner. - *Pourquoi ?* : Les fonctionalités propres à l'appli tels que les services de données partagées deviennent faciles à repérer et partager au sein d'un `app.core` (choisissez un nom de votre choix pour ce module. + *Pourquoi ?* : Les fonctionnalités propres à l'application telles que les services de données partagées deviennent faciles à repérer et partager au sein d'un `app.core` (choisissez un nom de votre choix pour ce module). - Note : C'est un stratégie pour la cohérence. Il y a ici beaucoup de bons choix. Choisisez-en une qui soit cohérente, suivez les règles des dépendances d'Angular, et la maintenance et la montée en charge sera facilitée. + Note : C'est un stratégie pour la cohérence. Il y a ici beaucoup de bons choix. Choisissez-en une qui soit cohérente, suivez les règles des dépendances d'Angular, et la maintenance et la montée en charge sera facilitée. - > Mes structures peuvent varier légèrement entre les projets mais elles suivent toutes ces règles pour la structure et la modularité. L'implémentation peut varier en fonction des fonctionnalités et de l'équipe. En d'autres termes, ne vous paralysez pas sur une structure exactement semblable mais soumettez votre structure aux critères de cohérence, maintenance, et efficacité. + > Mes structures peuvent varier légèrement entre les projets mais elles suivent toutes ces règles pour la structure et la modularité. L'implémentation peut varier en fonction des fonctionnalités et de l'équipe. En d'autres termes, ne vous paralysez pas sur une structure exactement semblable mais pensez votre structure en termes de cohérence, maintenabilité, et efficacité. - > Dans de petites applic, vous pouvez aussi mettre toutes vos dépendances partagées dans le module applicatif où les modules fonctionnels n'ont pas de dépendances directes. Cela pourra rendre la maintenance de cette petite application plus facile, mais rendez difficile la ré-utilisation de ces modules en dehors de cette application. + > Dans de petites applications, vous pouvez aussi mettre toutes vos dépendances partagées dans le module applicatif où les modules fonctionnels n'ont pas de dépendances directes. Cela pourra rendre la maintenance de petites applications plus facile, mais rend difficile la ré-utilisation de ces modules en dehors de celle-ci. **[Retour en haut de page](#table-des-matières)** From 945a81becbee8649ffa3df89ecea68d07a3ca64f Mon Sep 17 00:00:00 2001 From: Xavier Haniquaut Date: Tue, 18 Aug 2015 23:43:09 +0200 Subject: [PATCH 062/248] [fr-FR] Refresh french translation: Startup Logic --- i18n/fr-FR.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/i18n/fr-FR.md b/i18n/fr-FR.md index 4acc6a7d..48dfe602 100644 --- a/i18n/fr-FR.md +++ b/i18n/fr-FR.md @@ -2313,14 +2313,14 @@ Bien que ce guide explique le *quoi*, le *pourquoi* et le *comment*, il m'est ut **[Retour en haut de page](#table-des-matières)** -## Logique de Démarrage +## Logique d'initialisation ### Configuration ###### [Style [Y170](#style-y170)] - - Injectez le code à l'intérieur d'une [configuration de module](https://docs.angularjs.org/guide/module#module-loading-dependencies) qui doit être configuré avant l'éxécution de l'appli angular. Parmis les candidats idéaux, on trouve les providers et les constantes. + - Injectez le code à l'intérieur d'une [configuration de module](https://docs.angularjs.org/guide/module#module-loading-dependencies) qui doit être configurée avant l’exécution de l'application Angular. Parmi les candidats idéaux, on trouve les *providers* et les constantes. - *Pourquoi ?* : Ça rend les choses plus faciles d'avoir le moins d'endroits possible pour placer la configuration. + *Pourquoi ?* : Cela rend les choses plus faciles d'avoir le moins d'endroits possibles pour la configuration. ```javascript angular @@ -2347,12 +2347,12 @@ Bien que ce guide explique le *quoi*, le *pourquoi* et le *comment*, il m'est ut } ``` -### Blocs Run +### Blocs `run` ###### [Style [Y171](#style-y171)] - - Tout code qui nécessite de s'éxécuter lorsque l'application démarre devrait être déclaré dans une factory, exposé via une fonction, et injecté dans un [bloc run](https://docs.angularjs.org/guide/module#module-loading-dependencies). + - Tout code qui nécessite de s’exécuter lorsque l'application s'initialise devrait être déclaré dans une *factory*, exposé via une fonction, et injecté dans le [bloc run](https://docs.angularjs.org/guide/module#module-loading-dependencies). - *Pourquoi ?* : Le code écrit directement dans un bloc run peut être difficile à tester. Le placer dans une factory le rend plus facile à abstraire et mocker. + *Pourquoi ?* : Le code directement écrit dans un bloc `run` peut être difficile à tester. Le placer dans une *factory* le rend plus facile à abstraire et à *mocker*. ```javascript angular From 2ca250505eea09e19898d505fa918b1df211fb11 Mon Sep 17 00:00:00 2001 From: Xavier Haniquaut Date: Tue, 18 Aug 2015 23:47:09 +0200 Subject: [PATCH 063/248] [fr-FR] Refresh french translation : $ services --- i18n/fr-FR.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/i18n/fr-FR.md b/i18n/fr-FR.md index 48dfe602..d621faf0 100644 --- a/i18n/fr-FR.md +++ b/i18n/fr-FR.md @@ -2369,21 +2369,21 @@ Bien que ce guide explique le *quoi*, le *pourquoi* et le *comment*, il m'est ut **[Retour en haut de page](#table-des-matières)** -## Les Services de Wrapper $ de Angular +## Les services `$` d'Angular -### $document et $window +### `$document` et `$window` ###### [Style [Y180](#style-y180)] - Utilisez [`$document`](https://docs.angularjs.org/api/ng/service/$document) et [`$window`](https://docs.angularjs.org/api/ng/service/$window) au lieu de `document` et `window`. - *Pourquoi ?* : Ces services sont wrappés par Angular et plus facilement testables qu'en utilisant document et window dans les tests. Ils vous aident à éviter d'avoir à mocker document et window vous-même. + *Pourquoi ?* : Ces services sont *wrappés* par Angular et plus facilement testables qu'en utilisant document et window dans les tests. Ils vous aident à éviter d'avoir à *mocker* `document` et `window` vous-même. ### $timeout et $interval ###### [Style [Y181](#style-y181)] - Utilisez [`$timeout`](https://docs.angularjs.org/api/ng/service/$timeout) et [`$interval`](https://docs.angularjs.org/api/ng/service/$interval) au lieu de `setTimeout` et `setInterval`. - *Pourquoi ?* : Ces services sont wrappés par Angular et plus facilement testables et gèrent le cycle de digest d'Angular conservant un data binding à jour. + *Pourquoi ?* : Ces services sont *wrappés* par Angular et plus facilement testables et gèrent le cycle de *digest* d'Angular conservant un *data-binding* synchronisé. **[Retour en haut de page](#table-des-matières)** From ee8344791e87bb7b4291b57a35483c5f8530fc03 Mon Sep 17 00:00:00 2001 From: Xavier Haniquaut Date: Wed, 19 Aug 2015 00:18:07 +0200 Subject: [PATCH 064/248] [fr-FR] Refresh french translation : Testing --- i18n/fr-FR.md | 110 +++++++++++++++++++++++++++++++++++--------------- 1 file changed, 77 insertions(+), 33 deletions(-) diff --git a/i18n/fr-FR.md b/i18n/fr-FR.md index d621faf0..14d29999 100644 --- a/i18n/fr-FR.md +++ b/i18n/fr-FR.md @@ -2387,15 +2387,15 @@ Bien que ce guide explique le *quoi*, le *pourquoi* et le *comment*, il m'est ut **[Retour en haut de page](#table-des-matières)** -## Le Test -Les tests unitaires aident à maintenir un code propre, ainsi, j'ai inclu quelques unes de mes recommandations sur les fondamentaux du test unitaire avec des liens pour plus déinformation. +## Tests +Les tests unitaires aident à maintenir un code source propre, ainsi j'ai inclut quelques unes de mes recommandations sur les bases des tests unitaires avec des liens pour plus d'informations. -### Écriture des Tests avec les Stories +### Écrire les tests avec des scenarii ###### [Style [Y190](#style-y190)] - - Écrivez un ensemble de tests pour chaque story. Commencer avec un test vide et complétez-les à mesure que vous écrivez le code pour la story. + - Écrivez un ensemble de tests pour chaque scenario. Commencer avec un test vide et complétez-les à mesure que vous écrivez le code pour le scenario. - *Pourquoi ?* : Écrire les descriptions de tests aident à définir clairement ce que votre story devra faire, ne devra pas faire et comment mesurer l'avancement. + *Pourquoi ?* : Écrire les descriptions de tests aident à définir clairement ce que votre scenario devra faire, ne devra pas faire et comment mesurer la réussite. ```javascript it('should have Avengers controller', function() { @@ -2417,12 +2417,12 @@ Les tests unitaires aident à maintenir un code propre, ainsi, j'ai inclu quelqu // et ainsi de suite ``` -### Librairie de Test +### Librairie de test ###### [Style [Y191](#style-y191)] - Utilisez [Jasmine](http://jasmine.github.io/) or [Mocha](http://mochajs.org) pour les tests unitaires. - *Pourquoi ?* : Jasmine et Mocha sont toutes deux largement utilisées dans la communauté Angular. Toutes les deux stables, bien maintenues, et fournissant des fonctionnalités robustes de test. + *Pourquoi ?* : Jasmine et Mocha sont toutes deux largement utilisées dans la communauté Angular. Toutes les deux sont stables, bien maintenues, et fournissent des fonctionnalités de test robustes. Note : Lorsque vous utilisez Mocha, utilisez aussi une librairie d'assertion telle que [Chai](http://chaijs.com). Je prefère Mocha. @@ -2431,78 +2431,122 @@ Les tests unitaires aident à maintenir un code propre, ainsi, j'ai inclu quelqu - Utilisez [Karma](http://karma-runner.github.io) comme lanceur de test. - *Pourquoi ?* : Karma est facile à configurer pour lancer les tests une fois ou automatiquement lorsqu'un changement est fait dans le code. + *Pourquoi ?* : Karma est facile à configurer pour lancer les tests ponctuellement ou automatiquement lorsqu'un changement est fait dans le code. - *Pourquoi ?* : Karma s'intègre facilement dans votre processus d'Intégration Continue soit tout seul ou par Grunt ou Gulp. + *Pourquoi ?* : Karma s'intègre facilement dans votre processus d'intégration continue soit seul ou via Grunt ou Gulp. *Pourquoi ?* : Quelques EDI commencent à s'intégrer avec Karma, c'est le cas de [WebStorm](http://www.jetbrains.com/webstorm/) et [Visual Studio](http://visualstudiogallery.msdn.microsoft.com/02f47876-0e7a-4f6c-93f8-1af5d5189225). - *Pourquoi ?* : Karma fonctionne bien avec les leaders de l'automatisation de tâches tel que [Grunt](http://www.gruntjs.com) (avec [grunt-karma](https://github.com/karma-runner/grunt-karma)) ou [Gulp](http://www.gulpjs.com) (avec [gulp-karma](https://github.com/lazd/gulp-karma)). + *Pourquoi ?* : Karma fonctionne bien avec les principaux outils d'automatisation de tâches tel que [Grunt](http://www.gruntjs.com) (avec [grunt-karma](https://github.com/karma-runner/grunt-karma)) ou [Gulp](http://www.gulpjs.com). Si vous utilisez Gulp, utilisez [Karma](https://github.com/karma-runner/karma) directement plutôt que via un plugin, son API peut s'utiliser directement. -### Les Stubs et les Spy + ```javascript + /* recommended */ + + // Exemple de Gulp fonctionnant directement avec Karma + function startTests(singleRun, done) { + var child; + var excludeFiles = []; + var fork = require('child_process').fork; + var karma = require('karma').server; + var serverSpecs = config.serverIntegrationSpecs; + + if (args.startServers) { + log('Starting servers'); + var savedEnv = process.env; + savedEnv.NODE_ENV = 'dev'; + savedEnv.PORT = 8888; + child = fork(config.nodeServer); + } else { + if (serverSpecs && serverSpecs.length) { + excludeFiles = serverSpecs; + } + } + + karma.start({ + configFile: __dirname + '/karma.conf.js', + exclude: excludeFiles, + singleRun: !!singleRun + }, karmaCompleted); + + //////////////// + + function karmaCompleted(karmaResult) { + log('Karma completed'); + if (child) { + log('shutting down the child process'); + child.kill(); + } + if (karmaResult === 1) { + done('karma: tests failed with code ' + karmaResult); + } else { + done(); + } + } + } + ``` + +### `stub` et les `spy` ###### [Style [Y193](#style-y193)] - - Utilisez [Sinon](http://sinonjs.org/) pour les stubs et les spy. + - Utilisez [Sinon](http://sinonjs.org/) pour les `stub` et les `spy`. - *Pourquoi ?* : Sinon fonctionne bien avec Jasmine et Mocha et étend les fonctionnalités de stub et de spy qu'ils offrent. + *Pourquoi ?* : Sinon fonctionne bien avec Jasmine et Mocha et étend les fonctionnalités de `stub` et de `spy` qu'ils offrent. *Pourquoi ?* : Sinon rend plus facile l'alternance entre Jasmine et Mocha, si vous voulez essayer les deux. - *Pourquoi ?* : Sinon a des messages descriptifs quand les tests ne valident pas les assertions. - + *Pourquoi ?* : Sinon fournit des messages descriptifs quand les tests ne valident pas les assertions. -### Navigateur sans Interface Graphique +### Navigateur sans interface graphique ###### [Style [Y194](#style-y194)] - - Utilisez [PhantomJS](http://phantomjs.org/) pour éxécuter les tests sur un serveur. + - Utilisez [PhantomJS](http://phantomjs.org/) pour exécuter les tests sur un serveur. - *Pourquoi?* : PhantomJS est un navigateur sans interface graphique qui peut vous aider à éxécuter les tests sans avoir besoin d'un navigateur "visuel". Ainsi vous n'avez pas besoin d'installer Chrome, Safari, IE, ou d'autres navigateurs sur votre serveur. + *Pourquoi?* : PhantomJS est un navigateur sans interface graphique qui peut vous aider à exécuter les tests sans avoir besoin d'un navigateur "visuel". Ainsi vous n'avez pas besoin d'installer Chrome, Safari, IE, ou d'autres navigateurs sur votre serveur. - Note : Que cela ne vous dispense pas de tester sur tous les navigateurs dans votre environnement, d'après les clients que vous ciblez. + Note : Que cela ne vous dispense pas de tester sur tous les navigateurs dans votre environnement,en fonction des clients que vous ciblez. -### Analyse de Code +### Analyse du code ###### [Style [Y195](#style-y195)] - Exécutez JSHint sur vos tests. - *Pourquoi ?* : Les tests sont du code. JSHint peut vous aider à identifier les problèmes de qualité de code qui pourrait amener les tests à fonctionner de façon incorrecte. + *Pourquoi ?* : Les tests' c'est aussi du code. JSHint peut vous aider à identifier les problèmes de qualité de code qui pourrait amener les tests à fonctionner de façon incorrecte. -### Atténuation des Règles JSHint avec les Golbales sur les Tests +### Assouplissement des règles de JSHint avec les variables globales dans les tests ###### [Style [Y196](#style-y196)] - - Relaxez les règles sur votre code de test afin de permettre l'usage des globales telles que `describe` et `expect`. Relaxez les règles pour les expressions, de la même façon qu'avec Mocha. + - Assouplissez les règles sur votre code de test afin de permettre l'usage des variables globales courantes telles que `describe` et `expect`. Assouplissez les règles pour les expressions puisque Mocha les utilise. - *Pourquoi ?* : Vos tests sont du code et requièrent à ce titre la même attention avec les mêmes règles de qualité de code que votre code de production. Cependant, les variables globales utilisées par les frameworks de test, par exemple, peuvent être relaxées en les incluants dans les spécifications de test. + *Pourquoi ?* : Vos tests sont du code et requièrent à ce titre la même attention avec les mêmes règles de qualité de code que votre code de production. Cependant, les variables globales utilisées par les *frameworks* de test, par exemple, peuvent être négligées en les incluant dans les spécifications de test. ```javascript /* jshint -W117, -W030 */ ``` - Ou laors vous pouvez rajouter ça à votre fichier d'option JSHint. + Ou alors vous pouvez rajouter le snippet suivant à votre fichier d'options JSHint. ```javascript "jasmine": true, "mocha": true, ``` - - ![Outils de Test](https://raw.githubusercontent.com/johnpapa/angular-styleguide/master/assets/testing-tools.png) + ![Outils de test](https://raw.githubusercontent.com/johnpapa/angular-styleguide/master/assets/testing-tools.png) ### Organizing Tests ###### [Style [Y197](#style-y197)] - - Placez les fichiers des tests unitaires (specs) côte-à-côte du code client. Placez les specs qui couvrent l'intégration avec le serveur ou les celles qui testent plusieurs composants dans un répertoire `tests` séparé. + - Placez les fichiers des tests unitaires (specs) à parallèlement du code client. Placez les specs qui sont en charge de l'intégration avec le serveur ou les celles qui testent plusieurs composants dans un répertoire `tests` séparé. - *Pourquoi ?* : Les tests unitaires sont en corrélation directe avec un composant spécifique et un fichier dans le code source. + *Pourquoi ?* : Les tests unitaires sont en corrélation directe avec les composants et fichiers qu'ils testent dans le code source. - *Pourquoi ?* : Il est plus facile de les mettre à jour pluisqu'ils sont toujours les uns en face des autres. Quand vous développez, que vous fassiez du TDD, des tests en meme temps que l'implémentation ou des tests après l'implémentation, les specs sont côte-à-côte et jamais loin ni des yeux ni de l'esprit, et ainsi ils ont plus de chance d'etre maintenus ce qui permet aussi de tenir une bonne couverture de code. + *Pourquoi ?* : Il est plus facile de les mettre à jour puisqu'ils sont toujours visibles. Quand vous développez, que vous fassiez du TDD, des tests en même temps que l'implémentation ou des tests après l'implémentation, les spécifications ne sont jamais loin ni des yeux ni de l'esprit, et ainsi ils ont plus de chance d'être maintenus, ce qui permet aussi de tenir une bon *coverage*. *Pourquoi ?* : Quand vous mettez à jour le code source, il est plus facile de mettre à jour les tests en même temps. - *Pourquoi ?* : Les placer côte-à-côte les rend plus facile à trouver et facile à déplacer si vous déplacez les sources. + *Pourquoi ?* : Les placer en parallèle les rend plus facile à trouver et facile à déplacer si vous déplacez les sources. - *Pourquoi ?* : Avoir les specs proches permet au lecteur du code source d'apprendre comment le composant est supposé être utilisé et découvrir les limitations connues. + *Pourquoi ?* : Avoir les spécifications proches permet au lecteur d'apprendre comment le composant est supposé être utilisé et découvrir ses limitations connues. - *Pourquoi ?* : La séparation des specs afin qu'ils ne soient pas inclus dans le build est facile avec grunt ou gulp. + *Pourquoi ?* : Séparer les spécifications de test afin qu'ils ne soient pas inclus dans le *build* est facile avec grunt ou gulp. ``` /src/client/app/customers/customer-detail.controller.js From 3e65db42ab86da215660d6e3e670c798ec6f0d2f Mon Sep 17 00:00:00 2001 From: Xavier Haniquaut Date: Wed, 19 Aug 2015 00:25:54 +0200 Subject: [PATCH 065/248] [fr-FR] Refresh french translation : Animations --- i18n/fr-FR.md | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/i18n/fr-FR.md b/i18n/fr-FR.md index 14d29999..62417c36 100644 --- a/i18n/fr-FR.md +++ b/i18n/fr-FR.md @@ -2565,31 +2565,31 @@ Les tests unitaires aident à maintenir un code source propre, ainsi j'ai inclut ### Utilisation ###### [Style [Y210](#style-y210)] - - Utilisez de subtiles [animations avec Angular](https://docs.angularjs.org/guide/animations) pour la transition entre les états pour les vues et les éléments visuels premiers. Incluez le [module ngAnimate](https://docs.angularjs.org/api/ngAnimate). Les trois clés sont la subtilité, la fluidité, l'homogénéïté. + - Utilisez de subtiles [animations avec Angular](https://docs.angularjs.org/guide/animations) pour les transitions entre les états pour les vues et les éléments visuels de base. Incluez le [module ngAnimate](https://docs.angularjs.org/api/ngAnimate). Les trois clés sont la subtilité, la fluidité, l’homogénéité. - *Pourquoi ?* : Des animations subtiles peuvent améliorer l'Expérience Utilisateur lorsqu'elles sont utilisées de façon appropriéés. + *Pourquoi ?* : Des animations subtiles peuvent améliorer l'expérience utilisateur lorsqu'elles sont utilisées de façon appropriées. - *Pourquoi ?* : Des animations subtiles peuvent améliorer la performance perçue lorsque les vues changent. + *Pourquoi ?* : Des animations subtiles peuvent améliorer les performances perçues lorsque les vues changent. ### Moins d'une Seconde ###### [Style [Y211](#style-y211)] - - Utilisez de courtes durées pour les animations. Je commence en général par 300 milli secondes et j'ajuste jusqu'à ce que ce soit bien. + - Utilisez de courtes durées pour les animations. Je commence en général par 300ms et j'ajuste jusqu'à ce que le résultat soit celui attendu. - *Pourquoi ?* : Les animations longues peuvent avoir un effet inverse sur l'Expérience Utilisateur et la performance perçue en donnant l'apparence d'une application lente. + *Pourquoi ?* : Les animations longues peuvent avoir des effets inverses sur l'expérience utilisateur et les performances perçues en donnant l'impression d'une application lente. ### animate.css ###### [Style [Y212](#style-y212)] - - Utilisez [animate.css](http://daneden.github.io/animate.css/) pour les animations conventionnelles. + - Utilisez [animate.css](http://daneden.github.io/animate.css/) pour les animations classiques. - *Pourquoi ?* : Les animations que fournissent animate.css sont rapides, fluides et facile a ajouter à votre application. + *Pourquoi ?* : Les animations que fournit animate.css sont rapides, fluides et faciles à ajouter à votre application. - *Pourquoi ?* : Fournit de la cohérence dans vos animations. + *Pourquoi ?* : Fournit de la cohérence à vos animations. - *Pourquoi ?* : animate.css est largement utilisée et testée. + *Pourquoi ?* : animate.css est largement utilisée et testé. - Note : Voir ce [super post par Matias Niemelä sur les animations d'Angular](http://www.yearofmoo.com/2013/08/remastered-animation-in-angularjs-1-2.html) + Note : Lire ce [super post par Matias Niemelä sur les animations Angular](http://www.yearofmoo.com/2013/08/remastered-animation-in-angularjs-1-2.html) **[Retour en haut de page](#table-des-matières)** From e794f96828b5c9cc22db0f7356c40f45890e17a5 Mon Sep 17 00:00:00 2001 From: Xavier Haniquaut Date: Wed, 19 Aug 2015 00:31:00 +0200 Subject: [PATCH 066/248] [fr-FR] Refresh french translation : Comments --- i18n/fr-FR.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/i18n/fr-FR.md b/i18n/fr-FR.md index 62417c36..464b695c 100644 --- a/i18n/fr-FR.md +++ b/i18n/fr-FR.md @@ -2598,15 +2598,15 @@ Les tests unitaires aident à maintenir un code source propre, ainsi j'ai inclut ### jsDoc ###### [Style [Y220](#style-y220)] - - Si vous prévoyez de produire de la documentation de code, utilisez la syntaxe [`jsDoc`](http://usejsdoc.org/) pour documenter les noms de fonction, leur description, paramètres et valeurs de renvoi. Utilisez `@namespace` et `memberOf` pour s'adapter à la structure de votre appli. + - Si vous prévoyez de documenter votre code source, utilisez la syntaxe [`jsDoc`](http://usejsdoc.org/) pour documenter les noms des fonctions, leur descriptions, paramètres et valeurs de retour. Utilisez `@namespace` et `memberOf` pour s'adapter à l'architecture de votre application. - *Pourquoi ?* : Vous pouvez générer (et re-générer) la documentation à partir de votre code, au lieu de l'écrire de zéro. + *Pourquoi ?* : Vous pouvez générer (et re-générer) la documentation à partir de votre code, au lieu de l'écrire intégralement. - *Pourquoi ?* : Fournit de la cohérence en utilisant un outil industriel commun. + *Pourquoi ?* : Cela permet d'avoir de la cohérence grâce un outil industriel standard. ```javascript /** - * Factory de Logger + * Factory de logger * @namespace Factories */ (function() { @@ -2629,8 +2629,8 @@ Les tests unitaires aident à maintenir un code source propre, ainsi j'ai inclut /** * @name logError - * @desc Loggue les errors - * @param {String} msg Le message à logguer + * @desc Logue les erreurs + * @param {String} msg Le message à loguer * @returns {String} * @memberOf Factories.Logger */ From 961915f4226fbe05c0890b8a8b1722594563c896 Mon Sep 17 00:00:00 2001 From: Xavier Haniquaut Date: Wed, 19 Aug 2015 00:39:21 +0200 Subject: [PATCH 067/248] [fr-FR] Refresh french translation : JSHint --- i18n/fr-FR.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/i18n/fr-FR.md b/i18n/fr-FR.md index 464b695c..e3afa70e 100644 --- a/i18n/fr-FR.md +++ b/i18n/fr-FR.md @@ -2645,14 +2645,14 @@ Les tests unitaires aident à maintenir un code source propre, ainsi j'ai inclut **[Retour en haut de page](#table-des-matières)** -## JS Hint +## JSHint -### Utilisation d'un Fichier d'Options +### Utilisation d'un fichier d'options ###### [Style [Y230](#style-y230)] - - Utilisez JS Hint pour éplucher votre JavaScript et assurez-vous d'avoir personnalisé le fichier d'options JS Hint et incluez le dans le système de gestion de versions. Voir la [doc de JS Hint](http://www.jshint.com/docs/) pour les détails de chaque option. + - Utilisez JSHint pour analyser votre JavaScript et assurez-vous d'avoir personnalisé son fichier d'options et incluez le dans le système de versioning. Lire la [documentation de JSHint](http://www.jshint.com/docs/) pour avoir les détails de chaque option. - *Pourquoi ?* : Fournit une première alerte avant de committer son code dans le système de gestion de version. + *Pourquoi ?* : Cela fournit une première alerte avant de *committer* son code dans le système de versioning. *Pourquoi ?* : Fournit de la cohérence dans votre équipe. From 4f236ffaacdc951dc82033da15a39f0c7f9b5960 Mon Sep 17 00:00:00 2001 From: Xavier Haniquaut Date: Wed, 19 Aug 2015 00:42:02 +0200 Subject: [PATCH 068/248] [fr-FR] Refresh french translation : JSCS --- i18n/fr-FR.md | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/i18n/fr-FR.md b/i18n/fr-FR.md index e3afa70e..c5e4c38b 100644 --- a/i18n/fr-FR.md +++ b/i18n/fr-FR.md @@ -2724,11 +2724,12 @@ Les tests unitaires aident à maintenir un code source propre, ainsi j'ai inclut ## JSCS -### Use an Options File +### Utiliser un fichier de configuration ###### [Style [Y235](#style-y235)] - - Utilisez JSCS pour valider votre style de code pour votre JavaScript et pensez à personnaliser vos options pour JSCS et de l'inclure dans votre gestionnaire de versionning. Vous pouvez consulter la [documentation de JSCS](http://www.jscs.info) pour voir les détails et les options. - *Pourquoi ?* : Fournit une premiere alerte avant de commiter sur votre gestionnaire de versionning. + - Utilisez JSCS pour valider vos styles de code pour votre JavaScript et pensez à personnaliser vos options pour JSCS et de l'inclure dans votre gestionnaire de versioning. Vous pouvez consulter la [documentation de JSCS](http://www.jscs.info) pour voir les détails et les options. + + *Pourquoi ?* : Fournit une première alerte avant de *commiter* sur votre gestionnaire de versioning. *Pourquoi ?* : Permet d'assurer une cohérence au sein de votre équipe. From 1d17591f3218cd8e82a75fef2ab63e1c3314c845 Mon Sep 17 00:00:00 2001 From: Xavier Haniquaut Date: Wed, 19 Aug 2015 00:49:35 +0200 Subject: [PATCH 069/248] [fr-FR] Refresh french translation : Constants --- i18n/fr-FR.md | 20 +++++++++++--------- 1 file changed, 11 insertions(+), 9 deletions(-) diff --git a/i18n/fr-FR.md b/i18n/fr-FR.md index c5e4c38b..f68a501f 100644 --- a/i18n/fr-FR.md +++ b/i18n/fr-FR.md @@ -2789,9 +2789,12 @@ Les tests unitaires aident à maintenir un code source propre, ainsi j'ai inclut "disallowSpacesInsideArrayBrackets": "all", "disallowSpacesInsideParentheses": true, - "validateJSDoc": { + "jsDoc": { + "checkAnnotations": true, "checkParamNames": true, - "requireParamTypes": true + "requireParamTypes": true, + "checkReturnTypes": true, + "checkTypes": true }, "disallowMultipleLineBreaks": true, @@ -2799,7 +2802,6 @@ Les tests unitaires aident à maintenir un code source propre, ainsi j'ai inclut "disallowCommaBeforeLineBreak": null, "disallowDanglingUnderscores": null, "disallowEmptyBlocks": null, - "disallowMultipleLineStrings": null, "disallowTrailingComma": null, "requireCommaBeforeLineBreak": null, "requireDotNotation": null, @@ -2815,9 +2817,9 @@ Les tests unitaires aident à maintenir un code source propre, ainsi j'ai inclut ### Globales des Librairies Externes ###### [Style [Y240](#style-y240)] - - Créez une Constante Angular pour les variables gobales des librairies externes. + - Créez une constante Angular pour les variables globales des librairies externes. - *Pourquoi ?* : Fournit un moyen d'injecter des librairies tierces qui seraient sinon des globales. Cela améliore la testabilité du code en vous permettant de savoir plus facilement quelles sont les dépendances de vos composants évite les abstractions qui fuient). Ça vous permet aussi de mocker ces dépendances, là où cela fait sens. + *Pourquoi ?* : Fournit un moyen d'injecter des librairies tierces qui seraient sinon des globales. Cela améliore la testabilité du code en vous permettant de savoir plus facilement quelles sont les dépendances de vos composants (et évite de faire des abstractions qui fuient). Ça vous permet aussi de *mocker* ces dépendances, là où cela fait sens. ```javascript // constants.js @@ -2835,13 +2837,13 @@ Les tests unitaires aident à maintenir un code source propre, ainsi j'ai inclut ###### [Style [Y241](#style-y241)] - - Utilisez les constantes pour les valeurs qui ne changent pas et ne viennent pas d'un autre service. Quand des contantes ne sont utilisées que par un module qui peut être ré-utilisé dans d'autres applications, placez les constantes dans un seul fichier par module nommé comme le module. Tant que c'est possible, gardez les constantes dans le module principal dans un fichier `constants.js`. + - Utilisez des constantes pour les valeurs qui ne changent pas et ne viennent pas d'un autre service. Quand des contentes ne sont pas utilisées que par un module qui peut être ré-utilisé dans d'autres applications, placez les constantes dans un seul fichier par module nommé comme le module. Tant que c'est possible, gardez les constantes dans le module principal dans un fichier `constants.js`. - *Pourquoi ?* : Une valeur qui peut changer, même rarement, devrait être récupérée d'un service afin de ne pas avoir à changer le code source. Par exemple, une URL pour un service de données pourrait être définit comme constante mais il serait mieux de lire cette valeur par appel à un web service. + *Pourquoi ?* : Une valeur qui peut changer, même rarement, devrait être récupérée d'un service afin de ne pas avoir à changer le code source. Par exemple, une URL pour un service de données pourrait être définie comme constante mais il serait mieux de lire cette valeur par appel à un web service. - *Pourquoi ?* : Les constantes peuvent être injectées dans un composant angular, y compris les providers. + *Pourquoi ?* : Les constantes peuvent être injectées dans un composant Angular, y compris les *providers*. - *Pourquoi ?* : Quand une application est divisée en modules qui peuvent être ré-utilisés dans d'autres applications, chacun de ces modules individiuel devrait pouvoir fonctioner tout seul, y compris avec les constantes dépendantes. + *Pourquoi ?* : Quand une application est divisée en modules qui peuvent être ré-utilisés dans d'autres applications, chacun de ces modules individuels devrait pouvoir fonctionner tout seul, y compris avec les constantes dépendantes. ```javascript // Constantes utilisées par toute l'appli From 5b696ad683fa04c7bdb2a3b0af1056c3c4d155ea Mon Sep 17 00:00:00 2001 From: Wolverine Date: Wed, 19 Aug 2015 10:35:12 +0800 Subject: [PATCH 070/248] Update zh-CN.md Use an absolute URL. --- i18n/zh-CN.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/i18n/zh-CN.md b/i18n/zh-CN.md index 241855c3..57da4898 100644 --- a/i18n/zh-CN.md +++ b/i18n/zh-CN.md @@ -2819,7 +2819,7 @@ Angular社区是一个热衷于分享经验的令人难以置信的社区，尽 - 你可以把它们导入到WebStorm设置中: - - 下载[WebStorm Angular file templates and snippets](assets/webstorm-angular-file-template.settings.jar?raw=true) + - 下载[WebStorm Angular file templates and snippets](https://github.com/johnpapa/angular-styleguide/blob/master/assets/webstorm-angular-file-template.settings.jar?raw=true) - 打开WebStorm点击`File`菜单 - 选择`Import Settings`菜单选项 - 选择文件点击`OK` From 41ca7aed99cc03011c40bfadab249eddf3fcc34d Mon Sep 17 00:00:00 2001 From: Xavier Haniquaut Date: Wed, 19 Aug 2015 09:37:14 +0200 Subject: [PATCH 071/248] [fr-FR] Refresh french translation : Templates / Snippets --- i18n/fr-FR.md | 106 +++++++++++++++++++++++++++++++++++++++++++------- 1 file changed, 91 insertions(+), 15 deletions(-) diff --git a/i18n/fr-FR.md b/i18n/fr-FR.md index f68a501f..dfd90db9 100644 --- a/i18n/fr-FR.md +++ b/i18n/fr-FR.md @@ -2862,44 +2862,46 @@ Les tests unitaires aident à maintenir un code source propre, ainsi j'ai inclut **[Retour en haut de page](#table-des-matières)** -## Templates de Fichiers et Fragments -Utilisez des templates de fichier ou des fragments pour vous aider à suivre des styles et des patterns cohérents. Voici des templates et/ou fragments pour quelques uns des éditeurs de texte pour le développement web et EDIs. +## Modèles de fichiers et *snippets* +Utilisez des *templates* de fichiers ou des *snippets* pour vous aider à suivre des styles et des *patterns* cohérents. Voici des *templates* et/ou *snippets* pour quelques uns des éditeurs de texte pour le développement web et EDIs. ### Sublime Text ###### [Style [Y250](#style-y250)] - - Fragments Angular qui suivent ces styles et règles. + - *Snippets* Angular conformes avec ces styles et règles. - - Téléchargez les [Fragments Angular pour Sublime](assets/sublime-angular-snippets.zip?raw=true) - - Placez-les dans votre répertoire Package + - Téléchargez les [Snippets Angular pour Sublime](assets/sublime-angular-snippets.zip?raw=true) + - Placez-les dans votre répertoire `Package` - Redémarrez Sublime - Dans un fichier de type JavaScript, tapez ces commandes suivies par la touche `TAB` ```javascript - ngcontroller // crée un contrôleur Angular - ngdirective // crée une directive Angular - ngfactory // crée une factory Angular - ngmodule // crée un module Angular + ngcontroller // creates an Angular controller + ngdirective // creates an Angular directive + ngfactory // creates an Angular factory + ngmodule // creates an Angular module + ngservice // creates an Angular service + ngfilter // creates an Angular filter ``` ### Visual Studio ###### [Style [Y251](#style-y251)] - - Les templates de fichier qui suivent ces styles et règles peuvent être trouvées sur [SideWaffle](http://www.sidewaffle.com) + - Les *templates* de fichiers qui suivent ces styles et règles peuvent être trouvées sur [SideWaffle](http://www.sidewaffle.com) - Téléchargez l'extension [SideWaffle](http://www.sidewaffle.com) pour Visual Studio (fichier vsix) - - Éxécutez le fichier vsix + - Exécutez le fichier vsix - Re-démarrez Visual Studio ### WebStorm ###### [Style [Y252](#style-y252)] - - Les fragments Angular et templates de fichiers qui suivent le style et les règles. Vous pouvez les importer dans les paramètres de WebStorm : + - Vous pouvez importer dans les paramètres de WebStormLes les *templates* de fichiers et les *snippets* Angular qui suivent ces styles et ces règles : - - Téléchargez les [templates de fichier et fragments WebStorm pour Angular](assets/webstorm-angular-file-template.settings.jar?raw=true) + - Téléchargez les [*templates* de fichiers et *snippets* WebStorm pour Angular](assets/webstorm-angular-file-template.settings.jar?raw=true) - Ouvrez WebStorm et allez dans le menu `File` - Choisissez le menu `Import Settings` - - Sélectionnez le fichier et clickez sur `OK` + - Sélectionnez le fichier et cliquez sur `OK` - Dans un fichier de type JavaScript, tapez ces commandes suivies de la touche `TAB` : ```javascript @@ -2908,7 +2910,81 @@ Utilisez des templates de fichier ou des fragments pour vous aider à suivre des ng-m // crée un module Angular ``` - **[Retour en haut de page](#table-des-matières)** +### Atom +###### [Style [Y253](#style-y253)] + + - *Snippets* Angular qui suivent ces styles et ces règles. + ``` + apm install angularjs-styleguide-snippets + ``` + or + - Ouvrez Atom puis son *package manager* (Packages -> Settings View -> Install Packages/Themes) + - Cherchez le *package* 'angularjs-styleguide-snippets' + - Cliquez sur 'Install' pour installer le *package* + + - Dans un fichier JavaScript tapez ces commandes suivies de `TAB` : + + ```javascript + ngcontroller // Crée un contrôleur Angular + ngdirective // Crée une directive Angular + ngfactory // Crée une factory Angular + ngmodule // Crée un module Angular + ngservice // Crée un service Angular + ngfilter // Crée un filter Angular + ``` + +### Brackets +###### [Style [Y254](#style-y254)] + + - *Snippets* Angular qui suivent ces styles et ces règles. + - Téléchargez les [*snippets* Angular pour Brackets](assets/brackets-angular-snippets.yaml?raw=true). + - Brackets Extension manager ( File > Extension manager ) + - Installez ['Brackets Snippets (by edc)'](https://github.com/chuyik/brackets-snippets). + - Cliquez sur l'ampoule dans la marge droite de Brackets. + - Cliquez sur `Settings` puis sur `Import` + - Choisissez le fichier et sélectionnez `skip`ou `override`. + - Cliquez sur `Start Import` + + - Dans un fichier JavaScript tapez ces commandes suivies de `TAB` : + + ```javascript + // Snippets de fichiers complets avec IIFE + ngcontroller // Crée un controller Angular + ngdirective // Crée une directive Angular + ngfactory // Crée une factory Angular + ngapp // Crée un module Angular + ngservice // Crée un service Angular + ngfilter // Crée un filter Angular + + // Snippets à chaîner + ngmodule // Crée an Angular module getter + ngstate // Crée an Angular UI Router state définition + ngconfig // Définit une fonction de configuration + ngrun // Définit une fonction run + ngroute // Définit une clause `when` pour ngRoute + ngtranslate // Utilise le service `$translate` avec sa promise + ``` + +### vim +###### [Style [Y255](#style-y255)] + + - *Snippets* pour vim qui suivent ces styles et ces règles. + + - Téléchargez les [*snippets* vim pour Angular](assets/vim-angular-snippets?raw=true) + - Réglez [neosnippet.vim](https://github.com/Shougo/neosnippet.vim) + - Copiez les *snippets* dans le répertoire approprié. + + ```javascript + ngcontroller // Crée un contrôleur Angular + ngdirective // Crée une directive Angular + ngfactory // Crée une factory Angular + ngmodule // Crée un module Angular + ngservice // Crée un service Angular + ngfilter // Crée un filter Angular + ``` + + +**[Retour en haut de page](#table-des-matières)** ## Generateur Yeoman ###### [Style [Y260](#style-y260)] From e9678ebe09c7a74da7fdde06a0c25702c0c99352 Mon Sep 17 00:00:00 2001 From: Xavier Haniquaut Date: Wed, 19 Aug 2015 09:40:47 +0200 Subject: [PATCH 072/248] [fr-FR] Refresh french translation : Yeoman --- i18n/fr-FR.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/i18n/fr-FR.md b/i18n/fr-FR.md index dfd90db9..dd76b545 100644 --- a/i18n/fr-FR.md +++ b/i18n/fr-FR.md @@ -2986,12 +2986,12 @@ Utilisez des *templates* de fichiers ou des *snippets* pour vous aider à suivre **[Retour en haut de page](#table-des-matières)** -## Generateur Yeoman +## Générateur Yeoman ###### [Style [Y260](#style-y260)] -Vous pouvez utiliser le [générateur yeoman HotTowel](http://jpapa.me/yohottowel) pour créer une appli pour démarrer avec Angular en suivant ce guide de style. +Vous pouvez utiliser le [générateur Yeoman HotTowel](http://jpapa.me/yohottowel) pour créer une application Angular qui servira de point de départ et qui suis cette charte stylistique. -1. Installer generator-hottowel +1. Installer `generator-hottowel` ``` npm install -g generator-hottowel @@ -3004,7 +3004,7 @@ Vous pouvez utiliser le [générateur yeoman HotTowel](http://jpapa.me/yohottowe cd myapp ``` -3. Éxécuter le générateur +3. Exécuter le générateur ``` yo hottowel helloWorld From 5044245aefc65070d1b4675cbf8ad787240a7a2b Mon Sep 17 00:00:00 2001 From: Xavier Haniquaut Date: Wed, 19 Aug 2015 09:51:59 +0200 Subject: [PATCH 073/248] [fr-FR] Refresh french translation : Routing --- i18n/fr-FR.md | 84 ++++++++++++++++++++++++++++++++++++++++++++++----- 1 file changed, 77 insertions(+), 7 deletions(-) diff --git a/i18n/fr-FR.md b/i18n/fr-FR.md index dd76b545..c81c7f1f 100644 --- a/i18n/fr-FR.md +++ b/i18n/fr-FR.md @@ -3013,25 +3013,95 @@ Vous pouvez utiliser le [générateur Yeoman HotTowel](http://jpapa.me/yohottowe **[Retour en haut de page](#table-des-matières)** ## Routage -Le routage côté client est important pour créer un flux de navigation entre les vues et la composition des vues constituées de nombreux plus petits templates et directives. +Le routage côté client est important pour créer un flux de navigation entre les vues et composer des vues constituées de nombreux *templates* et directives de plus petites tailles. ###### [Style [Y270](#style-y270)] - - Utilisez [Routeur AngularUI](http://angular-ui.github.io/ui-router/) pour faire le routage côté client. + - Utilisez le [routeur d'AngularUI](http://angular-ui.github.io/ui-router/) pour faire le routage côté client. - *Pourquoi ?* : UI Router offre toutes les fonctionnalités du routeur Angular plus quelques autres parmis lesquels les routes imbriquées et les états. + *Pourquoi ?* : `ui-router` offre toutes les fonctionnalités du routeur d'Angular et en ajoute quelques unes parmi lesquelles les routes imbriquées et les états. - *Pourquoi ?* : La syntaxe est quasiement similaire au routeur Angular et il est facile de migrer à UI Router. + *Pourquoi ?* : La syntaxe est similaire à celle du routeur Angular par défaut et il est facile de migrer vers `ui-router`. + + - Note: Vous pouvez utiliser un *provider* tel que `routerHelperProvider` montré ci-dessous pour vous aidez à configurer les états à travers les fichiers pendant la phase de `run`. + + ```javascript + // customers.routes.js + angular + .module('app.customers') + .run(appRun); + + /* @ngInject */ + function appRun(routerHelper) { + routerHelper.configureStates(getStates()); + } + + function getStates() { + return [ + { + state: 'customer', + config: { + abstract: true, + template: '', + url: '/customer' + } + } + ]; + } + ``` + + ```javascript + // routerHelperProvider.js + angular + .module('blocks.router') + .provider('routerHelper', routerHelperProvider); + + routerHelperProvider.$inject = ['$locationProvider', '$stateProvider', '$urlRouterProvider']; + /* @ngInject */ + function routerHelperProvider($locationProvider, $stateProvider, $urlRouterProvider) { + /* jshint validthis:true */ + this.$get = RouterHelper; + + $locationProvider.html5Mode(true); + + RouterHelper.$inject = ['$state']; + /* @ngInject */ + function RouterHelper($state) { + var hasOtherwise = false; + + var service = { + configureStates: configureStates, + getStates: getStates + }; + + return service; + + /////////////// + + function configureStates(states, otherwisePath) { + states.forEach(function(state) { + $stateProvider.state(state.state, state.config); + }); + if (otherwisePath && !hasOtherwise) { + hasOtherwise = true; + $urlRouterProvider.otherwise(otherwisePath); + } + } + + function getStates() { return $state.get(); } + } + } + ``` ###### [Style [Y271](#style-y271)] - Définissez les routes pour les vues d'un module à l'endroit où elles existent. Chaque module devrait contenir le routage de ses vues. - *Pourquoi ?* : Chaque module devrait avoir la cohérence de définir ses propres routes. + *Pourquoi ?* : Chaque module devrait être indépendant. - *Pourquoi ?* : Si on ajoute ou enlève un module, on souhaite que l'appli ne contienne que les routes vers des vues existantes. + *Pourquoi ?* : Si on ajoute ou enlève un module, on souhaite que l'application ne contienne que des routes qui aboutissent sur des vues existantes. - *Pourquoi ?* : Cela rend facile l'activation ou la désactivation de portions de l'application sans se préoccuper des routes orphelines. + *Pourquoi ?* : Cela rend facile l'activation ou la désactivation de portions de l'application sans se préoccuper d'avoir des routes orphelines. **[Retour en haut de page](#table-des-matières)** From 573476758972454d05bb600549e459d350ba6372 Mon Sep 17 00:00:00 2001 From: Xavier Haniquaut Date: Wed, 19 Aug 2015 09:57:40 +0200 Subject: [PATCH 074/248] [fr-FR] Refresh french translation : Task Automation --- i18n/fr-FR.md | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/i18n/fr-FR.md b/i18n/fr-FR.md index c81c7f1f..eaa4415f 100644 --- a/i18n/fr-FR.md +++ b/i18n/fr-FR.md @@ -3106,18 +3106,17 @@ Le routage côté client est important pour créer un flux de navigation entre l **[Retour en haut de page](#table-des-matières)** ## Automatisation des Tâches -Utilisez [Gulp](http://gulpjs.com) ou [Grunt](http://gruntjs.com) pour créer des tâches automatisées. Gulp favorise le code plutôt que la configuration tandis que Grunt tend vers la configuration plutôt que le code. Je préfère personnellement Gulp car il me semble plus facile à lire et écrire, mais les deux sont excellents. +Utilisez [Gulp](http://gulpjs.com) ou [Grunt](http://gruntjs.com) pour créer des tâches automatisées. Gulp favorise le code plutôt que la configuration tandis que Grunt tend vers la configuration plutôt que le code. À titre personnel je préfère Gulp car il me semble plus facile à lire et écrire, mais les deux sont excellents. -> Learn more about gulp and patterns for task automation in my [Gulp Pluralsight course(http://jpapa.me/gulpps) -> Vous pouvez en lire plus sur Gulp et ses patterns pour l'automatisation des taches dans mon cours sur [Pluralsight](http://jpapa.me/gulpps). +> Apprenez-en plus sur Gulp et les *patterns* pour l'automatisation en allant voir [mon cours sur Pluralsight](http://jpapa.me/gulpps) ###### [Style [Y400](#style-y400)] - Utilisez l'automatisation des tâches pour lister les fichiers de définition de module `*.module.js` avant tout autre fichier JavaScript de l'application. - *Pourquoi ?* : Angular a besoin que la définition des modules soit déclarée avant qu'ils puissent être utilisés. + *Pourquoi ?* : Angular a besoin que la définition des modules soit faire avant qu'ils puissent être utilisés. - *Pourquoi ?* : Nommer les modules avec un pattern spécifique tel que `*.module.js` les rends faciles à aller chercher avec une expression englobante et à les lister en premier. + *Pourquoi ?* : Nommer les modules avec un pattern spécifique tel que `*.module.js` les rends faciles à aller chercher avec une expression régulière et à les lister. ```javascript var clientApp = './src/client/app/'; From 8ddddb300d2b7b409d70c2c66c18f6cb81e5f482 Mon Sep 17 00:00:00 2001 From: Xavier Haniquaut Date: Wed, 19 Aug 2015 10:01:24 +0200 Subject: [PATCH 075/248] [fr-FR] Refresh french translation : Filters / Docs --- i18n/fr-FR.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/i18n/fr-FR.md b/i18n/fr-FR.md index eaa4415f..e66f3dd6 100644 --- a/i18n/fr-FR.md +++ b/i18n/fr-FR.md @@ -3134,14 +3134,14 @@ Utilisez [Gulp](http://gulpjs.com) ou [Grunt](http://gruntjs.com) pour créer de ###### [Style [Y420](#style-y420)] - - Évitez d'utiliser les filtres pour scanner toutes les propriété de l'arborescence d'un objet complexe. Utilisez les filtres pour sélectionner des propriétés. + - Évitez d'utiliser les filtres pour scanner toutes les propriétés de l'arborescence d'un objet complexe. Utilisez les filtres pour sélectionner des propriétés. - *Pourquoi ?*: les filtres peuvent être surutilisés et peuvent avoir des effets négatifs sur les performances s'ils ne sont pas utilisés de façon appropriée. Par exemple, quand un filtre touche un gros objet dont l'arborescence est profonde. + *Pourquoi ?*: les filtres peuvent être sur-utilisés et peuvent avoir des effets négatifs sur les performances s'ils ne sont pas utilisés de façon appropriée. Par exemple, quand un filtre touche un gros objet dont l'arborescence est profonde. **[Back to top](#table-of-contents)** -## Documentation Angular -Pour tout le reste, la référence des API, allez voir la [documentation Angular](//docs.angularjs.org/api). +## Documentation +Pour tout le reste, allez voir la [documentation de l'API d'Angular](//docs.angularjs.org/api). ## Contribuer From b974784401baf152ec5eff4b770fc2ee80eee466 Mon Sep 17 00:00:00 2001 From: Xavier Haniquaut Date: Wed, 19 Aug 2015 10:10:09 +0200 Subject: [PATCH 076/248] [fr-FR] Refresh french translation : End --- i18n/fr-FR.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/i18n/fr-FR.md b/i18n/fr-FR.md index e66f3dd6..1093d36e 100644 --- a/i18n/fr-FR.md +++ b/i18n/fr-FR.md @@ -3145,18 +3145,18 @@ Pour tout le reste, allez voir la [documentation de l'API d'Angular](//docs.angu ## Contribuer -Créez d'abord un problème pour discuter de potentiels changements ou ajouts. Si vous avez des questions sur le guide, je vous encourage à les rapporter comme problèmes dans le référentiel. Si vous trouvez une erreur de frappe, créez une pull request. L'idée est de garder le contenu à jour et d'utiliser les fonctionnalités natives de github pour aider à raporter les problèmes et les pull requests, lesquels sont recherchables via google. Pourquoi ? Parce que d'autres pourraient avoir la même question ! Vous en apprendrez plus ci-dessous pour savoir comment contribuer. +Créez d'abord une *issue* pour discuter de potentiels changements ou ajouts à faire. Si vous avez des questions sur le guide, je vous encourage à les soumettre en temps qu'*issues*. Si vous trouvez des erreurs de frappe, créez une *pull request*. L'idée est de garder le contenu à jour et d'utiliser les fonctionnalités natives de Github pour aider à retracer l'évolution de ce dernier via les *issues* et les *pull requests*, lesquels sont indexées par Google. Pourquoi ? Parce que si vous vous posez une question, il y a des chances que quelqu'un d'autre se la soit posé ! Vous en apprendrez plus ci-dessous pour savoir comment contribuer. -*En contribuant à ce référentiel, vous acceptez de rendre votre contenu accessible le sujet de la licence de ce référentiel.* +*En contribuant à ce dépôt, vous acceptez de rendre votre contenu accessible en accord avec la licence du dépôt.* ### Processus - 1. Discuter des changements dans une Issue GitHub. - 2. Ouvrir une Pull Request sur la branche develop, référencer l'Issue, et expliquer le changement et la raison pour laquelle ce changement est pertinent. - 3. La Pull Request sera évaluée et soit mergée ou abandonnée. + 1. Discuter des changements dans une *issue* GitHub. + 2. Ouvrir une *pull request* sur la branche `develop`, référencer l'*issue*, et expliquer le changement et la raison pour laquelle ce changement est pertinent. + 3. La *pull request* sera évaluée et *mergée* ou refusée. ## License -_tldr; Utilisez ce guide. Les attributions sont appréciées._ +en bref; Utilisez ce guide. Les attributions sont appréciées._ ### Copyright From 24294b5bfaaa39e185e604e80ce18bf66612a15a Mon Sep 17 00:00:00 2001 From: Xavier Haniquaut Date: Wed, 19 Aug 2015 10:14:34 +0200 Subject: [PATCH 077/248] [fr-FR] Refresh french translation : Readding translators --- i18n/fr-FR.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/i18n/fr-FR.md b/i18n/fr-FR.md index 1093d36e..3a555ca9 100644 --- a/i18n/fr-FR.md +++ b/i18n/fr-FR.md @@ -2,6 +2,8 @@ *Guide de style par subjectif pour Angular par [@john_papa](//twitter.com/john_papa)* +*Traduit par [Eric Lemerdy](https://github.com/ericlemerdy) et [Xavier Haniquaut](https://github.com/xavhan)* + Si vous cherchez un guide de style pour la syntaxe, les conventions, et la structuration d'applications Angular, alors vous êtes au bon endroit. Ces styles sont basés sur mon expérience de développement avec [Angular](//angularjs.org), mes présentations, [mes cours sur Pluralsight](http://pluralsight.com/training/Authors/Details/john-papa) et mon travail au sein de diverses équipes. Le but de ce guide de style est de proposer des conseils sur le développement d'applications Angular en exposant les conventions que j'utilise et plus important encore, pourquoi je les ai choisies. From 5fc820663746ff2ef110d0cad680eb3aa84d1cce Mon Sep 17 00:00:00 2001 From: vinicius-sabadim Date: Wed, 19 Aug 2015 15:23:55 -0300 Subject: [PATCH 078/248] Translate for the topic 'Modularity' in PT-BR --- i18n/PT-BR.md | 48 ++++++++++++++++++++++++++++++------------------ 1 file changed, 30 insertions(+), 18 deletions(-) diff --git a/i18n/PT-BR.md b/i18n/PT-BR.md index ce166365..1d8bff0b 100644 --- a/i18n/PT-BR.md +++ b/i18n/PT-BR.md @@ -2074,56 +2074,68 @@ ou *Estrutura de Pastas-por-Recurso* **[De volta ao topo](#tabela-de-conte%C3%BAdo)** ## Modularity +ou *Modularidade* ### Many Small, Self Contained Modules +ou *Muitos módulos pequenos e independentes* - - Create small modules that encapsulate one responsibility. + - Crie pequenos módulos que encapsulem uma única responsabilidade. - *Why?*: Modular applications make it easy to plug and go as they allow the development teams to build vertical slices of the applications and roll out incrementally. This means we can plug in new features as we develop them. + **Por que?**: Aplicações modulares tornam fácil o acoplamento, pois permitem que as equipes de desenvolvimento construam fatias verticais das aplicações e juntem tudo de forma incremental. Isto significa que podemos acoplar novos recursos enquanto os desenvolvemos. ### Create an App Module +ou *Crie um módulo da aplicação* - - Create an application root module whose role is pull together all of the modules and features of your application. Name this for your application. +- Crie um módulo raiz para a aplicação, cujo papel é: reunir todos os outros módulos e funcionalidades da sua aplicação. Nomeie ele de acordo com a sua aplicação. - *Why?*: Angular encourages modularity and separation patterns. Creating an application root module whose role is to tie your other modules together provides a very straightforward way to add or remove modules from your application. + **Por que?**: Angular incentiva padrões de modularidade e de separação. Criando um módulo raiz da aplicação cujo papel é o de amarrar os outros módulos juntos, fica muito simples de adicionar ou remover módulos na sua aplicação. ### Keep the App Module Thin +ou *Matenha o módulo da aplicação leve* - - Only put logic for pulling together the app in the application module. Leave features in their own modules. + - Somente coloque a lógica para reunir o aplicativo no módulo da aplicação. Deixe os recursos em seus próprios módulos. *Why?*: Adding additional roles to the application root to get remote data, display views, or other logic not related to pulling the app together muddies the app module and make both sets of features harder to reuse or turn off. + **Por que?**: Colocar funções adicionais na raiz da aplicação para obter dados remoto, modos de exibição, ou outra lógica não relacionada com o acoplamento do aplicativo, torna mais difícil reutilizar os recursos ou mesmo, desligá-los. + + **Por que?**: O módulo da aplicação torna-se um manifesto que descreve os módulos que ajudam a definir a aplicação. ### Feature Areas are Modules +ou *Áreas de recursos são módulos* - - Create modules that represent feature areas, such as layout, reusable and shared services, dashboards, and app specific features (e.g. customers, admin, sales). + - Crie módulos que representem áreas de recursos, como: layout, serviços compartilhados e reutilizados, dashboards e recursos específicos do aplicativo (por exemplo, clientes, administrativo, vendas). - *Why?*: Self contained modules can be added to the application will little or no friction. + **Por que?**: Módulos independentes podem ser adicionados na aplicação com pouco ou nenhum esforço. - *Why?*: Sprints or iterations can focus on feature areas and turn them on at the end of the sprint or iteration. + **Por que?**: Sprints ou iterações podem focar em áreas de recursos e acoplá-los na aplicação ao fim da sprint ou iteração. - *Why?*: Separating feature areas into modules makes it easier to test the modules in isolation and reuse code. + **Por que²**: Separando as áreas de recursos em módulos, fica fácil de testar os módulos em isolamento e de reutilizar o código. ### Reusable Blocks are Modules +ou *Blocos reutilizáveis são módulos* - - Create modules that represent reusable application blocks for common services such as exception handling, logging, diagnostics, security, and local data stashing. +- Crie módulos que representam blocos reutilizáveis da aplicação para serviços comuns, como: tratamento de exceção, log, diagnósticos, segurança e armazenamento local. - *Why?*: These types of features are needed in many applications, so by keeping them separated in their own modules they can be application generic and be reused across applications. + **Por que?**: Esses tipos de recursos são necessários em muitas aplicações, então mantê-los separados em seus próprios módulos os torna genéricos e assim, podem ser reutilizados em diferentes aplicações. ### Module Dependencies +ou *Dependências do módulo* + + - O módulo raiz da aplicação depende de módulos de recursos específicos do aplicativo e de qualquer módulo compartilhado ou reutilizado. - - The application root module depends on the app specific feature modules, the feature modules have no direct dependencies, the cross-application modules depend on all generic modules. + ![Moduluaridade e Dependências](https://raw.githubusercontent.com/johnpapa/angular-styleguide/master/assets/modularity-1.png) - ![Modularity and Dependencies](https://raw.githubusercontent.com/johnpapa/angularjs-styleguide/master/assets/modularity-1.png) + **Por que?**: O módulo principal do aplicativo contém um rápido manifesto para identificar os recursos da aplicação. - *Why?*: The main app module contains a quickly identifiable manifest of the application's features. + **Por que?**: Cada área de recurso contém um manifesto mostrando as suas dependências, assim, ela pode ser colocada como uma dependência em outras aplicação e ainda continuar funcionando. - *Why?*: Cross application features become easier to share. The features generally all rely on the same cross application modules, which are consolidated in a single module (`app.core` in the image). + **Por que?**: Recursos intra-aplicação como serviços compartilhados de dados, tornam-se muito mais fácil de localizar e compartilhar atráves do `app.core` (escolha o seu nome favorito para esse módulo). - *Why?*: Intra-App features such as shared data services become easy to locate and share from within `app.core` (choose your favorite name for this module). + Nota: Essa é uma estratégia para consistência. Existem muitas outras boas opções. Escolha uma que seja consistente, que siga as regras de dependência do Angular, e que seja fácil de manter e escalar. - Note: This is a strategy for consistency. There are many good options here. Choose one that is consistent, follows AngularJS's dependency rules, and is easy to maintain and scale. + > As minhas estruturas podem variar ligeiramente entre os projetos, mas todas elas seguem estas diretrizes para estrutura e modularidade. A implementação pode variar dependendo dos recursos e do time. Em outras palavras, não fique preso somente a uma estrutura mas justifique sua estrutura usando consistência, facilidade de manutenção e eficiência em mente. - > My structures vary slightly between projects but they all follow these guidelines for structure and modularity. The implementation may vary depending on the features and the team. In other words, don't get hung up on an exact like-for-like structure but do justify your structure using consistency, maintainability, and efficiency in mind. + > Em um aplicativo pequeno, você também pode considerar colocar todas as dependẽncias compartilhadas no módulo principal do aplicativo, onde os módulos de recursos não tem dependências diretas. Isso torna mais fácil de manter a aplicação, mas torna mais difícil de reutilizar os módulos fora dessa aplicação. **[De volta ao topo](#tabela-de-conte%C3%BAdo)** From 8d1ac33bc022af5cb6ae272befd1340a0675069d Mon Sep 17 00:00:00 2001 From: vinicius-sabadim Date: Wed, 19 Aug 2015 15:24:50 -0300 Subject: [PATCH 079/248] Fix typo --- i18n/PT-BR.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/i18n/PT-BR.md b/i18n/PT-BR.md index 1d8bff0b..cd92098a 100644 --- a/i18n/PT-BR.md +++ b/i18n/PT-BR.md @@ -2091,7 +2091,7 @@ ou *Crie um módulo da aplicação* **Por que?**: Angular incentiva padrões de modularidade e de separação. Criando um módulo raiz da aplicação cujo papel é o de amarrar os outros módulos juntos, fica muito simples de adicionar ou remover módulos na sua aplicação. ### Keep the App Module Thin -ou *Matenha o módulo da aplicação leve* +ou *Mantenha o módulo da aplicação leve* - Somente coloque a lógica para reunir o aplicativo no módulo da aplicação. Deixe os recursos em seus próprios módulos. From 92c7a8d5828aa991b8c3caaaa57d35fee53b671e Mon Sep 17 00:00:00 2001 From: zach_lysobey Date: Wed, 19 Aug 2015 18:12:53 -0400 Subject: [PATCH 080/248] Remove extra spaces from sublime template Sublime directive template had extra space between function namess and parens --- .../angular.directive.sublime-snippet | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/assets/sublime-angular-snippets/angular.directive.sublime-snippet b/assets/sublime-angular-snippets/angular.directive.sublime-snippet index 4c1c91bf..a4bbd6a2 100644 --- a/assets/sublime-angular-snippets/angular.directive.sublime-snippet +++ b/assets/sublime-angular-snippets/angular.directive.sublime-snippet @@ -9,7 +9,7 @@ ${2:directive}.\$inject = [${3/(\$(\w+)|\w+)/'$1'/g}]; /* @ngInject */ - function ${2:directive} (${3:dependencies}) { + function ${2:directive}(${3:dependencies}) { // Usage: // // Creates: @@ -30,7 +30,7 @@ } /* @ngInject */ - function ${4:Controller} () { + function ${4:Controller}() { } })(); From eab1808500c72664941948647ce81ba1762c8b82 Mon Sep 17 00:00:00 2001 From: Xavier Haniquaut Date: Thu, 20 Aug 2015 10:04:23 +0200 Subject: [PATCH 081/248] Fixes after @ericlemerdy comments --- i18n/fr-FR.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/i18n/fr-FR.md b/i18n/fr-FR.md index 3a555ca9..0e5eeaed 100644 --- a/i18n/fr-FR.md +++ b/i18n/fr-FR.md @@ -1,6 +1,6 @@ # Charte stylistique Angular -*Guide de style par subjectif pour Angular par [@john_papa](//twitter.com/john_papa)* +*Guide de style subjectif pour Angular par [@john_papa](//twitter.com/john_papa)* *Traduit par [Eric Lemerdy](https://github.com/ericlemerdy) et [Xavier Haniquaut](https://github.com/xavhan)* @@ -172,7 +172,7 @@ Bien que ce guide explique le *quoi*, le *pourquoi* et le *comment*, il m'est ut })(); ``` - - Note : Pour des raisons de concision seulement, le reste des exemples de ce guide seront pas écrits avec la syntaxe IIFE. + - Note : Pour des raisons de concision seulement, le reste des exemples de ce guide ne seront pas écrits avec la syntaxe IIFE. - Note : Les IIFE empêchent le code de test d'atteindre des membres privés, comme les expressions régulières ou les fonctions utilitaires (*helpers*), qu'il est souvent meilleur de tester indépendamment. Cependant, vous pouvez les tester à travers les membres accessibles ou en les exposant à travers leur propre composant. Par exemple en les plaçant dans leur propre factory ou constante. From 8f72dee392129bdeb01c043fae7d295fc83e1a38 Mon Sep 17 00:00:00 2001 From: Xavier Haniquaut Date: Thu, 20 Aug 2015 10:19:06 +0200 Subject: [PATCH 082/248] Makes lines match All credits for the translators are now on the i18n/README.md Their is a lot of work in some translation to keep it updated. --- i18n/PT-BR.md | 308 ++++++++++++++++++++--------------------- i18n/README.md | 29 ++-- i18n/de-DE.md | 52 ++++--- i18n/es-ES.md | 4 - i18n/fr-FR.md | 2 - i18n/it-IT.md | 368 ++++++++++++++++++++++++------------------------- i18n/ja-JP.md | 18 ++- i18n/mk-MK.md | 318 +++++++++++++++++++++--------------------- i18n/ru-RU.md | 279 +++++++++++++++++++------------------ i18n/zh-CN.md | 288 +++++++++++++++++++------------------- 10 files changed, 818 insertions(+), 848 deletions(-) diff --git a/i18n/PT-BR.md b/i18n/PT-BR.md index cd92098a..926c9764 100644 --- a/i18n/PT-BR.md +++ b/i18n/PT-BR.md @@ -2,11 +2,9 @@ *Guia de Estilo opinativo de Angular para times. Por [@john_papa](//twitter.com/john_papa)* -*Traduzido por [Eric Douglas](https://github.com/ericdouglas), [Ciro Nunes](https://github.com/cironunes), [Jean Lucas de Carvalho](https://github.com/jlcarvalho) e [Vinicius Sabadim Fernandes](https://github.com/vinicius-sabadim)* +Se você procura por um guia de estilo opinativo para sintaxe, convenções e estruturação de aplicações AngularJS, então siga em frente! Estes estilos são baseados em minha experiência com desenvolvimento com [AngularJS](//angularjs.org), apresentações, [cursos de treinamento na Pluralsight](http://pluralsight.com/training/Authors/Details/john-papa) e trabalhando em equipe. ->The [original English version](http://jpapa.me/ngstyles) is the source of truth, as it is maintained and updated first. -Se você procura por um guia de estilo opinativo para sintaxe, convenções e estruturação de aplicações AngularJS, então siga em frente! Estes estilos são baseados em minha experiência com desenvolvimento com [AngularJS](//angularjs.org), apresentações, [cursos de treinamento na Pluralsight](http://pluralsight.com/training/Authors/Details/john-papa) e trabalhando em equipe. > Se você gostar deste guia, confira meu curso [Angular Patterns: Clean Code](http://jpapa.me/ngclean) na Pluralsight. @@ -22,11 +20,11 @@ Vários de meus estilos vieram de várias sessões de pair-programming (programa Embora este guia explique o **o quê**, **porque** e **como**, acho útil ver tudo isso em prática. Este guia é acompanhado de uma aplicação de exemplo que segue estes estilos e padrões. Você pode encontrar a [aplicação de exemplo (chamada "modular") aqui](https://github.com/johnpapa/ng-demos) na pasta `modular`. Sinta-se livre para pegá-la, cloná-la e *forká-la*. [Instruções de como rodar o aplicativo estão em seu README](https://github.com/johnpapa/ng-demos/tree/master/modular). -> **Nota de tradução**: Os títulos originais de cada seção serão mantidos, pois caso você queira buscar mais sobre estes assuntos futuramente, fazendo tal busca em inglês será obtido um resultado **imensamente** melhor. +> **Nota de tradução**: Os títulos originais de cada seção serão mantidos, pois caso você queira buscar mais sobre estes assuntos futuramente, fazendo tal busca em inglês será obtido um resultado **imensamente** melhor. > > Após o título, estará a tradução auxiliar, quando necessária, visto que alguns termos são mais facilmente entendidos quando não traduzidos, por fazerem parte do núcleo do estudo em questão. > -> Para eventuais erros de digitação e/ou tradução, favor enviar um pull-request! +> Para eventuais erros de digitação e/ou tradução, favor enviar um pull-request! ## Tabela de Conteúdo @@ -48,7 +46,7 @@ Embora este guia explique o **o quê**, **porque** e **como**, acho útil ver tu 1. [Modularity](#modularity) 1. [Angular $ Wrapper Services](#angular--wrapper-services) 1. [Testing](#testing) - 1. [Animations](#animations) + 1. [Animations](#animations) 1. [Comments](#comments) 1. [JSHint](#js-hint) 1. [Constants](#constants) @@ -72,7 +70,7 @@ ou *Responsabilidade Única* .module('app', ['ngRoute']) .controller('SomeController' , SomeController) .factory('someFactory' , someFactory); - + function SomeController() { } function someFactory() { } @@ -82,7 +80,7 @@ ou *Responsabilidade Única* ```javascript /* recomendado */ - + // app.module.js angular .module('app', ['ngRoute']); @@ -90,7 +88,7 @@ ou *Responsabilidade Única* ```javascript /* recomendado */ - + // someController.js angular .module('app') @@ -101,12 +99,12 @@ ou *Responsabilidade Única* ```javascript /* recomendado */ - + // someFactory.js angular .module('app') .factory('someFactory' , someFactory); - + function someFactory() { } ``` @@ -140,18 +138,18 @@ ou *Responsabilidade Única* function storage() { } ``` - + ```javascript /** - * recomendado + * recomendado * - * nada global é deixado para trás + * nada global é deixado para trás */ // logger.js (function() { 'use strict'; - + angular .module('app') .factory('logger', logger); @@ -171,9 +169,9 @@ ou *Responsabilidade Única* })(); ``` - - **Nota**: Apenas para agilizar, o resto dos exemplos neste guia omitirão a sintaxe IIFE. + - **Nota**: Apenas para agilizar, o resto dos exemplos neste guia omitirão a sintaxe IIFE. - - **Nota**: IIFE impede que códigos de teste alcancem membros privados como expressões regulares ou funções auxiliares que são frequentemente boas para testes unitários. Entretanto, você pode testá-las através de membros acessíveis ou expondo-os pelo próprio componente. Por exemplo, colocando funções auxiliares, expressões regulares ou constantes em sua própria *factory* ou constante. + - **Nota**: IIFE impede que códigos de teste alcancem membros privados como expressões regulares ou funções auxiliares que são frequentemente boas para testes unitários. Entretanto, você pode testá-las através de membros acessíveis ou expondo-os pelo próprio componente. Por exemplo, colocando funções auxiliares, expressões regulares ou constantes em sua própria *factory* ou constante. **[De volta ao topo](#tabela-de-conte%C3%BAdo)** @@ -185,7 +183,7 @@ ou *Evitando Colisão de Nomes* - Use uma única convenção de nomes com separadores para sub-módulos. - **Por que?** Nomes únicos ajudam a evitar colisão de nomes no módulo. Separadores ajudam a definir a hierarquia de módulos e submódulos. Por exemplo, `app` pode ser seu módulo raiz, enquanto `app.dashboard` e `app.users` podem ser módulos que são usados como dependências de `app`. + **Por que?** Nomes únicos ajudam a evitar colisão de nomes no módulo. Separadores ajudam a definir a hierarquia de módulos e submódulos. Por exemplo, `app` pode ser seu módulo raiz, enquanto `app.dashboard` e `app.users` podem ser módulos que são usados como dependências de `app`. ### Definições (*aka Setters*) @@ -194,7 +192,7 @@ ou *Evitando Colisão de Nomes* - Declare os módulos sem uma variável usando a sintaxe *setter*. **Por que?** Com 1 componente por arquivo, raramente será necessário criar uma variável para o módulo. - + ```javascript /* evite */ var app = angular.module('app', [ @@ -228,7 +226,7 @@ ou *Evitando Colisão de Nomes* /* evite */ var app = angular.module('app'); app.controller('SomeController' , SomeController); - + function SomeController() { } ``` @@ -237,24 +235,24 @@ ou *Evitando Colisão de Nomes* angular .module('app') .controller('SomeController' , SomeController); - + function SomeController() { } ``` -### *Setting* vs *Getting* +### *Setting* vs *Getting* ou *Definindo* vs *Obtendo* - Apenas *set* (configure) uma vez e *get* (receba) em todas as outras instâncias. - - **Por que?** Um módulo deve ser criado somente uma vez, então recupere-o deste ponto em diante. - + + **Por que?** Um módulo deve ser criado somente uma vez, então recupere-o deste ponto em diante. + - Use `angular.module('app', []);` para definir (*set*) um módulo. - - Use `angular.module('app');` para pegar (*get*) este módulo. + - Use `angular.module('app');` para pegar (*get*) este módulo. ### Named vs Anonymous Functions ou *Funções Nomeadas vs Funções Anônimas* - - Use funções nomeadas ao invés de passar uma função anônima como um callback. + - Use funções nomeadas ao invés de passar uma função anônima como um callback. **Por que?** Isso produz um código mais legível, é muito fácil de *debugar*, e reduz a quantidade de callbacks aninhados no código. @@ -293,7 +291,7 @@ ou *Controladores* ### controllerAs View Syntax - - Utilize a sintaxe [`controllerAs`](http://www.johnpapa.net/do-you-like-your-angular-controllers-with-or-without-sugar/) ao invés da sintaxe `clássica controller com $scope`. + - Utilize a sintaxe [`controllerAs`](http://www.johnpapa.net/do-you-like-your-angular-controllers-with-or-without-sugar/) ao invés da sintaxe `clássica controller com $scope`. **Por que?**: Controllers são construídos, "iniciados", e fornecem um nova instância única, e a sintaxe `controllerAs` é mais próxima de um construtor JavaScript do que a `sintaxe clássica do $scope`. @@ -317,11 +315,11 @@ ou *Controladores* ### controllerAs Controller Syntax - - Utilize a sintaxe `controllerAs` ao invés da sintaxe `clássica controller com $scope`. + - Utilize a sintaxe `controllerAs` ao invés da sintaxe `clássica controller com $scope`. - A sintaxe `controllerAs` usa o `this` dentro dos controllers que fica ligado ao `$scope`. - **Por que?**: O `controllerAs` é uma forma mais simples de lidar com o `$scope`. Você ainda poderá fazer o bind para a View e ainda poderá acessar os métodos do `$scope`. + **Por que?**: O `controllerAs` é uma forma mais simples de lidar com o `$scope`. Você ainda poderá fazer o bind para a View e ainda poderá acessar os métodos do `$scope`. **Por que?**: Ajuda a evitar a tentação de usar os métodos do `$scope` dentro de um controller quando seria melhor evitá-los ou movê-los para um factory. Considere utilizar o `$scope` em um factory, ou em um controller apenas quando necessário. Por exemplo, quando publicar e subscrever eventos usando [`$emit`](https://docs.angularjs.org/api/ng/type/$rootScope.Scope#$emit), [`$broadcast`](https://docs.angularjs.org/api/ng/type/$rootScope.Scope#$broadcast), ou [`$on`](https://docs.angularjs.org/api/ng/type/$rootScope.Scope#$on) considere mover estes casos para um factory e invocá-los a partir do controller. @@ -344,7 +342,7 @@ ou *Controladores* ### controllerAs with vm - Utilize uma variável de captura para o `this` quando usar a sintaxe `controllerAs`. Escolha um nome de variável consistente como `vm`, que representa o ViewModel. - + **Por que?**: A palavra-chave `this` é contextual e quando usada em uma função dentro de um controller pode mudar seu contexto. Capturando o contexto do `this` evita a ocorrência deste problema. ```javascript @@ -364,13 +362,13 @@ ou *Controladores* } ``` - Nota: Você pode evitar qualquer [jshint](http://www.jshint.com/) warnings colocando o comentário abaixo acima da linha de código. - + Nota: Você pode evitar qualquer [jshint](http://www.jshint.com/) warnings colocando o comentário abaixo acima da linha de código. + ```javascript /* jshint validthis: true */ var vm = this; ``` - + Nota: Quando watches são criados no controller utilizando o `controller as`, você pode observar o objeto `vm.*` utilizando a seguinte sintaxe. (Crie watches com cuidado pois eles deixam o ciclo de digest mais "carregado".) ```javascript @@ -383,7 +381,7 @@ ou *Controladores* ### Bindable Members Up Top - Coloque os objetos que precisam de bind no início do controller, em ordem alfabética, e não espalhados através do código do controller. - + **Por que?**: Colocar os objetos que precisam de bind no início torna mais fácil de ler e te ajuda a instantaneamente identificar quais objetos do controller podem ser utilizados na View. **Por que?**: Setar funções anônimas pode ser fácil, mas quando essas funções possuem mais de 1 linha do código elas podem dificultar a legibilidade. Definir as funções abaixo dos objetos que necessitam de bind (as funções serão elevadas pelo JavaScript Hoisting) move os detalhes de implementação para o final do controller, mantém os objetos que necessitam de bind no topo, e deixa o código mais fácil de se ler. @@ -443,8 +441,8 @@ ou *Controladores* vm.gotoSession = gotoSession; vm.refresh = function() { - /** - * linhas + /** + * linhas * de * código * afetam @@ -472,20 +470,20 @@ ou *Controladores* ### Function Declarations to Hide Implementation Details - Utilize declarações de funções para esconder detalhes de implementação. Mantenha seus objetos que necessitam de bind no topo. Quando você precisar fazer o bind de uma função no controller, aponte ela para a declaração de função que aparece no final do arquivo. Ela está ligada diretamente aos objetos que precisam de bind no início do arquivo. Para mais detalhes veja [este post](http://www.johnpapa.net/angular-function-declarations-function-expressions-and-readable-code). - + **Por que?**: Colocar os objetos que precisam de bind no início torna mais fácil de ler e te ajuda a instantaneamente identificar quais objetos do controller podem ser utilizados na View. (Mesmo do item anterior.) **Por que?**: Colocar os detalhes de implementação de uma função no final do arquivo coloca a complexidade fora do foco, logo, você pode focar nas coisas importantes no topo. **Por que?**: Declarações de funções são içadas, logo, não existe problema de se utilizar uma função antes dela ser definida (como haveria com expressões de função). - **Por que?**: Você nunca precisará se preocupar com declarações de funções quebrarem seu código por colocar `var a` antes de `var b` por que `a` depende de `b`. + **Por que?**: Você nunca precisará se preocupar com declarações de funções quebrarem seu código por colocar `var a` antes de `var b` por que `a` depende de `b`. **Por que?**: A ordenação é crítica em expressões de função. ```javascript - /** - * evite + /** + * evite * Usar expressões de funções. */ function Avengers(dataservice, logger) { @@ -560,7 +558,7 @@ ou *Controladores* vm.checkCredit = checkCredit; vm.total = 0; - function checkCredit() { + function checkCredit() { var orderTotal = vm.total; return $http.get('api/creditcheck').then(function(data) { var remaining = data.remaining; @@ -577,7 +575,7 @@ ou *Controladores* vm.checkCredit = checkCredit; vm.total = 0; - function checkCredit() { + function checkCredit() { return creditService.check(); }; } @@ -586,14 +584,14 @@ ou *Controladores* ### Keep Controllers Focused - Defina um controller para a view, e tente não reutilizar o controller para outras views. Ao invés disso, coloque as lógicas reaproveitáveis em factories e mantenha o controller simples e focado em sua view. - + **Por que?**: Reutilizar controllers em várias views é arriscado e um boa cobertura de testes end to end (e2e) é obrigatório para se garantir estabilidade em grandes aplicações. ### Assigning Controllers - - Quando um controller deve ser pareado com sua view e algum componente pode ser reutilizado por outros controllers ou views, defina controllers juntamente de suas rotas. - - Nota: Se uma View é carregada de outra forma que não seja através de uma rota, então utilize a sintaxe `ng-controller="Avengers as vm"`. + - Quando um controller deve ser pareado com sua view e algum componente pode ser reutilizado por outros controllers ou views, defina controllers juntamente de suas rotas. + + Nota: Se uma View é carregada de outra forma que não seja através de uma rota, então utilize a sintaxe `ng-controller="Avengers as vm"`. **Por que?**: Parear os controllers nas rotas permite diferentes rotas invocarem diferentes pares de controllers e views. Quando um controller é utilizado na view usando a sintaxe [`ng-controller`](https://docs.angularjs.org/api/ng/directive/ngController), esta view sempre será associada ao mesmo controller. @@ -650,8 +648,8 @@ ou *Serviços* ### Singletons - - Services são instanciados com a palavra-chave `new`, use `this` para métodos públicos e variáveis. Services são bastante similares a factories, use um factory para consistência. - + - Services são instanciados com a palavra-chave `new`, use `this` para métodos públicos e variáveis. Services são bastante similares a factories, use um factory para consistência. + Nota: [Todos services em Angular são singletons](https://docs.angularjs.org/guide/services). Isso significa que há apenas uma instância do serviço para cada injetor. ```javascript @@ -695,15 +693,15 @@ ou *Responsabilidade Única* ### Singletons - Factories são singletons e retornam um objeto que contém os membros do serviço. - + Nota: [Todos services em Angular são singletons](https://docs.angularjs.org/guide/services). ### Accessible Members Up Top ou *Membros acessíveis no topo* - - Exponha os membros que podem ser invocados no serviço (a interface) no topo, utilizando uma técnica derivada do [Revealing Module Pattern](http://addyosmani.com/resources/essentialjsdesignpatterns/book/#revealingmodulepatternjavascript). + - Exponha os membros que podem ser invocados no serviço (a interface) no topo, utilizando uma técnica derivada do [Revealing Module Pattern](http://addyosmani.com/resources/essentialjsdesignpatterns/book/#revealingmodulepatternjavascript). - **Por que?**: Colocando no topo os membros que podem ser invocados da factory, a leitura torna-se mais fácil e ajuda a identificar imediatamente quais membros da factory podem ser invocados e testados através de teste unitário (e/ou mock). + **Por que?**: Colocando no topo os membros que podem ser invocados da factory, a leitura torna-se mais fácil e ajuda a identificar imediatamente quais membros da factory podem ser invocados e testados através de teste unitário (e/ou mock). **Por que?**: É especialmente útil quando o arquivo torna-se muito longo e ajuda a evitar a necessidade de rolagem para ver o que é exposto. @@ -713,10 +711,10 @@ ou *Membros acessíveis no topo* /* evite */ function dataService() { var someValue = ''; - function save() { + function save() { /* */ }; - function validate() { + function validate() { /* */ }; @@ -741,11 +739,11 @@ ou *Membros acessíveis no topo* //////////// - function save() { + function save() { /* */ }; - function validate() { + function validate() { /* */ }; } @@ -766,9 +764,9 @@ ou *Declarações de função para esconder detalhes de implementação* **Por que?**: Function declarations (declarações de função) são içadas (hoisted) para que não hajam preocupações em utilizar uma função antes que ela seja definida (como haveria com function expressions (expressões de função)). - **Por que?**: Você nunca deve se preocupar com function declaration (declarações de função) onde `var a` está antes de `var b` vai ou não quebrar o seu código porque `a` depende de `b`. + **Por que?**: Você nunca deve se preocupar com function declaration (declarações de função) onde `var a` está antes de `var b` vai ou não quebrar o seu código porque `a` depende de `b`. - **Por que?**: A ordem é crítica com function expressions (expressões de função) + **Por que?**: A ordem é crítica com function expressions (expressões de função) ```javascript /** @@ -899,7 +897,7 @@ ou *Chamadas de dados separadas* } } ``` - + Nota: O serviço de dados (data service) é chamado pelos consumidores, como um controlador (controller), escondendo a implementação dos consumidores, como mostrado abaixo. ```javascript @@ -931,7 +929,7 @@ ou *Chamadas de dados separadas* return vm.avengers; }); } - } + } ``` ### Return a Promise from Data Calls @@ -989,7 +987,7 @@ ou *Limite 1 por arquivo* - Crie uma diretiva (directive) por arquivo. Nomeie o arquivo pela diretiva. - **Por que?**: É fácil misturar todas as diretivas em um arquivo, mas é difícil depois separá-las, já que algumas são compartilhadas entre aplicativos, outras pelos módulos (modules) e algumas somente para um módulo. + **Por que?**: É fácil misturar todas as diretivas em um arquivo, mas é difícil depois separá-las, já que algumas são compartilhadas entre aplicativos, outras pelos módulos (modules) e algumas somente para um módulo. **Por que?**: Uma diretiva (directive) por arquivo é mais fácil de dar manutenção. @@ -1047,7 +1045,7 @@ ou *Limite 1 por arquivo* /** * @desc diretiva de spinner que pode ser usada em qualquer lugar de um aplicativo de vendas em uma companhia chamada Acme * @example
- */ + */ angular .module('sales.widgets') .directive('acmeSalesCustomerInfo', salesCustomerInfo); @@ -1079,7 +1077,7 @@ ou *Limite 1 por arquivo* ### Limit DOM Manipulation ou *Limite a manipulação do DOM* - - Quando estiver manipulando o DOM diretamente, utilize uma diretiva (directive). Se formas alternativas podem ser utilizadas, como: utilizar CSS para setar estilos ou [serviços de animação (animation services)](https://docs.angularjs.org/api/ngAnimate), Angular templating, [`ngShow`](https://docs.angularjs.org/api/ng/directive/ngShow) ou [`ngHide`](https://docs.angularjs.org/api/ng/directive/ngHide), então prefira utilizá-los. Por exemplo, se uma diretiva simplesmente esconde ou mostra um elemento, use ngHide/ngShow. + - Quando estiver manipulando o DOM diretamente, utilize uma diretiva (directive). Se formas alternativas podem ser utilizadas, como: utilizar CSS para setar estilos ou [serviços de animação (animation services)](https://docs.angularjs.org/api/ngAnimate), Angular templating, [`ngShow`](https://docs.angularjs.org/api/ng/directive/ngShow) ou [`ngHide`](https://docs.angularjs.org/api/ng/directive/ngHide), então prefira utilizá-los. Por exemplo, se uma diretiva simplesmente esconde ou mostra um elemento, use ngHide/ngShow. **Por que?**: A manipulação do DOM pode ser difícil de testar, debugar, e há melhores maneiras (ex: CSS, animações (animations), templates). @@ -1088,9 +1086,9 @@ ou *Forneça um prefixo único para as diretivas* - Forneça um curto, único e descritivo prefixo para a diretiva, como `acmeSalesCustomerInfo`, que é declarado no HTML como `acme-sales-customer-info`. - **Por que?**: Um prefixo curto e único identifica o contexto e a origem da diretiva. Por exemplo, o prefixo `cc-` pode indicar que a diretiva é parte de um aplicativo da CodeCamper, enquanto a diretiva `acme-` pode indicar uma diretiva para a companhia Acme. + **Por que?**: Um prefixo curto e único identifica o contexto e a origem da diretiva. Por exemplo, o prefixo `cc-` pode indicar que a diretiva é parte de um aplicativo da CodeCamper, enquanto a diretiva `acme-` pode indicar uma diretiva para a companhia Acme. - Nota: Evite `ng-`, pois são reservadas para as diretivas do AngularJS. Pesquise largamente as diretivas utilizadas para evitar conflitos de nomes, como `ion-` que são utilizadas para o [Ionic Framework](http://ionicframework.com/). + Nota: Evite `ng-`, pois são reservadas para as diretivas do AngularJS. Pesquise largamente as diretivas utilizadas para evitar conflitos de nomes, como `ion-` que são utilizadas para o [Ionic Framework](http://ionicframework.com/). ### Restrict to Elements and Attributes ou *Restringir para elementos e atributos* @@ -1133,7 +1131,7 @@ ou *Restringir para elementos e atributos*
``` - + ```javascript /* recomendado */ angular @@ -1161,7 +1159,7 @@ ou *Diretivas e "ControladorComo"* **Por que?**: Faz sentido e não é difícil. - Nota: A diretiva (directive) abaixo demonstra algumas maneiras que você pode utilizar escopos (scopes) dentro de link e controller de uma diretiva, utilizando controllerAs. Eu coloquei o template somente para manter tudo em um mesmo local. + Nota: A diretiva (directive) abaixo demonstra algumas maneiras que você pode utilizar escopos (scopes) dentro de link e controller de uma diretiva, utilizando controllerAs. Eu coloquei o template somente para manter tudo em um mesmo local. ```html
@@ -1191,8 +1189,8 @@ ou *Diretivas e "ControladorComo"* /* jshint validthis:true */ var vm = this; - vm.min = 3; - vm.max = $scope.max; + vm.min = 3; + vm.max = $scope.max; console.log('CTRL: $scope.max = %i', $scope.max); console.log('CTRL: vm.min = %i', vm.min); console.log('CTRL: vm.max = %i', vm.max); @@ -1222,11 +1220,11 @@ ou *Resolvendo promessas para um controlador* ou *Ativação de promessas no controlador* - Resolva a lógica de inicialização no controlador (controller) em uma função `iniciar`. - + **Por que?**: Colocando a lógica de inicialização em um lugar consistente no controlador (controller), torna mais fácil de localizar, mais consistente para testar e ajuda a evitar o espalhamento da lógica de inicialização pelo controlador (controller). Nota: Se vocẽ precisa cancelar a rota condicionalmente antes de utilizar o controlador (controller), utilize uma resolução de rota (route resolve). - + ```javascript /* evite */ function Avengers(dataservice) { @@ -1331,7 +1329,7 @@ ou *Anotação Manual para Injeção de Dependência* ou *Não seguro para Minificação* - Evite usar o atalho de sintaxe de declarar dependências sem usar uma abordagem segura para minificação. - + **Por que?**: Os parâmetros do componente (por ex. controller, factory, etc) serão convertidos em variáveis encurtadas. Por exemplo, `common` e `dataservice` podem virar `a` ou `b` e não serem encontrados pelo AngularJS. ```javascript @@ -1355,30 +1353,30 @@ ou *Não seguro para Minificação* ou *Identifique Dependências Manualmente* - Use `$inject` para identificar manualmente suas dependências de componentes do AngularJS. - + **Por que?**: Esta técnica espelha a técnica usada por [`ng-annotate`](https://github.com/olov/ng-annotate), a qual eu recomendo para automatizar a criação de dependências seguras para minificação. Se `ng-annotate` detectar que a injeção já foi feita, ela não será duplicada. **Por que?**: Isto salvaguarda suas dependências de serem vulneráveis a problemas de minificação quando parâmetros podem ser encurtados. Por exemplo, `common` e `dataservice` podem se tornar `a` ou `b` e não serem encontrados pelo AngularJS. - + **Por que?**: Evite criar dependências in-line pois listas longas podem ser difíceis de ler no array. Além disso, pode ser confuso o array ser uma série de strings enquanto o último item é a função do componente. ```javascript /* evite */ angular .module('app') - .controller('Dashboard', - ['$location', '$routeParams', 'common', 'dataservice', + .controller('Dashboard', + ['$location', '$routeParams', 'common', 'dataservice', function Dashboard($location, $routeParams, common, dataservice) {} - ]); + ]); ``` ```javascript /* evite */ angular .module('app') - .controller('Dashboard', + .controller('Dashboard', ['$location', '$routeParams', 'common', 'dataservice', Dashboard]); - + function Dashboard($location, $routeParams, common, dataservice) { } ``` @@ -1390,12 +1388,12 @@ ou *Identifique Dependências Manualmente* .controller('Dashboard', Dashboard); Dashboard.$inject = ['$location', '$routeParams', 'common', 'dataservice']; - + function Dashboard($location, $routeParams, common, dataservice) { } ``` - Nota: Quando sua função estiver abaixo de um return o $inject pode ficar inacessível (isso pode acontecer em uma diretiva). Você pode resolver isso movendo o $inject para acima do return ou usando a sintaxe alternativa de injeção de array. + Nota: Quando sua função estiver abaixo de um return o $inject pode ficar inacessível (isso pode acontecer em uma diretiva). Você pode resolver isso movendo o $inject para acima do return ou usando a sintaxe alternativa de injeção de array. Nota: [`ng-annotate 0.10.0`](https://github.com/olov/ng-annotate) introduziu um comportamento em que ele move o `$inject` para onde ele possa ser acessado. @@ -1429,7 +1427,7 @@ ou *Identifique Dependências Manualmente* ou *Identifique Dependências do Resolvedor de Rotas Manualmente* - Use $inject para identificar manualmente as dependências do seu resolvedor de rotas para componentes do AngularJS. - + **Por que?**: Esta técnica separa a função anônima do resolvedor de rota, tornando-a mais fácil de ler. **Por que?**: Uma chamada a `$inject` pode facilmente preceder o resolvedor para fazer qualquer dependência segura para minificação. @@ -1462,10 +1460,10 @@ ou *Minificação e Anotação* ### ng-annotate - Use [ng-annotate](//github.com/olov/ng-annotate) para [Gulp](http://gulpjs.com) ou [Grunt](http://gruntjs.com) e comente as funções que precisam de injeção de dependência automatizada usando `/** @ngInject */` - + **Por que?**: Isso protege seu código de qualquer dependência que pode não estar usando práticas seguras para minificação. - **Por que?**: [`ng-min`](https://github.com/btford/ngmin) está deprecated. + **Por que?**: [`ng-min`](https://github.com/btford/ngmin) está deprecated. > Eu prefiro Gulp pois sinto que é mais fácil de escrever, de ler, e de debugar. @@ -1538,7 +1536,7 @@ ou *Minificação e Anotação* ### Utilize Gulp ou Grunt para o ng-annotate - Utilize [gulp-ng-annotate](https://www.npmjs.org/package/gulp-ng-annotate) ou [grunt-ng-annotate](https://www.npmjs.org/package/grunt-ng-annotate) para tarefas de build automatizadas. Injete `/* @ngInject */` antes de qualquer função que tenha dependências. - + **Por que?**: ng-annotate vai capturar todas as dependências, mas as vezes requer dicas utilizando a sintaxe `/* @ngInject */` . O código abaixo é um exemplo de uma task Gulp utilizando ngAnnotate @@ -1573,7 +1571,7 @@ ou *Tratamento de exceção* ou *decoradores* - Utilize um [decorator](https://docs.angularjs.org/api/auto/service/$provide#decorator), no seu config utilizando o serviço [`$provide`](https://docs.angularjs.org/api/auto/service/$provide), no serviço [`$exceptionHandler`](https://docs.angularjs.org/api/ng/service/$exceptionHandler) para realizar ações customizadas quando um erro ocorrer. - + **Por que?**: Fornece um caminho consistente para manipular erros não tratados pelo Angular em tempo de desenvolvimento ou execução (run-time). Nota: Outra opção é sobrescrever o serviço ao invés de utilizar um decorator. Esta é uma boa opção, mas se você quer manter o comportamento padrão e estender, o decorator é recomendado. @@ -1595,9 +1593,9 @@ ou *decoradores* function extendExceptionHandler($delegate, toastr) { return function(exception, cause) { $delegate(exception, cause); - var errorData = { - exception: exception, - cause: cause + var errorData = { + exception: exception, + cause: cause }; /** * Pode adicionar o erro para um serviço de coleções, @@ -1642,11 +1640,11 @@ ou *Coletores de exceção* ``` ### Route Errors - + - Gerencie e log todos os erros de routing utilizando o [`$routeChangeError`](https://docs.angularjs.org/api/ngRoute/service/$route#$routeChangeError). **Por que?**: Fornece uma maneira consistente de gerenciar erros relacionados a routing. - + **Por que?**: Potencialmente fornece uma melhor experiência de usuário se um erro de routing ocorrer e você redirecionar o usuário para uma tela amigável com mais detalhes ou opções de recuperação. ```javascript @@ -1686,7 +1684,7 @@ ou *Nomenclatura* **Por que?**: As convenções de nomenclatura ajudam a fornecer uma maneira consistente de encontrar algo à primeira vista. Consistência dentro do projeto é vital. Consistência dentro de um time é importante. Consistência em toda a empresa proporciona uma enorme eficiência. **Por que?**: As convenções de nomenclatura deveriam simplesmente te ajudar a encontrar trechos do seu código mais rápido e torná-lo mais fácil de se entender. - + ### Feature File Names ou *Nome para funcionalidades* @@ -1698,7 +1696,7 @@ ou *Nome para funcionalidades* ```javascript /** - * opções comuns + * opções comuns */ // Controllers @@ -1727,7 +1725,7 @@ ou *Nome para funcionalidades* // constants constants.js - + // module definition avengers.module.js @@ -1737,7 +1735,7 @@ ou *Nome para funcionalidades* // configuration avengers.config.js - + // directives avenger-profile.directive.js avenger-profile.directive.spec.js @@ -1758,7 +1756,7 @@ ou *Nome para funcionalidades* ou *Nome para aquivos de testes* - Nomeie as especificações de testes de forma similar aos componentes que elas testam, com o sufixo `spec`. - + **Por que?**: Fornece um modo consistente para identificar rapidamente os componentes. **Por que?**: Fornece padrões de correspondência para o [karma](http://karma-runner.github.io/) ou outros test runners. @@ -1777,7 +1775,7 @@ ou *Nome para aquivos de testes* ou *Nomes para controller* - Use nomes consistentes para todos os controllers nomeados após as sua funcionalidade. Use UpperCamelCase para os controllers, assim como para seus construtores. - + **Por que?**: Fornece um modo consistente para identificar e referenciar os controllers. **Por que?**: O UpperCamelCase é o modo mais comum para identificar objetos que serão instanciados através de construtores. @@ -1794,14 +1792,14 @@ ou *Nomes para controller* function HeroAvengers(){ } ``` - + ### Controller Name Suffix ou *sufixo "Controllers"* - - Complemente o nome do controller com ou sem o sufixo `Controller`. Escolha uma opção, não ambas. + - Complemente o nome do controller com ou sem o sufixo `Controller`. Escolha uma opção, não ambas. **Por que?**: O sufixo `Controller` é mais usado e mais descritivo. - + ```javascript /** * recomendado: Opção 1 @@ -1831,8 +1829,8 @@ ou *sufixo "Controllers"* ### Factory Names ou *Nomes para factory* - - Use nomes consistentes para todas as factories nomeadas após sua funcionalidade. Use a conveção camelCase para services e factories. Evite prefixos com `$`. - + - Use nomes consistentes para todas as factories nomeadas após sua funcionalidade. Use a conveção camelCase para services e factories. Evite prefixos com `$`. + **Por que?**: Fornece um modo consistente de identificar e referenciar rapidamente as factories. **Por que?**: Evite colisão de nomes com factories e services pré-programados que usam o prefixo `$`. @@ -1854,15 +1852,15 @@ ou *Nomes para factory* ou *Nomes para directive* - Use nomes consistentes para todas as directives usando a convenção camelCase. Use um prefixo curto para descrever a área a qual a directive pertence (como prefixo da compania ou do projeto). - + **Por que?**: Fornece um modo consistente de identificar e referenciar rapidamente os componentes. - + ```javascript /** * recomendado */ - // avenger.profile.directive.js + // avenger.profile.directive.js angular .module .directive('xxAvengerProfile', xxAvengerProfile); @@ -1884,7 +1882,7 @@ ou *Módulos* ### Configuration ou *Configuração* - - Separe a configuração do módulo em seu próprio arquivo, nomeado após o módulo. Um arquivo de configuração para o módulo principal `app` é nomeado `app.config.js` (ou simplesmente `config.js`). Uma configuração para o módulo `admin.module.js` é nomeada `admin.config.js`. + - Separe a configuração do módulo em seu próprio arquivo, nomeado após o módulo. Um arquivo de configuração para o módulo principal `app` é nomeado `app.config.js` (ou simplesmente `config.js`). Uma configuração para o módulo `admin.module.js` é nomeada `admin.config.js`. **Por que?**: Separa a configuração do módulo da definição, dos componentes e do código ativo. @@ -1907,7 +1905,7 @@ ou *Princípio da estrutura LIFT na aplicação* **Por que LIFT?**: Fornece uma estrutura consistente que escala bem, é modular, e torna mais fácil para aumentar a eficiência ao desenvolver, pois encontra-se o código rapidamente. Outra forma de verificar a estrutura da sua aplicação é se perguntar: Quão rápido é para você abrir e trabalhar em todos os arquivos relacionados com uma funcionalidade? Quando estou sentindo que não estou confortável com a minha estrutura, eu volto e revisito as regras do LIFT - + 1. `L`ocating (Localizar) nosso código é fácil 2. `I`dentify (Identificar) o código rapidamente 3. `F`lat (Plano) - Deixar a estrutura a mais plana que conseguirmos @@ -1999,33 +1997,33 @@ ou *Estrutura de Pastas-por-Recurso* app.module.js app.config.js app.routes.js - components/ - calendar.directive.js - calendar.directive.html - user-profile.directive.js - user-profile.directive.html + components/ + calendar.directive.js + calendar.directive.html + user-profile.directive.js + user-profile.directive.html layout/ - shell.html + shell.html shell.controller.js - topnav.html - topnav.controller.js + topnav.html + topnav.controller.js people/ attendees.html - attendees.controller.js + attendees.controller.js speakers.html speakers.controller.js speaker-detail.html speaker-detail.controller.js - services/ - data.service.js + services/ + data.service.js localstorage.service.js - logger.service.js + logger.service.js spinner.service.js sessions/ - sessions.html + sessions.html sessions.controller.js session-detail.html - session-detail.controller.js + session-detail.controller.js ``` ![Exemplo de estrutura na aplicação](https://raw.githubusercontent.com/johnpapa/angularjs-styleguide/master/assets/modularity-2.png) @@ -2033,49 +2031,49 @@ ou *Estrutura de Pastas-por-Recurso* Nota: Não estruture seu aplicativo usando pastas-por-tipo. Isto requer alternar entre várias pastas ao trabalhar em um recurso e fica difícil de manejar quando o aplicativo cresce rapidamente para 5, 10 ou 25+ views e controllers (e outros recursos), o que torna mais difícil do que pasta-por-recurso para localizar arquivos. ```javascript - /* + /* * evite * Alternativa pastas-por-tipo. * Eu recomendo "pastas-por-recurso". */ - + app/ app.module.js app.config.js app.routes.js controllers/ - attendees.js - session-detail.js - sessions.js - shell.js - speakers.js - speaker-detail.js - topnav.js - directives/ - calendar.directive.js - calendar.directive.html - user-profile.directive.js - user-profile.directive.html - services/ - dataservice.js + attendees.js + session-detail.js + sessions.js + shell.js + speakers.js + speaker-detail.js + topnav.js + directives/ + calendar.directive.js + calendar.directive.html + user-profile.directive.js + user-profile.directive.html + services/ + dataservice.js localstorage.js - logger.js + logger.js spinner.js views/ - attendees.html + attendees.html session-detail.html - sessions.html - shell.html - speakers.html + sessions.html + shell.html + speakers.html speaker-detail.html - topnav.html - ``` + topnav.html + ``` **[De volta ao topo](#tabela-de-conte%C3%BAdo)** ## Modularity ou *Modularidade* - + ### Many Small, Self Contained Modules ou *Muitos módulos pequenos e independentes* @@ -2222,7 +2220,7 @@ Testes unitários ajudam a manter o código limpo, tal como, eu inclui algumas r ### Análise de Código - - Execute JSHint no seus testes. + - Execute JSHint no seus testes. *Por que?*: Testes são códigos. JSHint ajuda a identificar problemas de qualidade de código que podem fazer com que o teste execute de maneira errada. @@ -2252,7 +2250,7 @@ Testes unitários ajudam a manter o código limpo, tal como, eu inclui algumas r ### Sub Second - - Use short durations for animations. I generally start with 300ms and adjust until appropriate. + - Use short durations for animations. I generally start with 300ms and adjust until appropriate. *Why?*: Long animations can have the reverse affect on User Experience and perceived performance by giving the appearance of a slow application. @@ -2306,7 +2304,7 @@ Testes unitários ajudam a manter o código limpo, tal como, eu inclui algumas r /** * @name logError * @desc Logs errors - * @param {String} msg Message to log + * @param {String} msg Message to log * @returns {String} * @memberOf Factories.Logger */ @@ -2405,7 +2403,7 @@ Testes unitários ajudam a manter o código limpo, tal como, eu inclui algumas r - Cria uma *Constant* no Angular para variáveis globais de bibliotecas de terceiros. - *Por que?*: Fornece uma forma de injetar bibliotecas de terceiros que de outra forma seriam globais. Isso melhora a testabilidade do código permitindo a você conhecer mais facilmente quais dependências os seus componentes têm (evita vazamento de abstrações). Também permite que você simule estas dependências, o que faz sentido. + *Por que?*: Fornece uma forma de injetar bibliotecas de terceiros que de outra forma seriam globais. Isso melhora a testabilidade do código permitindo a você conhecer mais facilmente quais dependências os seus componentes têm (evita vazamento de abstrações). Também permite que você simule estas dependências, o que faz sentido. ```javascript // constants.js @@ -2428,13 +2426,13 @@ Use file templates or snippets to help follow consistent styles and patterns. He ### Sublime Text - - Angular snippets that follow these styles and guidelines. + - Angular snippets that follow these styles and guidelines. - - Download the [Sublime Angular snippets](assets/sublime-angular-snippets.zip) + - Download the [Sublime Angular snippets](assets/sublime-angular-snippets.zip) - Place it in your Packages folder - - Restart Sublime + - Restart Sublime - In a JavaScript file type these commands followed by a `TAB` - + ```javascript ngcontroller // creates an Angular controller ngdirective // creates an Angular directive @@ -2454,7 +2452,7 @@ Use file templates or snippets to help follow consistent styles and patterns. He - Angular snippets and file templates that follow these styles and guidelines. You can import them into your WebStorm settings: - - Download the [WebStorm Angular file templates and snippets](assets/webstorm-angular-file-template.settings.jar) + - Download the [WebStorm Angular file templates and snippets](assets/webstorm-angular-file-template.settings.jar) - Open WebStorm and go to the `File` menu - Choose the `Import Settings` menu option - Select the file and click `OK` @@ -2478,7 +2476,7 @@ Open an issue first to discuss potential changes/additions. If you have question *By contributing to this repository you are agreeing to make your content available subject to the license of this repository.* ### Process - 1. Discuss the changes in an Issue. + 1. Discuss the changes in an Issue. 1. Open a Pull Request, reference the issue, and explain the change and why it adds value. 1. The Pull Request will be evaluated and either merged or declined. diff --git a/i18n/README.md b/i18n/README.md index 6a161c92..dfe00179 100644 --- a/i18n/README.md +++ b/i18n/README.md @@ -4,36 +4,37 @@ The [original English version](http://jpapa.me/ngstyles) is the source of truth, *All translations are created by and maintained by the community.* -1. [French](fr-FR.md) -2. [German](de-DE.md) -3. [Italian](it-IT.md) -4. [Japanese](ja-JP.md) -5. [Macedonian](mk-MK.md) -6. [Portuguese-Brazil](PT-BR.md) -7. [Russian](ru-RU.md) -8. [Simplified Chinese](zh-CN.md) -9. [Spanish](es-ES.md) + 1. [French](fr-FR.md) by [Eric Le Merdy](https://github.com/ericlemerdy) and [Xavier Haniquaut] (@xavhan) + 1. [German](de-DE.md) by [Michael Seeger](https://github.com/miseeger), [Sascha Hagedorn](https://github.com/saesh) and [Johannes Weber](https://github.com/johannes-weber) + 1. [Italian](it-IT.md) by [Angelo Chiello](https://github.com/angelochiello) + 1. [Japanese](ja-JP.md) by [@noritamago](https://github.com/noritamago) + 1. [Macedonian](mk-MK.md) by [Aleksandar Bogatinov](https://github.com/Bogatinov) + 1. [Portuguese-Brazil](PT-BR.md) by [Vinicius Sabadim Fernandes](https://github.com/vinicius-sabadim) + 1. [Russian](ru-RU.md) by [Vasiliy Mazhekin](https://github.com/mazhekin) + 1. [Simplified Chinese](zh-CN.md) by [Zhao Ke](https://github.com/natee) + 1. [Spanish](es-ES.md) by [Alberto Calleja](https://github.com/AlbertoImpl) and [Gilberto](https://github.com/ingilniero) + ## Contributing -Language translations are welcomed and encouraged. The success of these translations depends on the community. I highly encourage new translation contributions and help to keep them up to date. +Language translations are welcomed and encouraged. The success of these translations depends on the community. I highly encourage new translation contributions and help to keep them up to date. All translations must preserve the intention of the original document. > All contributions fall under the [MIT License of this repository](https://github.com/johnpapa/angularjs-styleguide#license). In other words, you would be providing these free to the community. -### New Translations +### New Translations 1. Fork the repository 2. Create a translation file and name it using the 118n standard format. 3. Put this file in the i18n folder 4. Translate the original English version to be current with the latest changes -3. Make a Pull Request +3. Make a Pull Request Once you do these I will merge, point the translation links to it, and enter the translation credit to you. -### Updated Translations +### Updated Translations 1. Fork the repository 2. Make the translation changes -3. Make a Pull Request +3. Make a Pull Request Once you do these I will merge, point the translation links to it, and enter the translation credit to you. diff --git a/i18n/de-DE.md b/i18n/de-DE.md index eb60d867..3af8f1b7 100644 --- a/i18n/de-DE.md +++ b/i18n/de-DE.md @@ -2,10 +2,6 @@ *Dogmatischer Angular Styleguide für Teams von John Papa [@john_papa](//twitter.com/john_papa)* -*Translated by [miseeger](https://github.com/miseeger)* - ->The [original English version](http://jpapa.me/ngstyles) is the source of truth, as it is maintained and updated first. - Sind Sie auf der Suche nach einem dogmatischen Styleguide zur Syntax, zu Konventionen und zur Struktur von Angular-Anwendungen, dann treten Sie näher. Diese Vorlagen basieren auf meinen Erfahrungen mit [Angular](//angularjs.org), Präsentationen, [Pluralsight Trainingskursen](http://pluralsight.com/training/Authors/Details/john-papa) und der Arbeit in Teams. Der Zweck dieses Styleguides ist es, eine Anleitung für die Erstellung von Angular-Anwendungen bereitzustellen, indem ich die Konventionen, die ich nutze, zeige und - wichtiger als das - beschreibe, warum ich sie wähle. @@ -121,10 +117,10 @@ Während diese Anleitung das *Was*, *Warum* und *Wie* erklärt, finde ich es ebe - Packen Sie Angular-Komponenten in eine Funktion, die sich sofort selbst ausführt (Immediately Invoked Function Expression, kurz: IIFE). - *Warum?*: Eine IIFE entfernt Variablen aus dem global scope. Dies verhindert, dass Variablen- und Funktionsdeklarationen länger als erwartet im global scope bleiben. Und es verhindert zusätzlich, Kollisionen bei Variablen zu verhindern. - - *Warum?*: Wird Ihr Code für das Deployment auf einem Produktionsserver minifiziert und in einer einzigen Datei zusammengepackt, kann es zur Kollision von Variablen (auch globalen) kommen. Eine IIFE schützt Sie hiervor, indem sie den Gültigkeitsbereich der Variablen auf die jeweilige Datei beschränkt. - + *Warum?*: Eine IIFE entfernt Variablen aus dem global scope. Dies verhindert, dass Variablen- und Funktionsdeklarationen länger als erwartet im global scope bleiben. Und es verhindert zusätzlich, Kollisionen bei Variablen zu verhindern. + + *Warum?*: Wird Ihr Code für das Deployment auf einem Produktionsserver minifiziert und in einer einzigen Datei zusammengepackt, kann es zur Kollision von Variablen (auch globalen) kommen. Eine IIFE schützt Sie hiervor, indem sie den Gültigkeitsbereich der Variablen auf die jeweilige Datei beschränkt. + ```javascript /* zu vermeiden */ // logger.js @@ -187,7 +183,7 @@ Während diese Anleitung das *Was*, *Warum* und *Wie* erklärt, finde ich es ebe - Benutzen Sie eindeutige Namenskonventionen mit Trennzeichen für Untermodule. - *Warum?*: Eindeutige Namen helfen Kollisionen bei Modulnamen zu verhindern. Trennzeichen helfen bei der Definition von Modulen und deren Untermodul-Hierarchie. Zum Beispiel kann `app` Ihr Root-Modul sein, während `app.dashboard` und `app.users` Module sein können, die von `app` als Abhängigkeiten genutzt werden. + *Warum?*: Eindeutige Namen helfen Kollisionen bei Modulnamen zu verhindern. Trennzeichen helfen bei der Definition von Modulen und deren Untermodul-Hierarchie. Zum Beispiel kann `app` Ihr Root-Modul sein, während `app.dashboard` und `app.users` Module sein können, die von `app` als Abhängigkeiten genutzt werden. ### Definitionen (auch: Setter) ###### [Style [Y021](#style-y021)] @@ -622,7 +618,7 @@ Während diese Anleitung das *Was*, *Warum* und *Wie* erklärt, finde ich es ebe - Definieren Sie einen Controller für einen View und versuchen Sie nicht, diesen Controller für weitere Views zu verwenden. Verlagern Sie stattdessen wiederzuverwendende Logik in Factories und halten Sie den Controller einfach und ausgerichtet auf seinen View. - *Warum?*: Controller in mehreren Views wiederzuverwenden ist kritisch und bedingt eine gute End-Zu-End (e2e) Testabdeckung, um die Stabilität in großen Anwendungen zu garantieren. + *Warum?*: Controller in mehreren Views wiederzuverwenden ist kritisch und bedingt eine gute End-Zu-End (e2e) Testabdeckung, um die Stabilität in großen Anwendungen zu garantieren. ### Controller zuweisen @@ -802,7 +798,7 @@ Während diese Anleitung das *Was*, *Warum* und *Wie* erklärt, finde ich es ebe *Warum?*: Das Platzieren der Implementierungsdetails einer Funktion weiter unten in der Datei, hält diese Codemenge außer Sicht und Sie sehen die wichtigen Dinge am Anfang. *Warum?*: Funktionsdeklarationen werden "nach oben gezogen" (sog. Hoisting), so dass es keine Probleme damit gibt, ob eine Funktion vor ihrer Benutzung deklariert werden sollte (wie es bei Funktionsausdrücken der Fall wäre). - + *Warum?*: Sie müssen sich niemals Sorgen darum machen, wenn Sie in Funktionsdeklarationen `var a` vor `var b` platzieren, weil `a` von `b` abhängig ist. *Warum?*: Die Reihenfolge ist kritisch in Funktionsausdrücken. @@ -974,7 +970,7 @@ Während diese Anleitung das *Was*, *Warum* und *Wie* erklärt, finde ich es ebe - Wenn Sie einen Datenservice ansprechen, der einen Promise wie `$http` zurückliefert, so liefern Sie in Ihrer aufrufenden Funktion ebenso einen Promise zurück. - *Warum?*: Sie können die Promises aneinanderhängen und weitere Aktionen ausführen, wenn der Datenabruf beendet ist und den Promise im Erfolgsfall entweder auflöst oder bei Fehlschlagen zurückweist. + *Warum?*: Sie können die Promises aneinanderhängen und weitere Aktionen ausführen, wenn der Datenabruf beendet ist und den Promise im Erfolgsfall entweder auflöst oder bei Fehlschlagen zurückweist. ```javascript /* empfohlen */ @@ -984,7 +980,7 @@ Während diese Anleitung das *Was*, *Warum* und *Wie* erklärt, finde ich es ebe function activate() { /** * Schritt 1 - * Bei der getAvengers Funktion nach den Avenger-Daten + * Bei der getAvengers Funktion nach den Avenger-Daten * fragen und auf den Promise warten */ return getAvengers().then(function() { @@ -999,7 +995,7 @@ Während diese Anleitung das *Was*, *Warum* und *Wie* erklärt, finde ich es ebe function getAvengers() { /** * Schritt 2 - * Beim Datenservice nach den Daten fragen und + * Beim Datenservice nach den Daten fragen und * auf den Promise warten */ return dataservice.getAvengers() @@ -1022,7 +1018,7 @@ Während diese Anleitung das *Was*, *Warum* und *Wie* erklärt, finde ich es ebe - Erstellen Sie eine Direktive pro Datei. Benennen Sie die Datei nach der Direktive. - *Warum?*: Es ist einfach, alle Direktiven in einer Datei zu halten, aber schwer, sie dann wieder herauszulösen sodass sie zwischen Anwendungen oder Modulen ausgetauscht werden können oder einfach nur in einem Modulzu genutzt werden. + *Warum?*: Es ist einfach, alle Direktiven in einer Datei zu halten, aber schwer, sie dann wieder herauszulösen sodass sie zwischen Anwendungen oder Modulen ausgetauscht werden können oder einfach nur in einem Modulzu genutzt werden. *Warum?*: Eine Direktive pro Datei ist einfach zu warten. @@ -1062,7 +1058,7 @@ Während diese Anleitung das *Was*, *Warum* und *Wie* erklärt, finde ich es ebe /* calendarRange.directive.js */ /** - * @desc Bestell-Direktive, die speziell für das Bestell-Modul der Firma Acme bestimmt ist. + * @desc Bestell-Direktive, die speziell für das Bestell-Modul der Firma Acme bestimmt ist. * @example
*/ angular @@ -1426,7 +1422,7 @@ Während diese Anleitung das *Was*, *Warum* und *Wie* erklärt, finde ich es ebe } ``` - Anmerkung: Das untenstehende Beispiel zeigt die Stellen, an denen die Route mit einer benannten Funktion aufgelöst wird. Das ist einfacher zu debuggen und vereinfacht auch die Handhabung von Dependency Injection. + Anmerkung: Das untenstehende Beispiel zeigt die Stellen, an denen die Route mit einer benannten Funktion aufgelöst wird. Das ist einfacher zu debuggen und vereinfacht auch die Handhabung von Dependency Injection. ```javascript /* noch besser */ @@ -1472,7 +1468,7 @@ Während diese Anleitung das *Was*, *Warum* und *Wie* erklärt, finde ich es ebe ### Unsichere Minifizierung ###### [Style [Y090](#style-y090)] - - Vermeiden Sie es, die kurze Deklarationssyntax für Abhängigkeiten ohne einen für die Minifizierung sicheren Ansatz zu verwenden. + - Vermeiden Sie es, die kurze Deklarationssyntax für Abhängigkeiten ohne einen für die Minifizierung sicheren Ansatz zu verwenden. *Warum?*: Die Parameter der Komponente (z. B. Controller, Factory, etc.) werden in abgekürzte Variablen gewandelt. So kann zum Beispiel aus `common` und `dataservice` ein `a` oder `b` werden, was von Angular nicht gefunden wird. @@ -1607,7 +1603,7 @@ Während diese Anleitung das *Was*, *Warum* und *Wie* erklärt, finde ich es ebe ### ng-annotate ###### [Style [Y100](#style-y100)] - - Benutzen Sie [ng-annotate](//github.com/olov/ng-annotate) für [Gulp](http://gulpjs.com) oder [Grunt](http://gruntjs.com) und versehen Sie die Funktionen mit den notwendigen `/** @ngInject */`-Kommentaren, die für die "automatische" Dependency Injection genutzt werden sollen. + - Benutzen Sie [ng-annotate](//github.com/olov/ng-annotate) für [Gulp](http://gulpjs.com) oder [Grunt](http://gruntjs.com) und versehen Sie die Funktionen mit den notwendigen `/** @ngInject */`-Kommentaren, die für die "automatische" Dependency Injection genutzt werden sollen. *Warum?*: Dies schützt Ihren Code vor Abhängigkeiten, die keiner minifizierungssicheren Technik entsprechen. @@ -1748,9 +1744,9 @@ Während diese Anleitung das *Was*, *Warum* und *Wie* erklärt, finde ich es ebe }; /** * Der Fehler könnte zu einer Liste im Service oder - * zum $rootScope hinzugefügt werden oder bei einem - * Remote-Webserver oder lokal protokolliert oder - * einfach wieder hart "geworfen" werden. Es obliegt + * zum $rootScope hinzugefügt werden oder bei einem + * Remote-Webserver oder lokal protokolliert oder + * einfach wieder hart "geworfen" werden. Es obliegt * ganz Ihnen. * * throw exception; @@ -1844,7 +1840,7 @@ Während diese Anleitung das *Was*, *Warum* und *Wie* erklärt, finde ich es ebe ### Richtlinien der Namensgebung ###### [Style [Y120](#style-y120)] - - Benutzen Sie stimmige Namen für alle Komponenten, einem Muster folgend, welches die Hauptfunktionen (Features) einer Komponente und dann (optional) ihren Typ beschreibt. + - Benutzen Sie stimmige Namen für alle Komponenten, einem Muster folgend, welches die Hauptfunktionen (Features) einer Komponente und dann (optional) ihren Typ beschreibt. Meine empfohlenes Muster ist `feature.typ.js`. Es gibt zwei zu vergebene Namen für die meisten Komponenten: * der Dateiname (`avengers.controller.js`) * der Name der bei Angular zu registrierenden Komponente (`AvengersController`) @@ -2054,7 +2050,7 @@ Während diese Anleitung das *Was*, *Warum* und *Wie* erklärt, finde ich es ebe ### LIFT ###### [Style [Y140](#style-y140)] - - LIFT steht für `L`ocate (auffinden), `I`dentify (identifizieren), `F`lat (flach), T`ry to stay DRY` (versuchen Sie, Ihren Code nicht zu wiederholen). Das bedeutet also, Sie sollten Ihre Anwendung so strukturieren, dass Sie Ihren Code schnell auffinden und auf einen Blick identifizieren können, für was der Code gut ist. Dabei sollten Sie die Struktur so flach wie möglich halten. Vermeiden Sie es unbedingt, Ihren Code zu wiederholen. + - LIFT steht für `L`ocate (auffinden), `I`dentify (identifizieren), `F`lat (flach), T`ry to stay DRY` (versuchen Sie, Ihren Code nicht zu wiederholen). Das bedeutet also, Sie sollten Ihre Anwendung so strukturieren, dass Sie Ihren Code schnell auffinden und auf einen Blick identifizieren können, für was der Code gut ist. Dabei sollten Sie die Struktur so flach wie möglich halten. Vermeiden Sie es unbedingt, Ihren Code zu wiederholen. *Warum LIFT?*: Bietet eine konsistente und gut skalierbare Struktur, ist modular und macht es einfacher die Effizienz eines Entwicklers zu steigern, weil er seinen Code schneller finden kann. Prüfen Sie Ihre Anwendungsstruktur, indem Sie sich fragen: Wie schnell kann ich all die Dateien, die zu einem Feature gehören öffnen und mit ihnen arbeiten?" @@ -2095,7 +2091,7 @@ Während diese Anleitung das *Was*, *Warum* und *Wie* erklärt, finde ich es ebe - Wenn Sie einen Dateinamen sehen, sollten Sie sofort wissen, was die Datei beinhaltet und für was sie steht. - *Warum?*: Sie brauchen weniger Zeit, um nach Ihrem Code zu suchen und werden so effizienter. Wenn das bedeutet, dass Sie längere Dateinamen brauchen, dann sei es so. Seien Sie beschreibend bei der Namensvergabe und sorgen Sie dafür, dass eine Datei nur eine Komponente enthält. Vermeiden Sie Dateien mir mehreren Controllern, Services oder gar mit beidem. Ich weiche von dieser Regel ab, wenn ich sehr kleine Features habe, die alle miteinander verbunden und leicht identifizierbar sind. + *Warum?*: Sie brauchen weniger Zeit, um nach Ihrem Code zu suchen und werden so effizienter. Wenn das bedeutet, dass Sie längere Dateinamen brauchen, dann sei es so. Seien Sie beschreibend bei der Namensvergabe und sorgen Sie dafür, dass eine Datei nur eine Komponente enthält. Vermeiden Sie Dateien mir mehreren Controllern, Services oder gar mit beidem. Ich weiche von dieser Regel ab, wenn ich sehr kleine Features habe, die alle miteinander verbunden und leicht identifizierbar sind. ### Flat (flache Struktur) ###### [Style [Y143](#style-y143)] @@ -2769,8 +2765,8 @@ Unit-Tests tragen dazu bei, sauberen Code zu erhalten. Daher habe ich einige mei - Benutzen Sie Konstanten für Werte, die sich nicht ändern und nicht aus einem anderen Service kommen. Wenn Konstanten nur für ein bestimmtes Modul gebraucht werden, welches zudem wiederverwendbar sein soll, dann platzieren Sie die Konstanten in einer Datei (pro Modul) und benennen Sie die Datei nach dem Modul. Bis dahin halten Sie die Konstanten im Hauptmodul in einer `constants.js`-Datei. - *Warum?*: Ein Wert, der sich ändert - wenn auch nur unregelmäßig - sollte von einem Service ermittelt werden, so dass er nicht im Quellcode geändert werden muss. Zum Beispiel könnte eine URL für einen Datenservice in einer Konstanten abgelegt werden. Besser wäre es aber, diesen Wert über einen WebService zu ermitteln. - + *Warum?*: Ein Wert, der sich ändert - wenn auch nur unregelmäßig - sollte von einem Service ermittelt werden, so dass er nicht im Quellcode geändert werden muss. Zum Beispiel könnte eine URL für einen Datenservice in einer Konstanten abgelegt werden. Besser wäre es aber, diesen Wert über einen WebService zu ermitteln. + *Warum?*: Konstanten können in jede Angular-Komponente (auch in einen Provider) eingefügt werden. *Warum?*: Ist eine Anwendung in Module unterteilt, die in anderen Anwendungen genutzt werden können, so sollte jedes alleinstehende Modul für sich selbst funktionieren, eingeschlossen seiner Konstanten. @@ -3051,7 +3047,7 @@ Nutzen Sie [Gulp](http://gulpjs.com) oder [Grunt](http://gruntjs.com), um Aufgab ```javascript var clientApp = './src/client/app/'; - // Immer zuerst die Moduldateien + // Immer zuerst die Moduldateien var files = [ clientApp + '**/*.module.js', clientApp + '**/*.js' diff --git a/i18n/es-ES.md b/i18n/es-ES.md index 2edc626b..b47fd693 100644 --- a/i18n/es-ES.md +++ b/i18n/es-ES.md @@ -2,10 +2,6 @@ *Guía de estilos colaborativa de Angular para equipos por [@john_papa](//twitter.com/john_papa)* -*Translation by [Alberto Calleja](https://github.com/AlbertoImpl) and [Gilberto](https://github.com/ingilniero)* - ->The [original English version](http://jpapa.me/ngstyles) is the source of truth, as it is maintained and updated first. - Si estás buscando una guía colaborativa sobre sintaxis, convenciones y estructura de aplicaciones con AngulRJS, este es el sitio. Estos estilos están basados en mi experiencia desarrollando con [AngularJS](//angularjs.org), persentaciones, [Cursos en Pluralsight](http://pluralsight.com/training/Authors/Details/john-papa) y trabajando en equipos. El propósito de esta guía de estilos es proporcionar una guía de cómo construir aplicaciones con Angular enseñando convenciones que uso y, lo más importante, el porqué. diff --git a/i18n/fr-FR.md b/i18n/fr-FR.md index 3a555ca9..1093d36e 100644 --- a/i18n/fr-FR.md +++ b/i18n/fr-FR.md @@ -2,8 +2,6 @@ *Guide de style par subjectif pour Angular par [@john_papa](//twitter.com/john_papa)* -*Traduit par [Eric Lemerdy](https://github.com/ericlemerdy) et [Xavier Haniquaut](https://github.com/xavhan)* - Si vous cherchez un guide de style pour la syntaxe, les conventions, et la structuration d'applications Angular, alors vous êtes au bon endroit. Ces styles sont basés sur mon expérience de développement avec [Angular](//angularjs.org), mes présentations, [mes cours sur Pluralsight](http://pluralsight.com/training/Authors/Details/john-papa) et mon travail au sein de diverses équipes. Le but de ce guide de style est de proposer des conseils sur le développement d'applications Angular en exposant les conventions que j'utilise et plus important encore, pourquoi je les ai choisies. diff --git a/i18n/it-IT.md b/i18n/it-IT.md index 0a9558c8..f2910846 100644 --- a/i18n/it-IT.md +++ b/i18n/it-IT.md @@ -2,11 +2,7 @@ *Guida stilistica dogmatica ad Angular per i team di [@john_papa](//twitter.com/john_papa)* -*Traduzione di [Angelo Chiello](https://github.com/angelochiello)* - ->The [original English version](http://jpapa.me/ngstyles) is the source of truth, as it is maintained and updated first. - -Se stai cercando una guida stilistica dogmatica per le sintassi, convenzioni e struttura di applicazioni AngularJS, allora questo fa per te. Gli stili sono basati sulla mia esperienza di sviluppo con [AngularJS](//angularjs.org), presentazioni, [corsi di formazioni di Pluralsight](http://pluralsight.com/training/Authors/Details/john-papa) e del lavoro in team. +Se stai cercando una guida stilistica dogmatica per le sintassi, convenzioni e struttura di applicazioni AngularJS, allora questo fa per te. Gli stili sono basati sulla mia esperienza di sviluppo con [AngularJS](//angularjs.org), presentazioni, [corsi di formazioni di Pluralsight](http://pluralsight.com/training/Authors/Details/john-papa) e del lavoro in team. L'obbiettivo di questa guida stilistica è di fare da vademecum alla costruzione di applicazioni con Angular mostrando le convenzioni che uso e, più importante, perché le uso. @@ -22,7 +18,7 @@ Molti dei mie stili sono frutto di parecchie sessioni di pair programming che [W ## Guarda gli stili in una App di Esempio Nonostante questa guida spieghi i *cosa*, *come* e *perché*, trovo che sia di aiuto vederle in pratica. Questa guida è accompagnata da una applicazione di esempio che segue questi stili e schemi. Puoi trovare l'[applicazione di esempio (chiamata modular) qui](https://github.com/johnpapa/ng-demos) nella cartella `modular`. Prendila, clonala o fanne un fork liberamente. [Le istruzioni su come eseguirla sono nel proprio readme](https://github.com/johnpapa/ng-demos/tree/master/modular). -##Traduzioni +##Traduzioni [Traduzioni di questa guida stilistica ad Angular](https://github.com/johnpapa/angularjs-styleguide/tree/master/i18n) sono gestite dalla comunità e possono essere trovate qui. ## Tavola dei contenuti @@ -46,7 +42,7 @@ Nonostante questa guida spieghi i *cosa*, *come* e *perché*, trovo che sia di a 1. [Logica di Startup](#logica-di-startup) 1. [Wrapper dei Servizi $ di Angular](#wrapper-dei-servizi--di-angular) 1. [Test](#test) - 1. [Animazioni](#animazioni) + 1. [Animazioni](#animazioni) 1. [Commenti](#commenti) 1. [JSHint](#jshint) 1. [JSCS](#jscs) @@ -65,7 +61,7 @@ Nonostante questa guida spieghi i *cosa*, *come* e *perché*, trovo che sia di a ### Regola dell'1 ###### [Stile [Y001](#stile-y001)] - - Definire 1 componente per file. + - Definire 1 componente per file. Il seguente esempio definisce il modulo `app` e le proprie dipendenze, definisce un controller e definisce una factory tutto nel medesimo file. @@ -75,7 +71,7 @@ Nonostante questa guida spieghi i *cosa*, *come* e *perché*, trovo che sia di a .module('app', ['ngRoute']) .controller('SomeController', SomeController) .factory('someFactory', someFactory); - + function SomeController() { } function someFactory() { } @@ -85,7 +81,7 @@ Nonostante questa guida spieghi i *cosa*, *come* e *perché*, trovo che sia di a ```javascript /* consigliato */ - + // app.module.js angular .module('app', ['ngRoute']); @@ -93,7 +89,7 @@ Nonostante questa guida spieghi i *cosa*, *come* e *perché*, trovo che sia di a ```javascript /* consigliato */ - + // someController.js angular .module('app') @@ -104,12 +100,12 @@ Nonostante questa guida spieghi i *cosa*, *come* e *perché*, trovo che sia di a ```javascript /* consigliato */ - + // someFactory.js angular .module('app') .factory('someFactory', someFactory); - + function someFactory() { } ``` @@ -119,8 +115,8 @@ Nonostante questa guida spieghi i *cosa*, *come* e *perché*, trovo che sia di a ### Closures di JavaScript ###### [Stile [Y010](#stile-y010)] - - Racchiudi i componenti di Angular in una Immediately Invoked Function Expression (IIFE) (Espressione di funzione immediatamente chiamata). - + - Racchiudi i componenti di Angular in una Immediately Invoked Function Expression (IIFE) (Espressione di funzione immediatamente chiamata). + *Perché?*: Una IIFE rimuove le variabili dallo scope globale. Questo aiuta a prevenire che variabili e dichiarazioni di funzione vivano più del previsto nello scope globale, inoltre aiuta ad evitare la collisione di variabili. *Perché?*: Quando il tuo codice è minificato e raggruppato in un file singolo per il rilascio ad un server di produzione, potresti avere collisioni di variabili e parecchie variabili globali. Una IIFE ti protegge in entrambi i casi fornendo uno scope variabile per ogni file. @@ -131,7 +127,7 @@ Nonostante questa guida spieghi i *cosa*, *come* e *perché*, trovo che sia di a .module('app') .factory('logger', logger); - // La funzione logger è aggiunta come variabile globale + // La funzione logger è aggiunta come variabile globale function logger() { } // storage.js @@ -139,22 +135,22 @@ Nonostante questa guida spieghi i *cosa*, *come* e *perché*, trovo che sia di a .module('app') .factory('storage', storage); - // La funzione storage è aggiunta come variabile globale + // La funzione storage è aggiunta come variabile globale function storage() { } ``` - + ```javascript /** - * consigliato + * consigliato * - * non ci sono più variabili globali + * non ci sono più variabili globali */ // logger.js (function() { 'use strict'; - + angular .module('app') .factory('logger', logger); @@ -174,8 +170,8 @@ Nonostante questa guida spieghi i *cosa*, *come* e *perché*, trovo che sia di a })(); ``` - - Nota: Per essere più coincisi, il resto degli esempi in questa guida potrebbe omettere l'uso della sintassi IIFE. - + - Nota: Per essere più coincisi, il resto degli esempi in questa guida potrebbe omettere l'uso della sintassi IIFE. + - Nota: Le IIFE evitano che il codice di test possa raggiungere membri privati come regular expression o funzioni di supporto le quali sono spesso oggetto di propri unit test. In ogni caso, queste possono essere testate per mezzo di membri accessibili o attraverso l'esposizione di propri componenti. Per esempio ponendo funzioni di supporto, regular expression o costanti nelle proprie factory o costanti. **[Torna all'inizio](#tavola-dei-contenuti)** @@ -185,9 +181,9 @@ Nonostante questa guida spieghi i *cosa*, *come* e *perché*, trovo che sia di a ### Evitare la collisione di nomi ###### [Stile [Y020](#stile-y020)] - - Usa una convenzione unica per i nomi con separatori per sotto moduli. + - Usa una convenzione unica per i nomi con separatori per sotto moduli. - *Perché?*: Nomi unici aiutano ad evitare la collisione di nomi dei moduli. I separatori aiutano a definire gerarchie di moduli e dei propri sotto moduli. Per esempio `app` potrebbe essere il modulo principale mentre `app.dashboard` e `app.users` potrebbero essere moduli che sono usati come dipendenze di `app`. + *Perché?*: Nomi unici aiutano ad evitare la collisione di nomi dei moduli. I separatori aiutano a definire gerarchie di moduli e dei propri sotto moduli. Per esempio `app` potrebbe essere il modulo principale mentre `app.dashboard` e `app.users` potrebbero essere moduli che sono usati come dipendenze di `app`. ### Definizioni (altrimenti noti come Setter) ###### [Stile [Y021](#stile-y021)] @@ -195,7 +191,7 @@ Nonostante questa guida spieghi i *cosa*, *come* e *perché*, trovo che sia di a - Dichiara moduli senza una variabile usando la sintassi setter. *Perché?*: con 1 componente per file, raramente c'è la necessità di introdurre una variabile per il modulo. - + ```javascript /* evitare */ var app = angular.module('app', [ @@ -230,7 +226,7 @@ Invece usa la più semplice sintassi setter. /* evitare */ var app = angular.module('app'); app.controller('SomeController', SomeController); - + function SomeController() { } ``` @@ -239,7 +235,7 @@ Invece usa la più semplice sintassi setter. angular .module('app') .controller('SomeController', SomeController); - + function SomeController() { } ``` @@ -247,7 +243,7 @@ Invece usa la più semplice sintassi setter. ###### [Stile [Y023](#stile-y023)] - Setta solo una volta e prendi (get) per tutte le altre istanze. - + *Perché?*: Un modulo dovrebbe essere creato solamente una volta, quindi recuperato da lì in avanti. ```javascript @@ -302,9 +298,9 @@ Invece usa la più semplice sintassi setter. ### Sintassi controllerAs nella View ###### [Stile [Y030](#stile-y030)] - - Usa la sintassi [`controllerAs`](http://www.johnpapa.net/do-you-like-your-angular-controllers-with-or-without-sugar/) al posto della sintassi `classico controller con $scope`. + - Usa la sintassi [`controllerAs`](http://www.johnpapa.net/do-you-like-your-angular-controllers-with-or-without-sugar/) al posto della sintassi `classico controller con $scope`. - *Perché?*: I controller sono costruiti, creati con "new" e forniti con un nuova istanza singola, inoltre la sintassi `controllerAs` è più somigliante ad un costruttore JavaScript rispetto alla `sintassi classica con $scope`. + *Perché?*: I controller sono costruiti, creati con "new" e forniti con un nuova istanza singola, inoltre la sintassi `controllerAs` è più somigliante ad un costruttore JavaScript rispetto alla `sintassi classica con $scope`. *Perché?*: Promuove l'uso del binding ad un oggetto che "usa il punto" nella View (p.e. `customer.name` invece di `name`), il quale è più contestuale, più facile da leggere ed evita qualunque questione di riferimenti che potrebbe accadere senza "uso del punto". @@ -327,13 +323,13 @@ Invece usa la più semplice sintassi setter. ### Sintassi controllerAs nel Controller ###### [Stile [Y031](#stile-y031)] - - Usa la sintassi `controllerAs` al posto della sintassi `classico controller con $scope`. + - Usa la sintassi `controllerAs` al posto della sintassi `classico controller con $scope`. - La sintassi `controllerAs` usa `this` all'interno dei controller che fanno uso di `$scope` - *Perché?*: `controllerAs` è una semplificazione sintattica per `$scope`. Puoi ancora fare il binding con la View ed accedere ai metodi di `$scope`. + *Perché?*: `controllerAs` è una semplificazione sintattica per `$scope`. Puoi ancora fare il binding con la View ed accedere ai metodi di `$scope`. - *Perché?*: Aiuta ad evitare la tentazione ad usare i metodi di `$scope` dentro un controller quando sarebbe meglio evitare o spostarli in una factory. Considera l'uso di `$scope` in una factory o, se in un controller, soltanto quando necessario. Per esempio, quando si pubblicano o sottoscrivono eventi usando [`$emit`](https://docs.angularjs.org/api/ng/type/$rootScope.Scope#$emit), [`$broadcast`](https://docs.angularjs.org/api/ng/type/$rootScope.Scope#$broadcast), o [`$on`](https://docs.angularjs.org/api/ng/type/$rootScope.Scope#$on) considera di spostare questi tipi di utilizzi in una facotry e di invocarli da un controller. + *Perché?*: Aiuta ad evitare la tentazione ad usare i metodi di `$scope` dentro un controller quando sarebbe meglio evitare o spostarli in una factory. Considera l'uso di `$scope` in una factory o, se in un controller, soltanto quando necessario. Per esempio, quando si pubblicano o sottoscrivono eventi usando [`$emit`](https://docs.angularjs.org/api/ng/type/$rootScope.Scope#$emit), [`$broadcast`](https://docs.angularjs.org/api/ng/type/$rootScope.Scope#$broadcast), o [`$on`](https://docs.angularjs.org/api/ng/type/$rootScope.Scope#$on) considera di spostare questi tipi di utilizzi in una facotry e di invocarli da un controller. ```javascript /* evitare */ @@ -355,7 +351,7 @@ Invece usa la più semplice sintassi setter. ###### [Stile [Y032](#stile-y032)] - Usa una variabile che "catturi" `this` quando si utilizza la sintassi `controllerAs`. Scegli un nome della variabile consistente come `vm`, che sta per ViewModel. - + *Perché?*: La keyword `this` è contestuale e quando usata all'interno di una funzione dentro un controller può cambiare il proprio contesto. Catturare il contesto di `this` evita di incorrere in questo problema. ```javascript @@ -381,18 +377,18 @@ Invece usa la più semplice sintassi setter. /* jshint validthis: true */ var vm = this; ``` - + Nota: Quando di creano watch in un controller usando `controller as`, puoi fare il watch del membro `vm.*` usando la seguente sintassi. (Crea watch con cautela poiché aggiungono più carico al ciclo di digest.) ```html ``` - + ```javascript function SomeController($scope, $log) { var vm = this; vm.title = 'Some Title'; - + $scope.$watch('vm.title', function(current, original) { $log.info('vm.title was %s', original); $log.info('vm.title is now %s', current); @@ -404,10 +400,10 @@ Invece usa la più semplice sintassi setter. ###### [Stile [Y033](#stile-y033)] - Poni i membri che possono fare il bind in alto nel controller, in ordine alfabetico, piuttosto che dispersi in tutto il codice del controller. - + *Perché?*: Porre i membri che posso fare il bind in alto rende semplice la lettura e aiuta l'istantanea identificazione di quali membri del controller possono essere collegati ed usati in una View. - *Perché?*: Settare funzioni anonime nella medesima linea è semplice, tuttavia quando queste funzioni sono più lunghe di 1 linea di codice possono ridurre la leggibilità. Definire le funzione al di sotto i membri che possono fare il bind (funzioni che saranno chiamate) spostano i dettagli di implementazione in basso, tengono i membri che possono fare il bind in alto e rendono il codice più facile da leggere. + *Perché?*: Settare funzioni anonime nella medesima linea è semplice, tuttavia quando queste funzioni sono più lunghe di 1 linea di codice possono ridurre la leggibilità. Definire le funzione al di sotto i membri che possono fare il bind (funzioni che saranno chiamate) spostano i dettagli di implementazione in basso, tengono i membri che possono fare il bind in alto e rendono il codice più facile da leggere. ```javascript /* evitare */ @@ -464,8 +460,8 @@ Invece usa la più semplice sintassi setter. vm.gotoSession = gotoSession; vm.refresh = function() { - /** - * linee + /** + * linee * di * codice * che peggiorano @@ -493,20 +489,20 @@ Invece usa la più semplice sintassi setter. ###### [Stile [Y034](#stile-y034)] - Usa le dichiarazioni di funzione per nascondere i dettagli di implementazione. Tieni i membri che possono fare il binding in alto. Quando necessiti di fare binding a una funzione nel controller, puntalo ad una dichiarazione di funzione che compaia dopo nel file. Questo è direttamente collegabile con la sezione Membri che possono fare il bind posti in alto. Per ulteriori dettagli guarda [questo post](http://www.johnpapa.net/angular-function-declarations-function-expressions-and-readable-code) (in inglese). - + *Perché?*: Porre i membri che possono fare il binding in alto rende semplice la lettura ed aiuta l'immediata identificazione dei membri del controller che possono fare il binding ed usati nella View. (Come sopra.) *Perché?*: Porre i dettagli di implementazione di una funzione in seguito nel file sposta la complessità fuori dalla vista così che puoi vedere le cose importanti in alto. *Perché?*: Dichiarazioni di funzioni che sono chiamate così che non c'è rischio dell'uso di una funzione prima che sia definita (come sarebbe in caso di espressioni di funzione). - *Perché?*: Non ti devi preoccupare di dichiarazioni di funzione che sposta `var a` prima di `var b` romperà il codice perché `a` dipende da `b`. + *Perché?*: Non ti devi preoccupare di dichiarazioni di funzione che sposta `var a` prima di `var b` romperà il codice perché `a` dipende da `b`. - *Perché?*: Con le espressioni di funzione l'ordine è critico. + *Perché?*: Con le espressioni di funzione l'ordine è critico. ```javascript - /** - * evitare + /** + * evitare * Uso di espressioni di funzione. */ function Avengers(avengersService, logger) { @@ -615,7 +611,7 @@ Invece usa la più semplice sintassi setter. vm.isCreditOk; vm.total = 0; - function checkCredit() { + function checkCredit() { return creditService.isOrderTotalOk(vm.total) .then(function(isOk) { vm.isCreditOk = isOk; }) .catch(showError); @@ -626,16 +622,16 @@ Invece usa la più semplice sintassi setter. ### Tenere i controller "a fuoco" ###### [Stile [Y037](#stile-y037)] - - Definisci un controller per vista e prova a non riutilizzare il controller per altre view. Piuttosto, sposta la logica riutilizzabile alle factory e mantieni il controller semplice ed a fuoco sulla propria view. - + - Definisci un controller per vista e prova a non riutilizzare il controller per altre view. Piuttosto, sposta la logica riutilizzabile alle factory e mantieni il controller semplice ed a fuoco sulla propria view. + *Perché?*: Riutilizzare i controller con diverse view è precario e sono necessari dei buoni test end-to-end (e2e) per assicurarne la stabilità in applicazioni su larga scala. ### Assegnazione dei Controller ###### [Stile [Y038](#stile-y038)] - - Quando un controller deve essere accoppiato ad una view ed un componente può essere riutilizzato da altri controller o view, definisci i controller insieme alle loro route. + - Quando un controller deve essere accoppiato ad una view ed un componente può essere riutilizzato da altri controller o view, definisci i controller insieme alle loro route. - Nota: Se una View è caricata attraverso altri mezzi che una route, allora usa la sintassi `ng-controller="AvengersController as avengers"`. + Nota: Se una View è caricata attraverso altri mezzi che una route, allora usa la sintassi `ng-controller="AvengersController as avengers"`. *Perché?*: Accoppiare il controller in una route consente a route diverse di invocare diversi accoppiamenti di controller e view. Quando i controller sono assegnati in una view usando [`ng-controller`](https://docs.angularjs.org/api/ng/directive/ngController) quella view sarà sempre associata al medesimo controller. @@ -692,8 +688,8 @@ Invece usa la più semplice sintassi setter. ### Singleton ###### [Stile [Y040](#stile-y040)] - - I Service sono istanziati con la keyword `new`, usa `this` per metodi e variabili pubbliche. Dal momento che sono molto simili alle factory, usa queste ultime per consistenza. - + - I Service sono istanziati con la keyword `new`, usa `this` per metodi e variabili pubbliche. Dal momento che sono molto simili alle factory, usa queste ultime per consistenza. + Nota: [Tutti i servizi di Angular sono singleton](https://docs.angularjs.org/guide/services). Questo significa che c'è soltanto una istanza di un dato servizio per iniettore. ```javascript @@ -728,7 +724,7 @@ Invece usa la più semplice sintassi setter. ## Factory -### Singola responsabilità +### Singola responsabilità ###### [Stile [Y050](#stile-y050)] - Le factory dovrebbero avere la [singola responsabilità](http://en.wikipedia.org/wiki/Single_responsibility_principle) che è incapsulata nel proprio contesto. Una volta che una factory eccede quello che è un singolo scopo, dovrebbe essere creata una nuova factory. @@ -737,15 +733,15 @@ Invece usa la più semplice sintassi setter. ###### [Stile [Y051](#stile-y051)] - Le factory sono singleton e ritornano un oggetto che contiene i membri del servizio. - + Nota: [Tutti i servizi di Angular sono singleton](https://docs.angularjs.org/guide/services). ### Membri accessibili in alto ###### [Stile [Y052](#stile-y052)] - - Esponi tutti i membri richiamabili del servizio (l'interfaccia) in alto, usando una tecnica derivata dal [Revealing Module Pattern](http://addyosmani.com/resources/essentialjsdesignpatterns/book/#revealingmodulepatternjavascript). + - Esponi tutti i membri richiamabili del servizio (l'interfaccia) in alto, usando una tecnica derivata dal [Revealing Module Pattern](http://addyosmani.com/resources/essentialjsdesignpatterns/book/#revealingmodulepatternjavascript). - *Perché?*: Porre i membri richiamabili in alto lo rende semplice da leggere e aiuta ad identificare istantaneamente quali membri del servizio possono essere chiamati ed essere oggetto di unit test (e/o simulati). + *Perché?*: Porre i membri richiamabili in alto lo rende semplice da leggere e aiuta ad identificare istantaneamente quali membri del servizio possono essere chiamati ed essere oggetto di unit test (e/o simulati). *Perché?*: Questo è particolarmente utile quando i file iniziano ad allungarsi così da evitare la necessità di scorrere per leggere cosa è esposto. @@ -755,10 +751,10 @@ Invece usa la più semplice sintassi setter. /* evitare */ function dataService() { var someValue = ''; - function save() { + function save() { /* */ }; - function validate() { + function validate() { /* */ }; @@ -783,11 +779,11 @@ Invece usa la più semplice sintassi setter. //////////// - function save() { + function save() { /* */ }; - function validate() { + function validate() { /* */ }; } @@ -803,15 +799,15 @@ Invece usa la più semplice sintassi setter. - Usa le dichiarazioni di funzioni per nascondere i dettagli di implementazione. Tieni i membri accessibili della factory in alto. Puntali alle dichiarazioni di funzioni che compaiono dopo nel file. Per ulteriori dettagli guarda [questo post](http://www.johnpapa.net/angular-function-declarations-function-expressions-and-readable-code) (in inglese). - *Perché?*: Porre i membri richiamabili in alto la rende semplice da leggere e aiuta ad identificare istantaneamente quali funzioni della factory possono accessibili esternamente. + *Perché?*: Porre i membri richiamabili in alto la rende semplice da leggere e aiuta ad identificare istantaneamente quali funzioni della factory possono accessibili esternamente. *Perché?*: Porre i dettagli di implementazione di una funzione dopo nel file sposta la complessità fuori dalla vista così che puoi vedere le cose importanti prima. *Perché?*: Le dichiarazioni di funzione sono richiamate così da non avere preoccupazioni circa l'uso di una funzione prima della sua definizione (come sarebbe nel caso di espressioni di funzione). - *Perché?*: Non dovrai mai preoccuparti di dichiarazioni di funzione che spostano `var a` prima di `var b` rompendo il codice perché `a` dipende da `b`. + *Perché?*: Non dovrai mai preoccuparti di dichiarazioni di funzione che spostano `var a` prima di `var b` rompendo il codice perché `a` dipende da `b`. - *Perché?*: Con le espressioni di funzione l'ordine è critico. + *Perché?*: Con le espressioni di funzione l'ordine è critico. ```javascript /** @@ -915,7 +911,7 @@ Invece usa la più semplice sintassi setter. ```javascript /* consigliato */ - // factory del servizio ai dati + // factory del servizio ai dati angular .module('app.core') .factory('dataservice', dataservice); @@ -942,7 +938,7 @@ Invece usa la più semplice sintassi setter. } } ``` - + Nota: Il servizio ai dati è chiamato dai consumatori, come un controller, nascondendo l'implementazione ai consumatori, come mostrato sotto. ```javascript @@ -974,7 +970,7 @@ Invece usa la più semplice sintassi setter. return vm.avengers; }); } - } + } ``` ### Ritornare una promessa dalle chiamate ai dati @@ -1028,12 +1024,12 @@ Invece usa la più semplice sintassi setter. ### Limita 1 per file ###### [Stile [Y070](#stile-y070)] - - Crea una directive per file. Nomina il file per la directive. + - Crea una directive per file. Nomina il file per la directive. - *Perché?*: È facile mescolare tutte le directive in un unico file ma difficoltoso da separare così che alcune siano condivise tra le applicazioni, alcune tra moduli, altre solo per un module. + *Perché?*: È facile mescolare tutte le directive in un unico file ma difficoltoso da separare così che alcune siano condivise tra le applicazioni, alcune tra moduli, altre solo per un module. *Perché?*: Una directive per file è semplice da manutenere. - + > Nota: "**Best Practice**: Le directive dovrebbero fare pulizia alla fine. Puoi usare `element.on('$destroy', ...)` oppure `scope.$on('$destroy', ...)` per lanciare una funzione di pulizia quando la directive è rimossa" ... dalla documentazione di Angular. ```javascript @@ -1090,7 +1086,7 @@ Invece usa la più semplice sintassi setter. /** * @desc directive delle vendite che può essere usato dovunque nella applicazione di vendita di una azienda di nome Acme * @example
- */ + */ angular .module('sales.widgets') .directive('acmeSalesCustomerInfo', salesCustomerInfo); @@ -1122,7 +1118,7 @@ Invece usa la più semplice sintassi setter. ### Manipolare il DOM in una Directive ###### [Stile [Y072](#stile-y072)] - - Quando devi manipolare direttamente il DOM, usa una directive. Se possono essere usate delle alternative come usare CSS per settare stili o i [servizi di animazione](https://docs.angularjs.org/api/ngAnimate), templating di Angular, [`ngShow`](https://docs.angularjs.org/api/ng/directive/ngShow) oppure [`ngHide`](https://docs.angularjs.org/api/ng/directive/ngHide), allora usa questi. Per esempio, se la directive deve semplicemente nascondere e mostrare, usa ngHide/ngShow. + - Quando devi manipolare direttamente il DOM, usa una directive. Se possono essere usate delle alternative come usare CSS per settare stili o i [servizi di animazione](https://docs.angularjs.org/api/ngAnimate), templating di Angular, [`ngShow`](https://docs.angularjs.org/api/ng/directive/ngShow) oppure [`ngHide`](https://docs.angularjs.org/api/ng/directive/ngHide), allora usa questi. Per esempio, se la directive deve semplicemente nascondere e mostrare, usa ngHide/ngShow. *Perché?*: Manipolare il DOM può essere difficoltoso da testare, debuggare e spesso ci sono modi migliori (p.e. CSS, animazioni, template) @@ -1131,9 +1127,9 @@ Invece usa la più semplice sintassi setter. - Utilizza un corto, unico e descrittivo prefisso alla directive come `acmeSalesCustomerInfo` che potrebbe essere dichiarato in HTML come `acme-sales-customer-info`. - *Perché?*: L'unico breve prefisso identifica il contesto delle directive e l'origine. Per esempio un prefisso `cc-` potrebbe indicare che la directive è parte di una app CodeCamper mentre `acme-` potrebbe indicare una direttiva per l'azienda Acme. - - Nota: Evita `ng-` poiché queste sono riservate per le directive di Angular. Cerca directive che sono largamente utilizzate per evitare il conflitto di nomi, come `ion-` per il [Framework Ionic ](http://ionicframework.com/). + *Perché?*: L'unico breve prefisso identifica il contesto delle directive e l'origine. Per esempio un prefisso `cc-` potrebbe indicare che la directive è parte di una app CodeCamper mentre `acme-` potrebbe indicare una direttiva per l'azienda Acme. + + Nota: Evita `ng-` poiché queste sono riservate per le directive di Angular. Cerca directive che sono largamente utilizzate per evitare il conflitto di nomi, come `ion-` per il [Framework Ionic ](http://ionicframework.com/). ### Restringi a Elementi and Attributi ###### [Stile [Y074](#stile-y074)] @@ -1176,7 +1172,7 @@ Invece usa la più semplice sintassi setter.
``` - + ```javascript /* consigliato */ angular @@ -1204,9 +1200,9 @@ Invece usa la più semplice sintassi setter. *Perché?*: È sensato e non è difficile. - Nota: La directive sotto dimostra alcuni dei modi in cui puoi usare lo scope all'interno di link e controller di directive usando controllerAs. Ho usato sulla stessa linea il template solo per mettere tutto in un unico posto. + Nota: La directive sotto dimostra alcuni dei modi in cui puoi usare lo scope all'interno di link e controller di directive usando controllerAs. Ho usato sulla stessa linea il template solo per mettere tutto in un unico posto. - Nota: In relazione alla dependency injection, guarda [Annotazioni manuali per la Dependency Injection](#annotazioni-manuali-per-la-dependency-injection). + Nota: In relazione alla dependency injection, guarda [Annotazioni manuali per la Dependency Injection](#annotazioni-manuali-per-la-dependency-injection). Nota: Notare che il controller della directive è al di fuori della closure della directive. Questo stile elimina problematiche dove l'iniezione viene creata come codice non raggiungibile dopo un `return`. @@ -1240,15 +1236,15 @@ Invece usa la più semplice sintassi setter. console.log('LINK: scope.vm.max = %s', scope.vm.max); } } - + ExampleController.$inject = ['$scope']; - + function ExampleController($scope) { // Iniettare $scope solo per confronto var vm = this; vm.min = 3; - + console.log('CTRL: $scope.vm.min = %s', $scope.vm.min); console.log('CTRL: $scope.vm.max = %s', $scope.vm.max); console.log('CTRL: vm.min = %s', vm.min); @@ -1264,7 +1260,7 @@ Invece usa la più semplice sintassi setter. ``` Nota: Puoi inoltre nominare il controller quando lo inietti nella link function e accedi agli attributi della directive come proprietà del controller. - + ```javascript // Alternativa all'esempio sopra riportato function linkFunc(scope, el, attr, vm) { @@ -1280,7 +1276,7 @@ Invece usa la più semplice sintassi setter. *Perché?*: Rende semplice il bind tra lo scope esterno e lo scope del controller delle directive. - Nota: `bindToController` è stato introdotto con Angular 1.3.0. + Nota: `bindToController` è stato introdotto con Angular 1.3.0. ```html
@@ -1328,13 +1324,13 @@ Invece usa la più semplice sintassi setter. ###### [Stile [Y080](#stile-y080)] - Risolvi la logica di start-up per un controller in una funzione `activate`. - + *Perché?*: Porre la logica di start-up in una posizione consistente nel controller la rende semplice da localizzare, più consistente da testare e aiuta a prevenire la diffusione della logica di attivazione su tutto il controller. *Perché?*: La funzione `activate` del controller rende il riuso della logica adatto in caso di un refresh del controller/view, tiene la logica assieme, porta l'utente alla view più rapidamente, rende le animazini più facili su `ng-view` o `ui-view`e da la sensazione all'utente di istantaneità. - + Nota: Se hai necessità di annullare condizionalmente il route prima di iniziare ad usare il controller, usa piuttosto una [risoluzione nella route](#stile-y081). - + ```javascript /* evitare */ function Avengers(dataservice) { @@ -1432,7 +1428,7 @@ Invece usa la più semplice sintassi setter. vm.movies = moviesPrepService.movies; } ``` - + Nota: L'esempio sotto mostra il punto di risoluzione della route in una funzione con il nome per cui è più semplice da fare il debug e più semplice da gestire nella iniezione delle dependenze. ```javascript @@ -1480,7 +1476,7 @@ Invece usa la più semplice sintassi setter. ###### [Stile [Y090](#stile-y090)] - Evita di usare abbreviazioni sintattiche per la dichiarazione di dipendenze senza usare un approccio a prova di minificazione. - + *Perché?*: I parametri dei componenti (p.e. controller, factory, etc.) saranno convertiti in variabili dal nome ridotto. Per esempio, `common` e `dataservice` potrebbero diventare `a` o `b` e non essere piò ritrovate da Angular. ```javascript @@ -1504,30 +1500,30 @@ Invece usa la più semplice sintassi setter. ###### [Stile [Y091](#stile-y091)] - Usa `$inject` per identificare manualmente le tue dipendenze per i componenti di Angular. - + *Perché?*: Questa tecnica rispecchia la tecnica usata da [`ng-annotate`](https://github.com/olov/ng-annotate), che raccomando per l'automazione della creazione della minificazione sicura delle dipendenze. Se `ng-annotate` rileva che una iniezione è stata fatta, non la duplicherà. *Perché?*: Questo salvaguarda le tue dipendenze dall'essere vulnerabili alla questione della minificazione quando i parametri possono essere passati con nomi ridotti. Per esempio, `common` e `dataservice` possono diventare `a` o `b` e non essere più trovati da Angular. - *Perché?*: Evita la creazione di dipendenze sulla stessa linea dal momento che lunghe liste possono essere difficili da leggere nell'array. Inoltre può essere fuorviante che l'array è una serie di stringhe mentre l'ultimo elemento è la funzione del componente. + *Perché?*: Evita la creazione di dipendenze sulla stessa linea dal momento che lunghe liste possono essere difficili da leggere nell'array. Inoltre può essere fuorviante che l'array è una serie di stringhe mentre l'ultimo elemento è la funzione del componente. ```javascript /* evitare */ angular .module('app') - .controller('Dashboard', - ['$location', '$routeParams', 'common', 'dataservice', + .controller('Dashboard', + ['$location', '$routeParams', 'common', 'dataservice', function Dashboard($location, $routeParams, common, dataservice) {} - ]); + ]); ``` ```javascript /* evitare */ angular .module('app') - .controller('Dashboard', + .controller('Dashboard', ['$location', '$routeParams', 'common', 'dataservice', Dashboard]); - + function Dashboard($location, $routeParams, common, dataservice) { } ``` @@ -1539,7 +1535,7 @@ Invece usa la più semplice sintassi setter. .controller('Dashboard', Dashboard); Dashboard.$inject = ['$location', '$routeParams', 'common', 'dataservice']; - + function Dashboard($location, $routeParams, common, dataservice) { } ``` @@ -1582,7 +1578,7 @@ Invece usa la più semplice sintassi setter. ###### [Stile [Y092](#stile-y092)] - Usa `$inject` per identificare manualmente le tue dipendenze di resolver della route per i componenti di Angular. - + *Perché?*: Questa tecnica evade le funzioni anonime per il resolver della route, rendendolo più semplice da leggere. *Perché?*: Una dichiarazione `$inject` può facilmente precedere il resolver per gestire la produzione di dipendenze che siano a prova di minificazione. @@ -1615,10 +1611,10 @@ Invece usa la più semplice sintassi setter. ###### [Stile [Y100](#stile-y100)] - Usa [ng-annotate](//github.com/olov/ng-annotate) per [Gulp](http://gulpjs.com) o [Grunt](http://gruntjs.com) e commenta le funzioni che necessitano di automatizzare la dependency injection usando `/** @ngInject */` - + *Perché?*: Questo salvaguarda il tuo codice da ogni dipendenza che non segua le pratiche a prova di minificazione - *Perché?*: [`ng-min`](https://github.com/btford/ngmin) è deprecato. + *Perché?*: [`ng-min`](https://github.com/btford/ngmin) è deprecato. >Preferisco Gulp poiché lo ritengo più semplice da scrivere, leggere e fare il debug. @@ -1692,7 +1688,7 @@ Invece usa la più semplice sintassi setter. ###### [Stile [Y101](#stile-y101)] - Usa [gulp-ng-annotate](https://www.npmjs.org/package/gulp-ng-annotate) o [grunt-ng-annotate](https://www.npmjs.org/package/grunt-ng-annotate) in un task di automatizzazione delle build. Inietta `/* @ngInject */` prima di qualunque funzione che abbia delle dipendenze. - + *Perché?*: ng-annotate carpirà la maggior parte delle dipendenze ma talvolta necessita dell'uso del suggerimento sintattico `/* @ngInject */`. Il seguente codice è un esempio di un task di gulp che utilizza ngAnnotate. @@ -1700,7 +1696,7 @@ Invece usa la più semplice sintassi setter. ```javascript gulp.task('js', ['jshint'], function() { var source = pkg.paths.js; - + return gulp.src(source) .pipe(sourcemaps.init()) .pipe(concat('all.min.js', {newLine: ';'})) @@ -1727,7 +1723,7 @@ Invece usa la più semplice sintassi setter. ###### [Stile [Y110](#stile-y110)] - Usa un [decorator](https://docs.angularjs.org/api/auto/service/$provide#decorator), al momento del config usando il servizio [`$provide`](https://docs.angularjs.org/api/auto/service/$provide), sul servizio [`$exceptionHandler`](https://docs.angularjs.org/api/ng/service/$exceptionHandler) per eseguire azioni ad hoc quando l'eccezione occorre. - + *Perché?*: Fornisce un modo consistente per la gestione delle eccezioni non trattate da Angular sia durante lo sviluppo che a runtime. Nota: Un'altra opzione è di fare l'override del servizio invece che usare un decorator. Questa è una buona opzione ma se vuoi tenere il comportamento di default ed estenderlo un decorator è consigliato. @@ -1749,9 +1745,9 @@ Invece usa la più semplice sintassi setter. function extendExceptionHandler($delegate, toastr) { return function(exception, cause) { $delegate(exception, cause); - var errorData = { - exception: exception, - cause: cause + var errorData = { + exception: exception, + cause: cause }; /** * Potresti aggiungere l'errore ad una collezione del servizio, @@ -1807,7 +1803,7 @@ Invece usa la più semplice sintassi setter. ```javascript /* consigliato */ var handlingRouteChangeError = false; - + function handleRoutingErrors() { /** * Annullamento del route: @@ -1829,7 +1825,7 @@ Invece usa la più semplice sintassi setter. * (Non dimenticare di iniettare il servizio ad hoc) */ logger.warning(msg, [current]); - + /** * Su un errore di routing, vai ad un'altra route/stato. */ @@ -1849,10 +1845,10 @@ Invece usa la più semplice sintassi setter. - Usa nomi consistenti per tutti i componenti seguendo uno schema che descriva le funzionalità dei componenti e poi (a scelta) il suo tipo. Lo schema che consiglio è `feature.type.js`. Ci sono 2 nomi per la maggior parte dei componenti: * il nome del file (`avengers.controller.js`) * il nome del componente registrato con Angular (`AvengersController`) - + *Perché?*: Convezioni sui nomi aiutano a fornire un modo consistente per trovate i contenuti a colpo d'occhio. Essere consistenti in un progetto è vitale. Essere consistenti in un team è importante. Essere consistenti nell'insieme di un'azienda è tremendamente efficiente. - *Perché?*: Le convezioni sulla nomenclatura dovrebbe semplicemente aiutare a trovare il tuo codice più rapidamente e renderlo più semplice da comprendere. + *Perché?*: Le convezioni sulla nomenclatura dovrebbe semplicemente aiutare a trovare il tuo codice più rapidamente e renderlo più semplice da comprendere. ### Nomi dei file per funzionalità ###### [Stile [Y121](#stile-y121)] @@ -1865,7 +1861,7 @@ Invece usa la più semplice sintassi setter. ```javascript /** - * opzioni comuni + * opzioni comuni */ // Controllers @@ -1894,7 +1890,7 @@ Invece usa la più semplice sintassi setter. // constants constants.js - + // module definition avengers.module.js @@ -1904,7 +1900,7 @@ Invece usa la più semplice sintassi setter. // configuration avengers.config.js - + // directives avenger-profile.directive.js avenger-profile.directive.spec.js @@ -1924,7 +1920,7 @@ Invece usa la più semplice sintassi setter. ### Nomi dei file di test ###### [Stile [Y122](#stile-y122)] - - Nomina le specifiche dei test in modo similare al componente che testano aggiundendo il suffisso `spec`. + - Nomina le specifiche dei test in modo similare al componente che testano aggiundendo il suffisso `spec`. *Perché?*: Fornisce un modo consistente per identificare facilmente i componenti. @@ -1961,7 +1957,7 @@ Invece usa la più semplice sintassi setter. function HeroAvengers(){ } ``` - + ### Suffisso nel nome di un controller ###### [Stile [Y124](#stile-y124)] @@ -1988,11 +1984,11 @@ Invece usa la più semplice sintassi setter. - Usa una nomenclatura consistente per tutte le factory e i service dando i nomi a seguito delle loro funzionalità. Usa il camel-case per service e factory. Evita di pre-nominare factory e service con `$`. Aggiungi il suffisso `Service` a service e factory soltanto quando non è chiaro cosa siano (p. es. quando si tratta di nomi). *Perché?*: Fornisce un modo consistente per identificare facilmente e referenziare le factory. - + *Perché?*: Evita collisione di nomi con factory e servizi di Angular esistenti che usano il prefisso `$`. - + *Perché?*: Service con nomi evidenti quali `logger` on richiedono il suffisso. - + *Perché?*: Nomi di service quali `avengers` sono nomi, richiedono in suffisso e dovrebbero essere nominati `avengersService`. ```javascript @@ -2027,7 +2023,7 @@ Invece usa la più semplice sintassi setter. function customersService() { } ``` - + ### Nomi dei componenti directive ###### [Stile [Y126](#stile-y126)] @@ -2040,7 +2036,7 @@ Invece usa la più semplice sintassi setter. * consigliato */ - // avenger-profile.directive.js + // avenger-profile.directive.js angular .module .directive('xxAvengerProfile', xxAvengerProfile); @@ -2079,12 +2075,12 @@ Invece usa la più semplice sintassi setter. ### LIFT ###### [Stile [Y140](#stile-y140)] - - Struttura la tua app tale da poter `L`ocate (localizzare) il codice facilmente, `I`dentify (identificare) il codice a colpo d'occhio, tenere la struttura più `F`lattest (piatta) che puoi, e `T`ry (provare) a rimanere DRY (Don't Repeat Yourself - Non ripetersi). La struttura dovrebbe seguire queste 4 linee guida basilari. + - Struttura la tua app tale da poter `L`ocate (localizzare) il codice facilmente, `I`dentify (identificare) il codice a colpo d'occhio, tenere la struttura più `F`lattest (piatta) che puoi, e `T`ry (provare) a rimanere DRY (Don't Repeat Yourself - Non ripetersi). La struttura dovrebbe seguire queste 4 linee guida basilari. *Perché LIFT?*: Fornisce una struttura consistente che scala bene, è modulare e rende più semplice aumentare l'efficienza dello sviluppatore nel trovare facilmente il codice. Un altro modo per verificare la struttura della tua app è chiederti: Quanto rapidamente puoi aprire e lavorare ad una funzionalità in tutti i file che sono collegati? Quando ritengo che la mia struttura non sia confortevole, torno indietro a rivedere le linee guida LIFT - + 1. `L`ocalizzare il nostro codice con facilità 2. `I`dentificare il codice a colpo d'occhio 3. `F`lat (pitta) struttura quanto più possibile @@ -2135,7 +2131,7 @@ Invece usa la più semplice sintassi setter. - Si DRY, ma non diventare pazzo e sacrificare la leggibilità. - *Perché?*: Non ripetersi è importante ma non è cruciale se sacrifica altri principi LIFT, per questo il principio è Try (provare) DRY. Non voglio digitare session-view.html perché è ovvio essere una view. Se non è ovvio o se per convenzione allora nominala così. + *Perché?*: Non ripetersi è importante ma non è cruciale se sacrifica altri principi LIFT, per questo il principio è Try (provare) DRY. Non voglio digitare session-view.html perché è ovvio essere una view. Se non è ovvio o se per convenzione allora nominala così. **[Torna all'inizio](#tavola-dei-contenuti)** @@ -2151,7 +2147,7 @@ Invece usa la più semplice sintassi setter. ### Layout ###### [Stile [Y151](#stile-y151)] - - Metti i componenti che definiscono il layout globale dell'applicazione in una cartella con il nome `layout`. Questi possono includere un shell view e controller che agiscono come contenitori per l'app, navigazione, menù, aree per i contenuti ed altre regioni. + - Metti i componenti che definiscono il layout globale dell'applicazione in una cartella con il nome `layout`. Questi possono includere un shell view e controller che agiscono come contenitori per l'app, navigazione, menù, aree per i contenuti ed altre regioni. *Perché?*: Organizza tutto il layout in una sola posizione riutilizzabile lungo tutta l'applicazione. @@ -2177,33 +2173,33 @@ Invece usa la più semplice sintassi setter. app.module.js app.config.js app.routes.js - components/ - calendar.directive.js - calendar.directive.html - user-profile.directive.js - user-profile.directive.html + components/ + calendar.directive.js + calendar.directive.html + user-profile.directive.js + user-profile.directive.html layout/ - shell.html + shell.html shell.controller.js - topnav.html - topnav.controller.js + topnav.html + topnav.controller.js people/ attendees.html - attendees.controller.js + attendees.controller.js speakers.html speakers.controller.js speaker-detail.html speaker-detail.controller.js - services/ - data.service.js + services/ + data.service.js localstorage.service.js - logger.service.js + logger.service.js spinner.service.js sessions/ - sessions.html + sessions.html sessions.controller.js session-detail.html - session-detail.controller.js + session-detail.controller.js ``` ![Struttura dell'App di Esempio](https://raw.githubusercontent.com/johnpapa/angularjs-styleguide/master/assets/modularity-2.png) @@ -2211,44 +2207,44 @@ Invece usa la più semplice sintassi setter. Nota: Non usare una strutturazione del tipo cartella-per-tipo per la tua app. Questo richiede spostarsi tra molte cartelle quando si lavora su una funzionalità e diventa rapidamente scomodo quando l'app cresce di 5, 10 o più di 25 tra view e controller (ed altre funzionalità), per cui è più difficile rispetto alla localizzazione basata su cartella-per-funzionalità. ```javascript - /* + /* * evitare * Alternativa cartella-per-tipo * Consiglio invece "cartella-per-funzionalità". */ - + app/ app.module.js app.config.js app.routes.js directives.js controllers/ - attendees.js - session-detail.js - sessions.js - shell.js - speakers.js - speaker-detail.js - topnav.js - directives/ - calendar.directive.js - calendar.directive.html - user-profile.directive.js - user-profile.directive.html - services/ - dataservice.js + attendees.js + session-detail.js + sessions.js + shell.js + speakers.js + speaker-detail.js + topnav.js + directives/ + calendar.directive.js + calendar.directive.html + user-profile.directive.js + user-profile.directive.html + services/ + dataservice.js localstorage.js - logger.js + logger.js spinner.js views/ - attendees.html + attendees.html session-detail.html - sessions.html - shell.html - speakers.html + sessions.html + shell.html + speakers.html speaker-detail.html - topnav.html - ``` + topnav.html + ``` **[Torna all'inizio](#tavola-dei-contenuti)** @@ -2274,7 +2270,7 @@ Invece usa la più semplice sintassi setter. - Nel modulo principale metti solo la logica che serva da collante per l'app. Lascia le funzionalità ognuna al proprio modulo. *Perché?*: L'aggiunta di ruoli addizionali al modulo principale per il recupero dei dati, il mostrare viste o altra logica non correlata al tenere insieme l'applicazione sporca il modulo principale e rende entrambi gli insiemi di funzionalità più complessi da riusare o rimuovere. - + *Perché?*: Il modulo app diventa un manifesto che descrive quali moduli aiutano a definire l'applicazione. ### Aree di funzionalità sono Moduli @@ -2286,7 +2282,7 @@ Invece usa la più semplice sintassi setter. *Perché?*: Sprint o iterazioni possono focalizzarsi sulle aree di funzionalità e renderle disponibili alla fine dello sprint o dell'iterazione. - *Perché?*: Separare aree di funzioni in moduli rende più semplice testare i moduli in isolamento e il riutilizzo del codice. + *Perché?*: Separare aree di funzioni in moduli rende più semplice testare i moduli in isolamento e il riutilizzo del codice. ### Blocchi riutilizzabili sono Moduli ###### [Stile [Y164](#stile-y164)] @@ -2302,7 +2298,7 @@ Invece usa la più semplice sintassi setter. ![Modularità e Dipendenze](https://raw.githubusercontent.com/johnpapa/angularjs-styleguide/master/assets/modularity-1.png) - *Perché?*: Il modulo principale dell'app contiene un manifesto che sia facilmente identificabile con le funzionalità dell'applicazione. + *Perché?*: Il modulo principale dell'app contiene un manifesto che sia facilmente identificabile con le funzionalità dell'applicazione. *Perché?*: Ogni area di funzionalità contiene un manifesto di ciò da cui dipende, in modo tale da poter essere usato come dipendenza in altre applicazioni e continuare a funzionare. @@ -2310,8 +2306,8 @@ Invece usa la più semplice sintassi setter. Nota: Questa è una strategia per la consistenza. Ci sono diverse buone opzioni in questo caso. Scegline una che sia consistente, segua le regole delle dipendenze di Angular e sia facile da manutenere e scalare. - > La mia struttura varia leggermente tra progetti ma tutti seguono queste linee guida per la strutturazione e modularità. L'implementazione può variare in relazione alle funzionalità ed al team. In altre parole, non ti bloccare su una struttura che sia esattamente uguale ma giustifica la tua struttura tenendo a mente l'uso di consistenza, manutenibilità ed efficienza. - + > La mia struttura varia leggermente tra progetti ma tutti seguono queste linee guida per la strutturazione e modularità. L'implementazione può variare in relazione alle funzionalità ed al team. In altre parole, non ti bloccare su una struttura che sia esattamente uguale ma giustifica la tua struttura tenendo a mente l'uso di consistenza, manutenibilità ed efficienza. + > In una applicazione piccola, si può considerare di mettere tutte le dipendenze condivise nel modulo dell'app dove i moduli delle funzionalità non hanno dipendenze dirette. Ciò rende semplice mantenere l'applicazione più piccola ma rende più difficile riutilizzare i moduli fuori dell'applicazione stessa. **[Torna all'inizio](#tavola-dei-contenuti)** @@ -2330,7 +2326,7 @@ Invece usa la più semplice sintassi setter. .module('app') .config(configure); - configure.$inject = + configure.$inject = ['routerHelperProvider', 'exceptionHandlerProvider', 'toastr']; function configure (routerHelperProvider, exceptionHandlerProvider, toastr) { @@ -2502,18 +2498,18 @@ Gli unit test aiutano a mantenere il codice più chiaro, perciò ho incluso alcu - Usa [PhantomJS](http://phantomjs.org/) per eseguire i test su un server. - *Perché?*: PhantomJS è un headless browser (browser senza interfaccia grafica) che aiuta l'esecuzione di test senza la necessità di un browser "visuale". Quindi non devi installare Chrome, Safari, IE o altri browser sul server. + *Perché?*: PhantomJS è un headless browser (browser senza interfaccia grafica) che aiuta l'esecuzione di test senza la necessità di un browser "visuale". Quindi non devi installare Chrome, Safari, IE o altri browser sul server. Nota: Dovresti in ogni caso testare tutti i browser nel tuo ambiente, come appropriato per il pubblico che ne è il target. ### Analisi del codice ###### [Stile [Y195](#stile-y195)] - - Esegui JSHint sui tuoi test. + - Esegui JSHint sui tuoi test. *Perché?*: I test sono codice. JSHint può aiutare ad identificare problemi di qualità del codice che causano l’improprio funzionamento del test. -### Alleviare le regole sulle variabili globali di JSHint per i test +### Alleviare le regole sulle variabili globali di JSHint per i test ###### [Stile [Y196](#stile-y196)] - Rilassa le regole sul codice dei test per consentire variabili globali comuni quali `describe` ed `expect`. @@ -2524,12 +2520,12 @@ Gli unit test aiutano a mantenere il codice più chiaro, perciò ho incluso alcu /* jshint -W117, -W030 */ ``` Oppure puoi aggiungere le righe che seguono al tuo file JSHint Options. - + ```javascript "jasmine": true, "mocha": true, ``` - + ![Strumenti per i test](https://raw.githubusercontent.com/johnpapa/angularjs-styleguide/master/assets/testing-tools.png) ### Organizzazione dei test @@ -2537,14 +2533,14 @@ Gli unit test aiutano a mantenere il codice più chiaro, perciò ho incluso alcu - Posiziona i file degli unit test (spec) vicino al codice del client. Posiziona le specifiche che coprono l'integrazione con il server o che testano più componenti in una cartella separata `tests`. - *Perché?*: Gli unit test hanno una correlazione diretta con un componente specifico e file nei sogenti. + *Perché?*: Gli unit test hanno una correlazione diretta con un componente specifico e file nei sogenti. *Perché?*: È più semplice da tenere aggiornati dal momento che sono sempre a vista. Quando scrivi codice, sia che tu faccia TDD o fai i test durante o dopo lo sviluppo, le scpecifiche sono sempre di fianco e mai fuori dalla vista o dai pensieri, quindi è più probabile che siano aggiornati e ciò consente inoltre a mantenere una migliore copertura del codice. *Perché?*: Quando aggiorni i sorgenti, è più semplice andare ad aggiornare anche i test. *Perché?*: Posizionarli vicino rende semplice trovarli e spostarli con i sorgenti qualora ciò accada. - + *Perché?*: Avere le specifiche vicino rende più facile al lettore del codice sorgente imparare come il componente dovrebbe essere usato e scoprire le sue limitazioni. *Perché?*: Separare le specifiche così da non essere nella build di distribuzione è semplice con grunt o gulp. @@ -2575,7 +2571,7 @@ Gli unit test aiutano a mantenere il codice più chiaro, perciò ho incluso alcu ### Sotto il secondo ###### [Stile [Y211](#stile-y211)] - - Usa animazioni che abbiano una durata breve. Generalmente parto con 300 ms e aggiusto finché non è appropriato. + - Usa animazioni che abbiano una durata breve. Generalmente parto con 300 ms e aggiusto finché non è appropriato. *Perché?*: Animazioni lunghe possono avere l'effetto contrario sull'esperienza dell'utente e di percezzione delle prestazioni che danno il senso di una applicazione lenta. @@ -2607,7 +2603,7 @@ Gli unit test aiutano a mantenere il codice più chiaro, perciò ho incluso alcu ```javascript /** - * Factory di Log + * Factory di Log * @namespace Factories */ (function() { @@ -2832,7 +2828,7 @@ Gli unit test aiutano a mantenere il codice più chiaro, perciò ho incluso alcu .constant('moment', moment); })(); ``` - + ###### [Stile [Y241](#stile-y241)] - Usa constanti per i valori che non cambiano e che non provengono da un altro servizio. Quando le costanti sono utilizzate solo per un modulo che potrebbe essere riutilizzato in più applicazioni, metti le costanti in un file per modulo e nominalo come il modulo. Fintanto che tale necesstià non si presenti, tieni le constanti nel modulo principale in un file `constants.js`. @@ -2866,13 +2862,13 @@ Usa file template o snippet che ti aiutino a seguire stili e schemi consistentem ### Sublime Text ###### [Stile [Y250](#stile-y250)] - - Snippet Angular che seguono questi stili e linee guida. + - Snippet Angular che seguono questi stili e linee guida. - - Scarica gli [snippet di Angular per Sublime](assets/sublime-angular-snippets.zip?raw=true) + - Scarica gli [snippet di Angular per Sublime](assets/sublime-angular-snippets.zip?raw=true) - Mettili nella tua cartella Packages - - Riavvia Sublime + - Riavvia Sublime - In un file JavaScript digita questi comandi seguiti da `TAB` - + ```javascript ngcontroller // crea un controller Angular ngdirective // crea una directive Angular @@ -2896,7 +2892,7 @@ Usa file template o snippet che ti aiutino a seguire stili e schemi consistentem - Snippet Angular e file di template che seguono queste linee guida. Le puoi importare dentro i tuoi settaggi di WebStorm: - - Scarica i [file dei template e gli snippet di Angular per WebStorm](assets/webstorm-angular-file-template.settings.jar?raw=true) + - Scarica i [file dei template e gli snippet di Angular per WebStorm](assets/webstorm-angular-file-template.settings.jar?raw=true) - Apri WebStorm e vai al menù `File` - Scegli la voce di menù `Import Settings` - Seleziona il file e clicca `OK` @@ -2907,7 +2903,7 @@ Usa file template o snippet che ti aiutino a seguire stili e schemi consistentem ng-f // crea una factory Angular ng-m // crea un modulo Angular ``` - + ### Atom ###### [Stile [Y253](#stile-y253)] @@ -2919,7 +2915,7 @@ Usa file template o snippet che ti aiutino a seguire stili e schemi consistentem - Apri Atom, poi apri il Package Manager (Packages -> Settings View -> Install Packages/Themes) - Cerca il pacchetto 'angularjs-styleguide-snippets' - Clicca 'Install' per installare il pacchetto - + - In un file di JavaScript digita i seguenti comandi seguiti da un `TAB` ```javascript @@ -3018,7 +3014,7 @@ Il routing del lato client è importante al fine di creare in flusso di navigazi *Perché?*: UI Router offre tutte le funzionalità del router di Angular più alcune funzionalità aggiuntive che includono route nidificate e stati. *Perché?*: la sintassi è piuttosto simile a quella del router di Angular ed è facile migrare a UI Router. - + - Nota: Puoi usare un provider quale `routerHelperProvider` mostrato sotto per aiutarti a configurare gli stati tra i file durante la fase di esecuzione. ```javascript @@ -3147,7 +3143,7 @@ Apri prima una "issue" per discutere potenziali cambiamenti/aggiunte. Se hai dom ### Processo - 1. Discuti i cambiamenti in un issue di GitHub. + 1. Discuti i cambiamenti in un issue di GitHub. 2. Apri una Pull Request, fai riferimento all issue e specifica i cambiamenti e perché questi aggiungono valore. 3. La Pull Request sarà vagliata e quindi fatto un merge o declinata. diff --git a/i18n/ja-JP.md b/i18n/ja-JP.md index 29218653..064fbd51 100644 --- a/i18n/ja-JP.md +++ b/i18n/ja-JP.md @@ -2,16 +2,14 @@ *[@john_papa](//twitter.com/john_papa)によるチームのための頑固なAngularスタイルガイド* -*Translation by [@noritamago](https://github.com/noritamago)* - ->The [original English version](http://jpapa.me/ngstyles) is the source of truth, as it is maintained and updated first. - もしあなたがAngularのシンタックス、規約、そしてアプリケーション構成のための頑固なスタイルガイドを探しているなら、どうぞいらっしゃい！本スタイルは、[Angular](//angularjs.org)を用いた私の開発経験やプレゼンテーション、[Pluralsight training courses](http://pluralsight.com/training/Authors/Details/john-papa) 、そしてチームでの作業に基づいたものです。 このスタイルガイドの目的は、私が実践している規約だけでなく、私がそれを行う理由を示すことによって、Angularアプリケーションを構築する手引きとなることです。 >もしあなたがこのガイドを気に入ったのなら、Pluralsightにある [Angular Patterns: Clean Code](http://jpapa.me/ngclean) の私のコースもチェックして下さい。 +[![Angular Patterns: Clean Code](https://raw.githubusercontent.com/johnpapa/angular-styleguide/master/assets/ng-clean-code-banner.png)](http://jpapa.me/ngclean) + ## Community Awesomeness and Credit あなたは決して1人でありません！Angularのコミュニティは、自身の経験を共有することに情熱的な素晴らしい集団です。実際、友人でありAngularのエキスパートでもある Todd Motto と私は、共同で多くのスタイルや規約をまとめました。一部意見が分かれましたが、概ね合意できるものでした。彼のアプローチと本スタイルとの比較のため、是非 [Todd's guidelines](https://github.com/toddmotto/angularjs-styleguide) をチェックすることをお勧めします。 @@ -1483,9 +1481,9 @@ function Dashboard(common, dataservice) { } ``` - + このコードはMinifyされたときにマングルされた変数が生成され実行エラーになるかもしれません。 - + ```javascript /* avoid - not minification-safe*/ angular.module('app').controller('Dashboard', d);function d(a, b) { } @@ -1999,7 +1997,7 @@ ### Directive Component Names ###### [Style [Y126](#style-y126)] - - 全てのディレクトリにキャメルケースで一貫性を取れた名前を用いて下さい。そのディレクティブが属する範囲を表す短いプリフィックス(例としては会社やプロジェクトのプリフィックス)を用いて下さい。 + - 全てのディレクトリにキャメルケースで一貫性を取れた名前を用いて下さい。そのディレクティブが属する範囲を表す短いプリフィックス(例としては会社やプロジェクトのプリフィックス)を用いて下さい。 *なぜ ?*: 参照するべきコンポーネントと素早く特定する一貫性の取れた方法を与えます。 @@ -2404,7 +2402,7 @@ *なぜ ?*: Karmaは一度だけ実行するか、コードが変更されたときに自動的に実行するかを簡単に設定することができます。 - *なぜ ?*: Karmaは自前のテストランナーもしくはGruntやGulpを用いた継続的なインテグレーションのプロセスに容易に接続することができます。 + *なぜ ?*: Karmaは自前のテストランナーもしくはGruntやGulpを用いた継続的なインテグレーションのプロセスに容易に接続することができます。 *なぜ ?*: [WebStorm](http://www.jetbrains.com/webstorm/) や [Visual Studio](http://visualstudiogallery.msdn.microsoft.com/02f47876-0e7a-4f6c-93f8-1af5d5189225)などのいくつかのIDEはKarmaを統合し始めています。 @@ -2910,7 +2908,7 @@ ## Yeoman Generator ###### [Style [Y260](#style-y260)] -このスタイルガイドに沿ったAngularのアプリケーションを作る良いスタートポイントとして、[HotTowel yeoman generator](http://jpapa.me/yohottowel)を使うことができます。 +このスタイルガイドに沿ったAngularのアプリケーションを作る良いスタートポイントとして、[HotTowel yeoman generator](http://jpapa.me/yohottowel)を使うことができます。 1. generator-hottowelをインストール @@ -3082,7 +3080,7 @@ _tldr; Use this guide. Attributions are appreciated._ ### Copyright Copyright (c) 2014-2015 [John Papa](http://johnpapa.net) - + ### (The MIT License) Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the diff --git a/i18n/mk-MK.md b/i18n/mk-MK.md index 872cf239..076188ce 100644 --- a/i18n/mk-MK.md +++ b/i18n/mk-MK.md @@ -2,18 +2,13 @@ *Своеволен Angular водич на кодирање за тимови од [@john_papa](//twitter.com/john_papa)* -*Преведено од [Александар Богатинов](https://github.com/Bogatinov)* - ->[Оригиналната Англиска верзија](http://jpapa.me/ngstyles) е изворот на вистината, одржувана и ажурирана прва. - -Доколку барате своеволен стил на кодирање за синтакса, конвенции и структурирање на Angular апликации, тогаш сте на правилното место. -Овие стилови се базирани на моето искуство во развој на [Angular](//angular.org), презентации, [Pluralsight тренинг курсеви](http://pluralsight.com/training/Authors/Details/john-papa) и работа во тимови. +Доколку барате своеволен стил на кодирање за синтакса, конвенции и структурирање на Angular апликации, тогаш сте на правилното место. Овие стилови се базирани на моето искуство во развој на [Angular](//angular.org), презентации, [Pluralsight тренинг курсеви](http://pluralsight.com/training/Authors/Details/john-papa) и работа во тимови. Целта на овој водич на кодирање е да овозможи насока во развој на Angular апликации преку конвенциите што јас ги користам, и уште поважно, зошто ги користам. >Ако ви се допаѓа овој водич, тогаш проверете ми го курсот [Angular Patterns: Clean Code](http://jpapa.me/ngclean) на Pluralsight кој е придружник на овој водич. -[![Angular Шаблон: Чист Код](https://raw.githubusercontent.com/johnpapa/angular-styleguide/master/assets/ng-clean-code-banner.png)](http://jpapa.me/ngclean) + [![Angular Шаблон: Чист Код](https://raw.githubusercontent.com/johnpapa/angular-styleguide/master/assets/ng-clean-code-banner.png)](http://jpapa.me/ngclean) ## Величествена заедница и заслуга Никогаш не работи во вакуум. Јас сметам дека Angular заедницата е неверојатна група кои се страсни за споделување искуство. Како резултат, јас и мојот пријател кој е Angular експерт, Todd Motto соработувавме со многу стилови и конвенции. Се согласуваме на повеќето, додека на останатите се разликуваме. Ве охрабрувам да ги погледнете на [Todd's guidelines](https://github.com/toddmotto/angular-styleguide) со цел да добиете осет за неговиот пристап и како се споредува. @@ -23,8 +18,7 @@ ## Погледнете ги водичите во пробната апликација Иако овој водич ги објаснува "што", "зошто" и "како", јас сметам дека е полезно да ги запазиме во практика. Овој водич е придружен од пробна апликација која ги следи овие стилови и модели. Можете да ја најдете [пробната апликација (наречена modular) тука](https://github.com/johnpapa/ng-demos) во папката 'modular'. Не се колебајте да ја земете, да ја клонирате и форкувате. [Инструкции за да ја започнете се во своете readme](https://github.com/johnpapa/ng-demos/tree/master/modular) - -##Преводи +##Преводи [Преводи од овој Angular водич на кодирање](https://github.com/johnpapa/angular-styleguide/tree/master/i18n) се одржувани од заедницата и можете да ги најдете тука. ## Table of contents @@ -48,7 +42,7 @@ 1. [Startup Logic](#startup-logic) 1. [Angular $ Wrapper Services](#angular--wrapper-services) 1. [Testing](#testing) - 1. [Animations](#animations) + 1. [Animations](#animations) 1. [Comments](#comments) 1. [JSHint](#js-hint) 1. [JSCS](#jscs) @@ -67,9 +61,9 @@ ### Правило од 1 ###### [Style [Y001](#style-y001)] - - Дефинирај 1 компонента во датотека. + - Дефинирај 1 компонента во датотека. - Следниот пример го дефинира `app` модулот и неговите зависности, дефинира контролер, и дефинира фабрика, сé во една датотека + Следниот пример го дефинира `app` модулот и неговите зависности, дефинира контролер, и дефинира фабрика, сé во една датотека ```javascript /* избегнувајте */ @@ -77,17 +71,17 @@ .module('app', ['ngRoute']) .controller('someController', someController) .factory('someFactory', someFactory); - + function SomeController() { } function someFactory() { } ``` - + Истите компоненти сега се разделени во свои датотеки. ```javascript /* препорачано */ - + // app.module.js angular .module('app', ['ngRoute']); @@ -95,7 +89,7 @@ ```javascript /* препорачано */ - + // someController.js angular .module('app') @@ -106,12 +100,12 @@ ```javascript /* препорачано */ - + // someFactory.js angular .module('app') .factory('someFactory', someFactory); - + function someFactory() { } ``` @@ -120,8 +114,8 @@ ## IIFE ### JavaScript Closures ###### [Style [Y010](#style-y010)] - - Вгнездете ги Angular компоненти во Immediately Invoked Function Expression (IIFE). - + - Вгнездете ги Angular компоненти во Immediately Invoked Function Expression (IIFE). + *Зошто?*: IIFE не ги покажува променливите на глобално ниво. Ова помага при спречување да променливите и декларациите на функциите да живеат подолго од очекуваното на глобалното ниво, што исто така помага во избегнување на судири на променливи со исто име. *Зошто?*: Кога вашиот код е минифициран и поставен во една датотека за да биде ажуриран на продукцискиот сервер тогаш може да се појават судири на локални и глобални променливи. IIFE ве заштитува од двата случаи овозможувајќи ниво на променливи во една датотека. @@ -133,7 +127,7 @@ .module('app') .factory('logger', logger); - // logger функцијата е додадена како глобална променлива + // logger функцијата е додадена како глобална променлива function logger() { } // storage.js @@ -145,10 +139,10 @@ function storage() { } ``` - + ```javascript /** - * препорачано + * препорачано * * нема заборавени глобални променливи */ @@ -156,7 +150,7 @@ // logger.js (function() { 'use strict'; - + angular .module('app') .factory('logger', logger); @@ -176,8 +170,8 @@ })(); ``` - - Забелешка: Со цел да се скрати кодот, остатокот од примерите во овој водич нема да го прикажат IIFE - + - Забелешка: Со цел да се скрати кодот, остатокот од примерите во овој водич нема да го прикажат IIFE + - Забелешка: IIFE's го спречува кодот за тестирање од пристап до приватните членови како регуларни изрази или помошни функции кои потребни се да бидат директно тестирани во изолација. Сепак можете да ги тестирате овие преку членови кои можат да се пристапат или да ги изложите преку своја компонента. На пример, со поставување тие помошни функции, регуларни изрази или константи во своја фабрика или константа. **[Назад кон содржината](#table-of-contents)** @@ -186,16 +180,16 @@ ### Избегнувајте судири во именување ###### [Style [Y020](#style-Y020)] - - Користите уникатни шаблони на именување со разделувачи за под-модулите. + - Користите уникатни шаблони на именување со разделувачи за под-модулите. *Зошто?*: Со уникатни имиња избегнувате судири на модули со исто име. Разделувачи ги одредуваат модулите и нивната хиерархија на подмодули. На пример `app` е главниот модул додека `app.dashboard` и `app.users` се модули кои можно е да се зависни од `app`. ### Дефинирање (познати како Setters) ###### [Style [Y021](#style-Y021)] - - Декларирај модули без променлива користејќи ја setter синтаксата. + - Декларирај модули без променлива користејќи ја setter синтаксата. *Зошто?*: Со 1 компонента во датотека, реткост е да поставиш нова променлива во модулот. - + ```javascript /* избегнувајте*/ var app = angular.module('app', [ @@ -229,7 +223,7 @@ /* избегнувајте */ var app = angular.module('app'); app.controller('SomeController', SomeController); - + function SomeController() { } ``` @@ -238,22 +232,22 @@ angular .module('app') .controller('SomeController', SomeController); - + function SomeController() { } ``` ### Setting vs Getting ###### [Style [Y023](#style-Y023)] - Само еднаш создади и земај го за сите други инстанци. - + *Зошто?*: Модул треба еднаш да биде создаден, и од тој момент да биде само превземен. - + - Употреби `angular.module('app', []);` за да создадеш модул. - - Употреби `angular.module('app');` за да го превземеш тој модул. + - Употреби `angular.module('app');` за да го превземеш тој модул. ### Именувани vs Анонимни функции ###### [Style [Y024](#style-Y024)] - - Употреби именувани функции наместо да проследиш анонимни функции како повратни повици (callback). + - Употреби именувани функции наместо да проследиш анонимни функции како повратни повици (callback). *Зошто?*: Ова создава читлив код, кој е полесен за дебагирање и го намалува бројот на вгнездени повратни повици. @@ -315,11 +309,11 @@ ### controllerAs синтакса во контролери ###### [Style [Y031](#style-Y031)] - - Употреби `controllerAs` наместо `класичен контролер со $scope` синтакса. + - Употреби `controllerAs` наместо `класичен контролер со $scope` синтакса. - `controllerAs` синтакса користи `this` во контролерите што се поврзува со `$scope` - *Зошто?*: `controllerAs` е синтаксички поубав од `$scope`. Вие сеуште може да се поврзете со Прегледот и да ги пристапите `$scope` методите. + *Зошто?*: `controllerAs` е синтаксички поубав од `$scope`. Вие сеуште може да се поврзете со Прегледот и да ги пристапите `$scope` методите. *Зошто?*: Ви помага да избегнете употреба на `$scope` методи во контролерот кога е подобро да ги избегнете или преместите во фабрика. `$scope` може да употребите во фабрика или во контролер само кога ви е потребен. На пример, кога објавувате/пријавувате настани со употреба на [`$emit`](https://docs.angular.org/api/ng/type/$rootScope.Scope#$emit), [`$broadcast`](https://docs.angular.org/api/ng/type/$rootScope.Scope#$broadcast), или [`$on`](https://docs.angular.org/api/ng/type/$rootScope.Scope#$on) подобро е да ги преместите во фабрика и да ја повикате неа во контролерот. @@ -342,7 +336,7 @@ ### controllerAs со vm ###### [Style [Y032](#style-Y032)] - Употребете нова променлива за `this` кога употребувате `controllerAs` синтакса. Одлучете се за постојано име на променлива како на пример `vm`, што е кратеница за ViewModel. - + *Зошто?*: `this` зборот е контекстуален и може да ја промени својата состојба кога се употребува во функција која е во контролерот. Со употреба на нова променлива за `this`, се избегнува овој проблем. ```javascript @@ -366,7 +360,7 @@ ```javascript /* jshint validthis: true */ var vm = this; - ``` + ``` Забелешка: Кога создавате watches во контролерот кога ја користите `controller as` синтаксата, тогаш можете да го надгледувате `vm.*` членот со следната синтакса. (Создавање watches претпазливо бидејќи можат да додадат товар на digest циклусот.) @@ -380,10 +374,10 @@ ### Поврзување на членовите на почеток ###### [Style [Y033](#style-Y033)] - Постави ги членовите кои ќе се поврзат според алфабетски редослед. Наместо да бидат поставени низ кодот во контролерот. - - *Зошто?*: Поставување на поврзувањата на почетокот го прави кодот полесен за читање и помага за да го најдеш кој член од контролерот е поврзан и употребуван во Прегледот. - *Зошто?*: Поставување на анонимни функции во ист ред е лесно, но доколку тие функции се подолги од 1 линија код тогаш може да ја намалат читливоста. Со дефинирање на функциите под поврзаните членови (функциите ќе бидат земени) горе и нивните имплементациите доле го прави кодот полесен за читање. + *Зошто?*: Поставување на поврзувањата на почетокот го прави кодот полесен за читање и помага за да го најдеш кој член од контролерот е поврзан и употребуван во Прегледот. + + *Зошто?*: Поставување на анонимни функции во ист ред е лесно, но доколку тие функции се подолги од 1 линија код тогаш може да ја намалат читливоста. Со дефинирање на функциите под поврзаните членови (функциите ќе бидат земени) горе и нивните имплементациите доле го прави кодот полесен за читање. ```javascript /* избегнувајте*/ @@ -440,8 +434,8 @@ vm.gotoSession = gotoSession; vm.refresh = function() { - /** - * линии + /** + * линии * на * код * нарушуваат @@ -468,19 +462,19 @@ ### Декларација на функции за да ја скрие имплементацијата ###### [Style [Y034](#style-Y034)] - Употребу декларации на функции за да ги скриеш нивните имплементации. Нека членовите за поврзување останат горе. Кога треба да поврзеш функција во контролерот, посочи ја кон декларацијата на таа функција која се појавува подоле во датотеката. Ова е директно поврзано со секцијата Поврзување на членови на почеток. За повеќе детали, проверете го [овој пост](http://www.johnpapa.net/angular-function-declarations-function-expressions-and-readable-code). - + *Зошто?*: Поставување членови за поврзување на почеток го прави кодот полесен за читање и лесно да забележиме кој член од контролерот може да биде повзан и искористен во Прегледот. (Исто како погоре.) *Зошто?*: Поставување на имплементацијата на функцијата подоле во датотеката ја поместува комплексноста надвор од преглед со цел да ги забележиме поважните работи на почетокот. *Зошто?*: Декларации на функции се превземени со цел да не се грижиме дали функцијата е декларирана пред да е дефинирана. (како што е со изрази на функции). - *Зошто?*: Нема потреба да се грижиме дали нашиот код ќе се скрши доколку ги приместиме `var a` пред `var b` доколку `a` зависи од `b`. + *Зошто?*: Нема потреба да се грижиме дали нашиот код ќе се скрши доколку ги приместиме `var a` пред `var b` доколку `a` зависи од `b`. *Зошто?*: Редоследот е значаен со функциски изрази. ```javascript - /** + /** * избегнувајте * употреба на функциски изрази */ @@ -573,7 +567,7 @@ .catch(function(error) { // Интерпретирајте ја грешката // Спремете се со истекување на време? пробување пак? друг сервис? - // Повторно одбиете за корисникот да ја забележи соодветната порака + // Повторно одбиете за корисникот да ја забележи соодветната порака }); }; } @@ -587,7 +581,7 @@ vm.isCreditOk; vm.total = 0; - function checkCredit() { + function checkCredit() { return creditService.isOrderTotalOk(vm.total) .then(function(isOk) { vm.isCreditOk = isOk; }) .catch(showServiceError); @@ -598,15 +592,15 @@ ### Контролерите треба да бидат фокусирани ###### [Style [Y037](#style-Y037)] - - Дефинирајте контролер за преглед, и пробајте да не го искористите истиот за други прегледи. Наместо тоа, преместете ја повторно употребливата логика во фабрики и поставете го тој контролер фокусиран за својот преглед. - + - Дефинирајте контролер за преглед, и пробајте да не го искористите истиот за други прегледи. Наместо тоа, преместете ја повторно употребливата логика во фабрики и поставете го тој контролер фокусиран за својот преглед. + *Why?*: Повторно искористување на контролери со повеќе прегледи е лесно кршливо и тешко за одржување стабилност низ повеќе апликации во е2е тестирање. ### Назначување Контролери ###### [Style [Y038](#style-Y038)] - - Кога контролерот е во пар со прегледот и кога било кој од нив треба да биде повторно искористен од други контролери или прегледи тогаш дефинирај ги контролерите со нивните рута. - - Забелешка: Доколку Прегледот е вчитан преку други начини наместо рути, тогаш искористете ја `ng-controller="Avengers as vm"` синтаксата. + - Кога контролерот е во пар со прегледот и кога било кој од нив треба да биде повторно искористен од други контролери или прегледи тогаш дефинирај ги контролерите со нивните рута. + + Забелешка: Доколку Прегледот е вчитан преку други начини наместо рути, тогаш искористете ја `ng-controller="Avengers as vm"` синтаксата. *Зошто?*: Преку поставување на контролерот во пар во рутата се овозможува други рути да започнат други парови од контролери и прегледи. Кога контролерите се назначени со прегледот со [`ng-controller`](https://docs.angular.org/api/ng/directive/ngController), тогаш тој преглед е секогаш поврзан со истиот контролер. @@ -662,8 +656,8 @@ ### Singletons ###### [Style [Y040](#style-Y040)] - - Сервиси се инстанцирани со `new` зборот, и се употребуваат со `this` за јавни методи и променливи. Бидејќи се слични со фабрики, користете фабрика за конзистентност. - + - Сервиси се инстанцирани со `new` зборот, и се употребуваат со `this` за јавни методи и променливи. Бидејќи се слични со фабрики, користете фабрика за конзистентност. + Забелешка: [Сите Angular сервиси се singletons](https://docs.angular.org/guide/services). Тоа значи дека има само една инстанца од сервис за injector. ```javascript @@ -705,14 +699,14 @@ ### Singletons ###### [Style [Y051](#style-Y051)] - Фабрики се singletons и враќаат објект што ги содржини членовите од тој сервис. - + Забелешка: [Сите Angular сервиси се singletons](https://docs.angular.org/guide/services). ### Членовите за пристап на почеток ###### [Style [Y052](#style-Y052)] - - Изложи ги членовите на сервисот кои треба да се повикаат (неговиот интерфејс) на почетокот, користејќи ја техниката [Revealing Module Pattern](http://addyosmani.com/resources/essentialjsdesignpatterns/book/#revealingmodulepatternjavascript). + - Изложи ги членовите на сервисот кои треба да се повикаат (неговиот интерфејс) на почетокот, користејќи ја техниката [Revealing Module Pattern](http://addyosmani.com/resources/essentialjsdesignpatterns/book/#revealingmodulepatternjavascript). - *Зошто?*: Поставување на повикувачките членови на почетокот го прави кодот полесен за читање и помага при лесно забележување на кои членови можат да се повикаат и мораат да бидат тестирани (и/или излажани при тестирање). + *Зошто?*: Поставување на повикувачките членови на почетокот го прави кодот полесен за читање и помага при лесно забележување на кои членови можат да се повикаат и мораат да бидат тестирани (и/или излажани при тестирање). *Зошто?*: Ова е посебно значајно кога датотеката станува подолга и ја намалува потребата од scrolling за да забележиме што е изложено. @@ -722,10 +716,10 @@ /* избегнувајте */ function dataService() { var someValue = ''; - function save() { + function save() { /* */ }; - function validate() { + function validate() { /* */ }; @@ -750,16 +744,16 @@ //////////// - function save() { + function save() { /* */ }; - function validate() { + function validate() { /* */ }; } ``` - + На овој начин поврзувањата се пресликуваат низ објектот, примитивните вредности не можат да се ажурираат самостојно со употреба на Revealing шаблонот на модули. ![Фабрики искористуваат "Above the Fold"](https://raw.githubusercontent.com/johnpapa/angular-styleguide/master/assets/above-the-fold-2.png) @@ -774,9 +768,9 @@ *Зошто?*: Декларации на функции се поврзани така што нема потреба од грижа доколку се користи функцијата пред да биде дефинирана (како што е примерот со функциски изрази). - *Зошто?*: Никогаш нема да има потреба од грижа со декларации на функции и дали поместување на `var a` пред `var b` ќе го скрши кодот доколку `a` зависи од `b`. + *Зошто?*: Никогаш нема да има потреба од грижа со декларации на функции и дали поместување на `var a` пред `var b` ќе го скрши кодот доколку `a` зависи од `b`. - *Зошто?*: Редоследот е значаен за функциски изрази. + *Зошто?*: Редоследот е значаен за функциски изрази. ```javascript /** @@ -905,7 +899,7 @@ } } ``` - + Забелешка: Податочниот сервис е повикан од потрошувачите како контролери, криејќи ја имплементацијата од нив, како што е покажано подоле. ```javascript @@ -937,7 +931,7 @@ return vm.avengers; }); } - } + } ``` ### Вратете Promise од податочни повици @@ -989,9 +983,9 @@ ## Directives ### Ограничувајте се на 1 на датотека ###### [Style [Y070](#style-Y070)] - - Создадете една директива по датотека. Именувајте ја според директивата. + - Создадете една директива по датотека. Именувајте ја според директивата. - *Зошто?*: Полесно е да ги споите повеќе директиви во една датотека, но потешко да ги разделите тие со цел да бидат споделени низ апликации, модули или само еден модул. + *Зошто?*: Полесно е да ги споите повеќе директиви во една датотека, но потешко да ги разделите тие со цел да бидат споделени низ апликации, модули или само еден модул. *Зошто?*: Една директива по датотека е полесна за одржување. @@ -1049,7 +1043,7 @@ /** * @desc sales директива која може да се користи низ апликацијата во компанијата Acme * @пример
- */ + */ angular .module('sales.widgets') .directive('acmeSalesCustomerInfo', salesCustomerInfo); @@ -1080,7 +1074,7 @@ ### Манипулирајте DOM во директивата ###### [Style [Y072](#style-Y072)] - - Кога манипулирате директно со DOM, употребете директива. Ако можат да се употребат други начини, како CSS за стилови или [анимациски сервиси](https://docs.angular.org/api/ngAnimate), Angular темплејти, [`ngShow`](https://docs.angular.org/api/ng/directive/ngShow) или [`ngHide`](https://docs.angular.org/api/ng/directive/ngHide), тогаш употребете ги тие. На пример, ако директивата само се појавува/исчезнува, тогаш употребете ngHide/ngShow. + - Кога манипулирате директно со DOM, употребете директива. Ако можат да се употребат други начини, како CSS за стилови или [анимациски сервиси](https://docs.angular.org/api/ngAnimate), Angular темплејти, [`ngShow`](https://docs.angular.org/api/ng/directive/ngShow) или [`ngHide`](https://docs.angular.org/api/ng/directive/ngHide), тогаш употребете ги тие. На пример, ако директивата само се појавува/исчезнува, тогаш употребете ngHide/ngShow. *Зошто?*: Манипулација на DOM е тешка да се тестира, дебагира и притоа постојат подобри начини. (на пример CSS, анимации, темплејти) @@ -1088,9 +1082,9 @@ ###### [Style [Y073](#style-Y073)] - Обезбедете краток, уникатен и описен префикс на директивата како `acmeSalesCustomerInfo` што е декларирана во HTML како `acme-sales-customer-info`. - *Зошто?*: Уникатниот краток префикс ја идентификува смислата на директивата и нејзиното потекло. На пример, префиксот `cc-` може да укажува дека директивата дел од CodeCamper апликацијата додека `acme-` може да укажува дека директивата е за компанијата Acme. + *Зошто?*: Уникатниот краток префикс ја идентификува смислата на директивата и нејзиното потекло. На пример, префиксот `cc-` може да укажува дека директивата дел од CodeCamper апликацијата додека `acme-` може да укажува дека директивата е за компанијата Acme. - Забелешка: Избегнувајте `ng-` бидејќи тие се резервирани за директивите на Angular. Проучете најчесто употребувани директиви со цел да избегнувате судири со имињата, како `ion-` за [Ionic Framework](http://ionicframework.com/). + Забелешка: Избегнувајте `ng-` бидејќи тие се резервирани за директивите на Angular. Проучете најчесто употребувани директиви со цел да избегнувате судири со имињата, како `ion-` за [Ionic Framework](http://ionicframework.com/). ### Ограничете се на Елементи и Атрибути ###### [Style [Y074](#style-Y074)] @@ -1132,7 +1126,7 @@
``` - + ```javascript /* препорачано */ angular @@ -1202,8 +1196,8 @@ // Внесување $scope за споредба var vm = this; - vm.min = 3; - + vm.min = 3; + console.log('CTRL: $scope.vm.min = %s', $scope.vm.min); console.log('CTRL: $scope.vm.max = %s', $scope.vm.max); console.log('CTRL: vm.min = %s', vm.min); @@ -1219,7 +1213,7 @@ ``` Забелешка: Можете исто така да го именувате Контролерот кога ќе го вметнете во link функција и пристапите до атрибутите на директивата како својства на контролерот. - + ```javascript // Алтернатива за примерот горе function linkFunc(scope, el, attr, vm) { @@ -1229,7 +1223,7 @@ console.log('LINK: vm.max = %s', vm.max); } ``` - + ###### [Style [Y076](#style-y076)] @@ -1237,7 +1231,7 @@ *Зошто?*: Полесно е да се поврзе надворешниот scope со тој на контролерот во директивата. - Забелешка: `bindToController` беше воведен во Angular 1.3.0. + Забелешка: `bindToController` беше воведен во Angular 1.3.0. ```html
@@ -1285,13 +1279,13 @@ ### Активација на Promises во контролерот ###### [Style [Y080](#style-Y080)] - Решете се со логиката за започнување на контролерот во `activate` функцијата. - + *Зошто?*: Поставување на почетна логика во согласно место во контролерот е полесно за лоцирање, полесно за тестирање и го оневозможува распределувањето на почетната логика низ целиот контролер. *Зошто?*: Функцијата `activate` во контролерот е погодна за повторно да се искористи логиката за освежување на контролер/Преглед, ја држи логиката на едно место, побрзо го прикажува Прегледот, ги олеснува анимациите на `ng-view` или `ui-view` и е елегантно за корисникот. Забелешка: Доколку условно требате да го прекинете решавањето на патеката пред да го користите контролерот, тогаш разгледајте го [route resolve](#style-y081). - + ```javascript /* избегнувајте */ function Avengers(dataservice) { @@ -1436,7 +1430,7 @@ ### Опасно за минифкација ###### [Style [Y090](#style-Y090)] - Избегнувајте употреба на кратенки за декларација на зависности без употреба на безбеден пристап за минификација. - + *Зошто?*: Параметрите на компонентата (e.g. контролер, фабрика, итн) ќе бидат претворени во исчезнати променливи. На пример, `common` и `dataservice` може да постанат `a` или `b` и да не бидат најдени од Angular. ```javascript @@ -1459,7 +1453,7 @@ ### Рачна идентификација на зависности ###### [Style [Y091](#style-Y091)] - Употребете `$inject` за рачна идентификација на вашиоте зависности во Angular компонентите. - + *Зошто?*: Оваа техника се користи во [`ng-annotate`](https://github.com/olov/ng-annotate), што ја препорачувам за автоматизација на создавање на безбедни зависности при минификација. Доколку `ng-annotate` забележи зависност доколку постои, нема да ја повтори. *Зошто?*: Ова ги заштитува вашите зависности од можноста да бидат изгубени при минификација. На пример, `common` и `dataservice` можат да постанат `a` or `b` и да не можат да бидат најдени од Angular. @@ -1470,19 +1464,19 @@ /* избегнувајте */ angular .module('app') - .controller('Dashboard', - ['$location', '$routeParams', 'common', 'dataservice', + .controller('Dashboard', + ['$location', '$routeParams', 'common', 'dataservice', function Dashboard($location, $routeParams, common, dataservice) {} - ]); + ]); ``` ```javascript /* избегнувајте */ angular .module('app') - .controller('Dashboard', + .controller('Dashboard', ['$location', '$routeParams', 'common', 'dataservice', Dashboard]); - + function Dashboard($location, $routeParams, common, dataservice) { } ``` @@ -1494,7 +1488,7 @@ .controller('Dashboard', Dashboard); Dashboard.$inject = ['$location', '$routeParams', 'common', 'dataservice']; - + function Dashboard($location, $routeParams, common, dataservice) { } ``` @@ -1536,7 +1530,7 @@ ### Рачна идентификација на зависностите преку решавање на патеки ###### [Style [Y092](#style-Y092)] - Употребете `$inject` за рачна идентификација на зависностите преку решавање на патеки во Angular компоненти. - + *Зошто?*: Оваа техника ги разделува анонимните функции за решавање на патеката, кое е полесно за читање. *Зошто?*: `$inject` линијата може лесно да го претходи решавачот, подобрувајќи ја безбедноста при минификација. @@ -1568,10 +1562,10 @@ ### ng-annotate ###### [Style [Y100](#style-Y100)] - Употребете [ng-annotate](//github.com/olov/ng-annotate) за [Gulp](http://gulpjs.com) или [Grunt](http://gruntjs.com) и поставете го коментарот `/** @ngInject */` над функциите кои им се потребни автоматизиран dependency injection. - + *Зошто?*: Го заштитува вашиот код од загуба на зависности при минификација. - *Зошто?*: Употреба на [`ng-min`](https://github.com/btford/ngmin) е застарено. + *Зошто?*: Употреба на [`ng-min`](https://github.com/btford/ngmin) е застарено. >Јас преферирам Gulp бидејќи сметам е полесен за пишување, читање и дебагирање. @@ -1644,7 +1638,7 @@ ### Употребете Gulp или Grunt за ng-annotate ###### [Style [Y101](#style-Y101)] - Употребете [gulp-ng-annotate](https://www.npmjs.org/package/gulp-ng-annotate) или [grunt-ng-annotate](https://www.npmjs.org/package/grunt-ng-annotate) во автоматизиран build task. Внесете `/* @ngInject */` пред функцијата која има зависности. - + *Зошто?*: ng-annotate ќе ги фати повеќето зависности, но понекогаш потребни се навестувања во својата `/* @ngInject */` синтакса. Следниот код е припер за gulp задача која употребува ngAnnotate @@ -1677,7 +1671,7 @@ ### Декоратори ###### [Style [Y110](#style-Y110)] - Употребете [decorator](https://docs.angular.org/api/auto/service/$provide#decorator), при конфигурација со употреба на [`$provide`](https://docs.angular.org/api/auto/service/$provide) сервис, на [`$exceptionHandler`](https://docs.angular.org/api/ng/service/$exceptionHandler) сервисот за да извршите лични акции кога ќе се случи исклучок. - + *Зошто?*: Овозможува постојан начин да се справи со исклучоци кои Angular не може да ги фати во development-time или run-time. Забелешка: Друга опција е да се прескокне сервисот наместо да се користи декоратор. Ова е добра опција, но доколку сакате да го задржите стандардното однесување и проширите, тогаш препорачливо е да користите декоратор. @@ -1699,9 +1693,9 @@ function extendExceptionHandler($delegate, toastr) { return function(exception, cause) { $delegate(exception, cause); - var errorData = { - exception: exception, - cause: cause + var errorData = { + exception: exception, + cause: cause }; /** * Може да ја додадете грешката на колекцијата на сервиси, @@ -1795,10 +1789,10 @@ - Употребете самостојни имиња за сите компоненти следејќи го шаблонот кој ја опишува функцијата и после (опционално) неговиот тип. Мојот препорачан шаблон е `feature.type.js`. Постојат две имиња за повеќето датотеки: * името на датотеката (`avengers.controller.js`) * регистрираната компонента во Angular (`AvengersController`) - + *Зошто?*: Конвенциите при именување им помага на тимот за конзистентен начин да ги најдат компонентите при прв поглед. Конзистентност во проект е значајно. Конзистентност во тимот е важно. Конзистентност низ компанијата обезбедува огромна ефикасност. - *Зошто?*: Конвенцијата при именување треба едностанво да ви помогне побрзо да го најдете кодот и полесно да го разберете. + *Зошто?*: Конвенцијата при именување треба едностанво да ви помогне побрзо да го најдете кодот и полесно да го разберете. ### Имиња на датотеки по функција ###### [Style [Y121](#style-Y121)] @@ -1839,7 +1833,7 @@ // Константи constants.js - + // Дефиниција на модули avengers.module.js @@ -1849,7 +1843,7 @@ // Конфигурација avengers.config.js - + // Директиви avenger-profile.directive.js avenger-profile.directive.spec.js @@ -1868,7 +1862,7 @@ ### Имиња на датотеки за тестови ###### [Style [Y122](#style-Y122)] - - Имињата на тестовите се слични со компонентата што ја тестираат со додавање на суфикс `spec`. + - Имињата на тестовите се слични со компонентата што ја тестираат со додавање на суфикс `spec`. *Зошто?*: Обезбедува конзистентен начин за лесно препознавање компоненти. @@ -1904,7 +1898,7 @@ function HeroAvengersController(){ } ``` - + ### Суфикс на името на контролерот ###### [Style [Y124](#style-Y124)] - Додадете суфикс `Controller` на името на Контролерот. @@ -1956,7 +1950,7 @@ * препорачано */ - // avenger-profile.directive.js + // avenger-profile.directive.js angular .module .directive('xxAvengerProfile', xxAvengerProfile); @@ -1969,7 +1963,7 @@ ### Модули ###### [Style [Y127](#style-Y127)] - Кога постојат повеќе модули, името на главниот модул е `app.module.js` додека другите зависни модули се именувани според тоа што претставуваат. На пример, админ модул е именувам `admin.module.js`. Соодветните регистрирани имиња на модули би биле `app` и `admin`. - + *Зошто?*: Обезбедува конзистентност за повеќе модуларни апликации како и проширување до огромни апликации. *Зошто?*: Обезбедува лесен начин да се автоматизираат задачите за создавање на дефинициите на модулите, па потоа сите останати angular датотеки (пакување на датотеки). @@ -1991,12 +1985,12 @@ ## Application Structure LIFT Principle ### LIFT ###### [Style [Y140](#style-Y140)] - - Поставете ја пликацијата така што `L` (брзо лоцирање на кодот), `I` (идентификација на кодот со поглед), `F` (најрамна структура што можете) и `T` (обидете се да останете DRY). Структурата треба да ги задоволува овие 4 основни водичи. + - Поставете ја пликацијата така што `L` (брзо лоцирање на кодот), `I` (идентификација на кодот со поглед), `F` (најрамна структура што можете) и `T` (обидете се да останете DRY). Структурата треба да ги задоволува овие 4 основни водичи. *Зошто LIFT?*: Обезбедува конзистентна структура која лесно се скалира, која е модуларна, и лесно може да ја зголеми ефикасноста на програмерите преку брзо лоцирање на кодот. Друг начин да ја проверите вашата структура е да се запрашате: Колку брзо можете да ги отворите и работите во сите датотека со одредена функција? Кога забележувам дека мојата структура е незадоволителна, се навраќам на LIFT водичите - + 1. `L` (лоцирање на вашиот код е лесно) 2. `I` (идентифицирање на кодот со поглед) 3. `F` (рамна структура колку што можеме) @@ -2056,7 +2050,7 @@ ### Изглед ###### [Style [Y151](#style-Y151)] - - Поставете компоненти која го отсликуваат целокупниот изглед на апликацијата во папката `layout`. Овде може да имаме поделеност на посебни секции од прегледот и контролер кој ќе биде контејнер за неговата апликација, навигација, мениа, области со содржина и други региони. + - Поставете компоненти која го отсликуваат целокупниот изглед на апликацијата во папката `layout`. Овде може да имаме поделеност на посебни секции од прегледот и контролер кој ќе биде контејнер за неговата апликација, навигација, мениа, области со содржина и други региони. *Зошто?*: Го организира целиот изглед во единствено место кое може да се употребува низ целата апликација. @@ -2064,7 +2058,7 @@ ###### [Style [Y152](#style-Y152)] - Создадете папки според нивната функција. Кога папката ќе порасне 7+ датотеки, почнете да размислувате за нови папки. Вашиот праг може да биде различен, така да поставете како што е препорачано. - *Зошто?*: Програмерот може да го лоцира кодот, идентификува секоја датотека што претставува, структурата останува рамна и не постојат повторувачки или непотребни имиња. + *Зошто?*: Програмерот може да го лоцира кодот, идентификува секоја датотека што претставува, структурата останува рамна и не постојат повторувачки или непотребни имиња. *Зошто?*: LIFT водичите се покриени. @@ -2080,35 +2074,35 @@ app/ app.module.js app.config.js - components/ - calendar.directive.js - calendar.directive.html - user-profile.directive.js - user-profile.directive.html + components/ + calendar.directive.js + calendar.directive.html + user-profile.directive.js + user-profile.directive.html layout/ - shell.html + shell.html shell.controller.js - topnav.html - topnav.controller.js + topnav.html + topnav.controller.js people/ attendees.html - attendees.controller.js + attendees.controller.js people.routes.js speakers.html speakers.controller.js speaker-detail.html speaker-detail.controller.js - services/ - data.service.js + services/ + data.service.js localstorage.service.js - logger.service.js + logger.service.js spinner.service.js sessions/ - sessions.html + sessions.html sessions.controller.js sessions.routes.js session-detail.html - session-detail.controller.js + session-detail.controller.js ``` ![Пробна апликација пример](https://raw.githubusercontent.com/johnpapa/angular-styleguide/master/assets/modularity-2.png) @@ -2116,48 +2110,48 @@ Забелешка: Не употребувајте структура со папка-по-тип. Со ова ќе се движите низ повеќе папки кога работите на функционалност што станува потешко како што апликацијата има повеќе од 5, 10 или 25 прегледи и контролери (за други функционалности), а со тоа и потешко за лоцирање на датотеките на таа функционалност. ```javascript - /* + /* * избегнувајте * алтернативен папка-по-тип * Препорачаувам "папка-по-функционалност" */ - + app/ app.module.js app.config.js app.routes.js controllers/ - attendees.js - session-detail.js - sessions.js - shell.js - speakers.js - speaker-detail.js - topnav.js - directives/ - calendar.directive.js - calendar.directive.html - user-profile.directive.js - user-profile.directive.html - services/ - dataservice.js + attendees.js + session-detail.js + sessions.js + shell.js + speakers.js + speaker-detail.js + topnav.js + directives/ + calendar.directive.js + calendar.directive.html + user-profile.directive.js + user-profile.directive.html + services/ + dataservice.js localstorage.js - logger.js + logger.js spinner.js views/ - attendees.html + attendees.html session-detail.html - sessions.html - shell.html - speakers.html + sessions.html + shell.html + speakers.html speaker-detail.html - topnav.html - ``` + topnav.html + ``` **[Назад кон содржината](#table-of-contents)** ## Modularity - + ### Многу мали, само содржани модулу ###### [Style [Y160](#style-Y160)] - Создадете мали модули кои содржат една одговорност. @@ -2208,7 +2202,7 @@ Забелешка: Ова е стратегија за конзистентност. Постојат многу добри опции. Одберете една што е конзистентна, што ги следи Angular правилата за зависности, а лесно за одржување и скалабилност. - > Моите структури се разликуваат малку низ проекти, но сите ги запазуваат правилата за структура и модуларност. Имплементацијата може да се разликува во зависност од функционалностите и тимот. Со други зборови, не се засегајте на буквалната структура се додека ја оправдува вашата структура за конзистентност, одржливост и ефикасност. + > Моите структури се разликуваат малку низ проекти, но сите ги запазуваат правилата за структура и модуларност. Имплементацијата може да се разликува во зависност од функционалностите и тимот. Со други зборови, не се засегајте на буквалната структура се додека ја оправдува вашата структура за конзистентност, одржливост и ефикасност. > Во мали апликации можете да ги поставите сите заеднички зависности во апликацискиот модул каде функционалните зависности немаат директни зависности. Ова овозможува полесно одржување кај мали апликации, но станува потешко да се реискористуват тие модули надвор од оваа апликација. @@ -2227,7 +2221,7 @@ .module('app') .config(configure); - configure.$inject = + configure.$inject = ['routerHelperProvider', 'exceptionHandlerProvider', 'toastr']; function configure (routerHelperProvider, exceptionHandlerProvider, toastr) { @@ -2347,13 +2341,13 @@ ###### [Style [Y194](#style-Y194)] - Употребете [PhantomJS](http://phantomjs.org/) за да ги извршувате тестовите на вашиот сервер. - *Зошто?*: PhantomJS е пребарувач кој ги започнува тестовите без потреба од кориснички интерфејс. Така што нема потреба да инсталирате Chrome, Safari, IE, или други пребарувачи на вашиот сервер. + *Зошто?*: PhantomJS е пребарувач кој ги започнува тестовите без потреба од кориснички интерфејс. Така што нема потреба да инсталирате Chrome, Safari, IE, или други пребарувачи на вашиот сервер. Забелешка: Сепак потребно е да ги извршите тестовите на сите пребарувачи во вашата околина како и вашата целна група. ### Анализа на код ###### [Style [Y195](#style-Y195)] - - Извршете JSHint на вашиот код. + - Извршете JSHint на вашиот код. *Зошто?*: Тестовите се код. JSHint лесно ги прикажува грешките во квалитетот на кодот што може да предизвика неправилно извршување на тестовите. @@ -2380,7 +2374,7 @@ - Поставете ги датотеките за unit тестови (спецификација) една поред друга во вашиот клиентски код. Поставете ги спецификациите кои ја покриваат интеграцијата со серверот или тестираат повеќе компоненти во посебна `tests` папка. - *Зошто?*: Unit тестови имаат директна поврзаност со специфична компонента и датотека во изворниот код. + *Зошто?*: Unit тестови имаат директна поврзаност со специфична компонента и датотека во изворниот код. *Зошто?*: Полесно е временски да ги ажурирате бидејќи секогаш се забележителни. Кога кодирате, дали TDD или тестирате пред или после развојот, специкациите се секогаш една поред друга и никогаш нема да се изгубат, што значи дека треба да се одржуваат притоа подобрувајќи ја покриеноста на кодот. @@ -2468,7 +2462,7 @@ /** * @name logError * @desc Logs errors - * @param {String} msg Message to log + * @param {String} msg Message to log * @returns {String} * @memberOf Factories.Logger */ @@ -2700,13 +2694,13 @@ angular ### Sublime Text ###### [Style [Y250](#style-Y250)] - - Angular кратки кодови кои ги следат овие водичи и стилови на код. + - Angular кратки кодови кои ги следат овие водичи и стилови на код. - - Симнете ги [Sublime Angular кратки кодови](assets/sublime-angular-snippets?raw=true) + - Симнете ги [Sublime Angular кратки кодови](assets/sublime-angular-snippets?raw=true) - Поставете ги во вашата Packages папка - - Рестартирајте го Sublime + - Рестартирајте го Sublime - Во JavaScript датотека напишете ја следната команда и потоа кликнете на `TAB` - + ```javascript ngcontroller // создава Angular контролер ngdirective // создава Angular директива @@ -2731,7 +2725,7 @@ angular ###### [Style [Y252](#style-Y252)] - Angular кратки кодови и датотечни шаблони кои ги следат овие стилови и водичи на код. Можете да ги внесете во вашите WebStorm подесувања: - - Симнете ги [WebStorm Angular датотечни шаблони и кратки кодови](../assets/webstorm-angular-file-template.settings.jar?raw=true) + - Симнете ги [WebStorm Angular датотечни шаблони и кратки кодови](../assets/webstorm-angular-file-template.settings.jar?raw=true) - Отворете го WebStorm и одберете го `File` менито - Одберете го `Import Settings` - Одберете ја датотеката и кликнете `OK` @@ -2756,7 +2750,7 @@ angular - Отворете го Atom, потоа отворете го Package Manager (Packages -> Settings View -> Install Packages/Themes) - Побарајте го пакетот 'angular-styleguide-snippets' - Кликнете на 'Install' за да го инсталирате пакетот - + - Во JavaScript датотека напишете ги следните команди и потоа кликнете `TAB` ```javascript @@ -2865,7 +2859,7 @@ angular - Употребете автоматизирање на тестови за вклучување на сите `*.module.js` датотеки пред останатите JavaScript датотеки од апликацијата. - *Зошто?*: На Angular му требаат дефинициите на модулите да бидат регистрирани пред да бидат употребени. + *Зошто?*: На Angular му требаат дефинициите на модулите да бидат регистрирани пред да бидат употребени. *Зошто?*: Именување на модули со слична шема како `*.module.js` е полесно за нивно превземање со glob и да ги постави први. @@ -2901,7 +2895,7 @@ angular *Со придонесување до ова складиште, се придржувате вашата содржина да подлежи на лиценцата на ова складиште.* ### Процес - 1. Дискусирајте за промените во Github Issue. + 1. Дискусирајте за промените во Github Issue. 2. Отворете Pull Request, поставете референца до Issue и објаснете ја промената и како додава на вредност. 3. Pull Request ќе биде оценето и биде или споено или одбиено. diff --git a/i18n/ru-RU.md b/i18n/ru-RU.md index 4d02b836..5ca57cd2 100644 --- a/i18n/ru-RU.md +++ b/i18n/ru-RU.md @@ -2,17 +2,14 @@ *Angular соглашения по стилям для команд разработчиков, предложенные [@john_papa](//twitter.com/john_papa)* -*Перевел на русский язык [Василий Мажекин](https://github.com/mazhekin)* - ->The [original English version](http://jpapa.me/ngstyles) is the source of truth, as it is maintained and updated first. - Если вам нужны стандарты написания кода, соглашения, и руководства структурирования приложений AngularJS, то вы находитесь в правильном месте. Эти соглашения основаны на моем опыте программирования на [AngularJS](//angularjs.org), на моих презентациях [Pluralsight training courses](http://pluralsight.com/training/Authors/Details/john-papa), а также на совместной работе в командах разработчиков. -Главной целью этого документа является желание предоставить вам наиболее полные инструкции для построения приложений AngularJS. Рекомендуя данные соглашения, я стараюсь акцентировать ваше внимание на цели и причины, зачем их нужно придерживаться. +Главной целью этого документа является желание предоставить вам наиболее полные инструкции для построения приложений AngularJS. Рекомендуя данные соглашения, я стараюсь акцентировать ваше внимание на цели и причины, зачем их нужно придерживаться. + >Если это руководство вам понравится, то вы можете также оценить мой курс [Angular Patterns: Clean Code](http://jpapa.me/ngclean), который размещен на сайте Pluralsight. [![Angular Patterns: Clean Code](https://raw.githubusercontent.com/johnpapa/angularjs-styleguide/master/assets/ng-clean-code-banner.png)](http://jpapa.me/ngclean) - + ## Признательность сообществу и коллегам Никогда не работайте в вакууме. Я считаю AngularJS-сообщество невероятно открытым, которое активно обменивается опытом и заботится об этом. Также как и мой друг Todd Motto (отличный Angular эксперт), я работал со многими стилями и соглашениями. Мы с ним сходимся во многом, но иногда и противоречим друг другу. Я предлагаю вам ознакомиться с курсом [Todd's guidelines](https://github.com/toddmotto/angularjs-styleguide) дабы почувствовать разницу подходов. @@ -21,7 +18,7 @@ ## Смотрите стили и шаблоны в приложении-примере Пока данное руководство объясняет *что*, *почему* и *как*, я сразу же показываю, как это работает на практике. Все, что я предлагаю и описываю сопровождается примером-приложения, которое соблюдает и демонстрирует приведенные стили и шаблоны. Вы можете найти [пример приложения (имя modular) здесь](https://github.com/johnpapa/ng-demos) в папке `modular`. Свободно скачивайте, клонируйте и перемещайте эти примеры в свои хранилища. [Инструкциии по запуску примеров находятся в файлах readme](https://github.com/johnpapa/ng-demos/tree/master/modular). -## Переводы +## Переводы [Переводы данного руководства по Angular-стилям](https://github.com/johnpapa/angularjs-styleguide/tree/master/i18n) поддерживаются соообществом разработчиков и могут быть найдены здесь. ## Table of Contents @@ -45,7 +42,7 @@ 1. [Startup Logic (Логика Запуска Приложения)](#startup-logic) 1. [Angular $ Wrapper Services (Angular и Интерфейсные Сервисы)](#angular--wrapper-services) 1. [Testing (Тестирование)](#testing) - 1. [Animations (Анимации)](#animations) + 1. [Animations (Анимации)](#animations) 1. [Comments (Комментарии)](#comments) 1. [JSHint](#js-hint) 1. [Constants (Константы)](#constants) @@ -59,7 +56,7 @@ ## Single Responsibility -### Правило 1 +### Правило 1 ###### [Style [Y001](#style-y001)] - Определяйте 1 компонент в одном файле. @@ -72,7 +69,7 @@ .module('app', ['ngRoute']) .controller('SomeController', SomeController) .factory('someFactory', someFactory); - + function SomeController() { } function someFactory() { } @@ -106,17 +103,17 @@ angular .module('app') .factory('someFactory', someFactory); - + function someFactory() { } ``` **[К Содержанию](#table-of-contents)** ## IIFE -### Замыкания JavaScript +### Замыкания JavaScript ###### [Style [Y010](#style-y010)] - - Оборачивайте компоненты Angular в Немедленно Исполняемые Функции(IIFE - Immediately Invoked Function Expression). + - Оборачивайте компоненты Angular в Немедленно Исполняемые Функции(IIFE - Immediately Invoked Function Expression). *Зачем?*: IIFE удаляют переменные из глобальной области видимости. Этот прием не дает существовать переменным и функциям дольше, чем это необходимо в глобальной области видимости. Иначе это может вызвать непредсказуемые коллизии во время исполнения всего приложения. @@ -143,9 +140,9 @@ ```javascript /** - * рекомендовано + * рекомендовано * - * больше нет глобальных переменных + * больше нет глобальных переменных */ // logger.js @@ -171,7 +168,7 @@ })(); ``` - - Замечание: Только для краткости, в остальных примерах мы не будем прописывать синтаксис с функциями IIFE. + - Замечание: Только для краткости, в остальных примерах мы не будем прописывать синтаксис с функциями IIFE. - Замечание: IIFE не дает тестировать приватный код, так как предотвращает доступ к нему, например, регулярные выражения или вспомогательные функции, которые нужно оттестировать в модульных тестах (unit test) напрямую. Как выход, вы можете тестировать через специальные методы, используемые только в тестах (accessible members) или выставить нужные внутренние функции в собственном компоненте. Например, поместите вспомогательные функции, регулярные выражения или константы в собственную фабрику(factory) или константу(constant). @@ -189,10 +186,10 @@ ### Сеттеры (Setters) ###### [Style [Y021](#style-y021)] - - Объявляйте модули без переменных, используйте сеттеры (setters). + - Объявляйте модули без переменных, используйте сеттеры (setters). *Почему?*: Так как обычно в файле 1 компонент, поэтому вряд ли потребуется вводить переменную для модуля. - + ```javascript /* избегайте этого */ var app = angular.module('app', [ @@ -248,12 +245,12 @@ *Почему?*: Модуль должен быть определен только один раз, а потом используйте его во всех остальных местах. - Используйте `angular.module('app', []);` для определения модуля. - - Используйте `angular.module('app');` чтобы получить модуль. + - Используйте `angular.module('app');` чтобы получить модуль. ### Именованные или Анонимные Функции ###### [Style [Y024](#style-y024)] - - Используйте именованные функции, не передавайте анонимные функции обратного вызова в качестве параметров. + - Используйте именованные функции, не передавайте анонимные функции обратного вызова в качестве параметров. *Почему?*: Так вы производите более читаемый код, его легче отлаживать, и это уменьшает число вложенных функций обратного вызова. @@ -292,7 +289,7 @@ ### Синтаксис controllerAs в представлении ###### [Style [Y030](#style-y030)] - - Используйте синтаксис [`controllerAs`](http://www.johnpapa.net/do-you-like-your-angular-controllers-with-or-without-sugar/), который работает поверх синтаксиса `классический контроллер со $scope`. + - Используйте синтаксис [`controllerAs`](http://www.johnpapa.net/do-you-like-your-angular-controllers-with-or-without-sugar/), который работает поверх синтаксиса `классический контроллер со $scope`. *Почему?*: Контроллер создается, как JavaScript-объект с ключевым словом "new" и затем предоставляется этот единственный экземпляр объекта. То есть синтаксис `controllerAs` намного ближе и похожее на конструктор языка JavaScript, чем `классический синтаксис $scope`. @@ -317,11 +314,11 @@ ### Синтаксис controllerAs в контроллере ###### [Style [Y031](#style-y031)] - - Используйте синтаксис `controllerAs` поверх синтаксиса `классический контроллер со $scope`. + - Используйте синтаксис `controllerAs` поверх синтаксиса `классический контроллер со $scope`. - Синтаксис `controllerAs` использует внутри контроллеров ключевую переменную `this`, которая привязывается к `$scope`. - *Почему?*: `controllerAs` - это только синтаксический сахар поверх `$scope`. Вы все равно можете использовать связывание в представлениях и все равно имеете доступ к методам `$scope`. + *Почему?*: `controllerAs` - это только синтаксический сахар поверх `$scope`. Вы все равно можете использовать связывание в представлениях и все равно имеете доступ к методам `$scope`. *Почему?*: Избавляет от искушения использования методов `$scope` внутри контроллера, когда это не требуется явно, и это позволяет перенести методы в фабрику(factory). Предпочтительнее использовать `$scope` в фабрике, а в контроллере только если это действительно необходимо. Например, когда мы подписываемся и рассылаем события с помощью [`$emit`](https://docs.angularjs.org/api/ng/type/$rootScope.Scope#$emit), [`$broadcast`](https://docs.angularjs.org/api/ng/type/$rootScope.Scope#$broadcast), or [`$on`](https://docs.angularjs.org/api/ng/type/$rootScope.Scope#$on) перенесите эти сервисы в фабрику, и вызывайте методы фабрики в контроллере. @@ -345,7 +342,7 @@ ###### [Style [Y032](#style-y032)] - Сохраните `this` в переменную, когда используете синтаксис `controllerAs`. Выберите постоянное имя для переменной, такое как `vm`, что будет значить ViewModel. - + *Почему?*: Ключевое слово `this` контекстное, и когда его потребуется использовать внутри любой другой функции контроллера, то его содержимое будет другим. Сохранение `this` в переменной `vm` позволит избежать этих проблем. ```javascript @@ -397,7 +394,7 @@ *Почему?*: Размещение привязываемых членов наверху, упрощает чтение и позволяет мгновенно определить, какие члены контроллера привязаны и используются в представлении. - *Почему?*: Написание анонимных функций по месту использования может конечно и проще, но когда такие функции содержат много строк кода, то это значительно снижает читабельность кода. Определяйте функции ниже привязываемых членов, тем самым вы перенесете детали реализации вниз отдельно. Функции определяйте как hoisted, то есть они будут подняты наверх области видимости. А привязываемые члены наверху повысят читабельность кода. + *Почему?*: Написание анонимных функций по месту использования может конечно и проще, но когда такие функции содержат много строк кода, то это значительно снижает читабельность кода. Определяйте функции ниже привязываемых членов, тем самым вы перенесете детали реализации вниз отдельно. Функции определяйте как hoisted, то есть они будут подняты наверх области видимости. А привязываемые члены наверху повысят читабельность кода. ```javascript /* избегайте этого */ @@ -455,8 +452,8 @@ vm.gotoSession = gotoSession; vm.refresh = function() { /** - * эти - * строки + * эти + * строки * кода * ухудшают * читабельность @@ -484,19 +481,19 @@ - Используйте определения функций для скрытия деталей реализации. Держите свои привязываемые члены наверху. Если нужно в контроллере сделать функцию привязываемой, укажите это в группе привязываемых членов и ссылайтесь на данную функцию, которая реализована ниже. Это подробно описано в секции Привязываемые Члены Сверху. Подробнее смотрите [здесь](http://www.johnpapa.net/angular-function-declarations-function-expressions-and-readable-code). - *Почему?*: Размещение привязываемых членов наверху делает код читабельнее, и позволяет мгновенно определить, какие члены привязаны и используются в представлении. (Выше описано тоже самое.) + *Почему?*: Размещение привязываемых членов наверху делает код читабельнее, и позволяет мгновенно определить, какие члены привязаны и используются в представлении. (Выше описано тоже самое.) *Почему?*: Размещение деталей реализации функции внизу скрывает эту сложность ниже и таким образом все важные вещи находятся на видном месте сверху. *Почему?*: Функции определены как hoisted (определены в самом верху области видимости), поэтому не надо заботиться об их использовании перед объявлением, так как это было бы с объявлениями выражений функций (function expressions). - *Почему?*: Вам не надо волноваться, о том в каком порядке объявлены функции. Также как и изменение порядка функций не будет ломать код из-за зависимостей. + *Почему?*: Вам не надо волноваться, о том в каком порядке объявлены функции. Также как и изменение порядка функций не будет ломать код из-за зависимостей. *Почему?*: С выражениями функций(function expressions) порядок будет критичен. ```javascript - /** - * избегайте этого + /** + * избегайте этого * Использование выражений функций (function expressions). */ function Avengers(dataservice, logger) { @@ -604,7 +601,7 @@ vm.isCreditOk; vm.total = 0; - function checkCredit() { + function checkCredit() { return creditService.isOrderTotalOk(vm.total) .then(function(isOk) { vm.isCreditOk = isOk; }) .catch(showServiceError); @@ -617,7 +614,7 @@ - Определяйте контроллер для одного представления, и не пытайтесь использовать этот контроллер для других представлений. Вместо этого, выносите повторно используемую логику в фабрики. Старайтесь держать контроллер простым и сфокусированным только на свое представление. - *Почему?*: Использование контроллера с несколькими представлениями хрупко и ненадежно. А для больших приложений требуется хорошее покрытие тестами end to end (e2e) для проверки стабильности. + *Почему?*: Использование контроллера с несколькими представлениями хрупко и ненадежно. А для больших приложений требуется хорошее покрытие тестами end to end (e2e) для проверки стабильности. ### Получение Контроллеров ###### [Style [Y038](#style-y038)] @@ -626,7 +623,7 @@ Замечание: Если представление загружается не через маршрут, тогда используйте синтаксис `ng-controller="Avengers as vm"`. - *Почему?*: Указание экземпляра контроллера в определении маршрута позволяет различным маршрутам вызывать различные пары контроллеров и представлений. А когда контроллеры указаны в представлении с помощью [`ng-controller`](https://docs.angularjs.org/api/ng/directive/ngController), то представление будет всегда ассоциировано с одним и тем же контроллером. + *Почему?*: Указание экземпляра контроллера в определении маршрута позволяет различным маршрутам вызывать различные пары контроллеров и представлений. А когда контроллеры указаны в представлении с помощью [`ng-controller`](https://docs.angularjs.org/api/ng/directive/ngController), то представление будет всегда ассоциировано с одним и тем же контроллером. ```javascript /* избегайте этого - когда используется маршрут и необходимо динамическое назначение контроллера и представления */ @@ -720,7 +717,7 @@ ### Единственная Обязанность (Single Responsibility) ###### [Style [Y050](#style-y050)] - - Фабрики дожны иметь [единственную обязанность](http://en.wikipedia.org/wiki/Single_responsibility_principle), это следует из их контекста. Если фабрика начинает превышать ту цель для которой она создана, то нужно создать другую фабрику. + - Фабрики дожны иметь [единственную обязанность](http://en.wikipedia.org/wiki/Single_responsibility_principle), это следует из их контекста. Если фабрика начинает превышать ту цель для которой она создана, то нужно создать другую фабрику. ### Синглтон ###### [Style [Y051](#style-y051)] @@ -732,22 +729,22 @@ ### Доступные Члены Наверх ###### [Style [Y052](#style-y052)] - - Помещайте вызываемые члены сервиса (интерфейс) наверх, используя технику [Revealing Module Pattern](http://addyosmani.com/resources/essentialjsdesignpatterns/book/#revealingmodulepatternjavascript). + - Помещайте вызываемые члены сервиса (интерфейс) наверх, используя технику [Revealing Module Pattern](http://addyosmani.com/resources/essentialjsdesignpatterns/book/#revealingmodulepatternjavascript). + + *Почему?*: Размещение вызываемых членов в верхней части улучшает читабельность и дает вам возможность быстро определить, какие члены сервиса могут быть вызваны и должны быть модульно оттестированы (либо фиктивно имплементированы - mocked). - *Почему?*: Размещение вызываемых членов в верхней части улучшает читабельность и дает вам возможность быстро определить, какие члены сервиса могут быть вызваны и должны быть модульно оттестированы (либо фиктивно имплементированы - mocked). - *Почему?*: Это особенно полезно, когда файл становится очень длинным, и вынуждает прокручивать текст кода, чтобы посмотреть, какие методы или свойства сервис предоставляет. - *Почему?*: Размещение функций в обычном прямом порядке может быть и проще, но когда эти функции становятся многострочными, это снижает читабельность и вынуждает много скроллить. Определяя вызываемый интерфейс(в виде возвращаемого сервиса), вы убираете детали реализации вниз. А размещенный сверху интерфейс улучшает читабельность. + *Почему?*: Размещение функций в обычном прямом порядке может быть и проще, но когда эти функции становятся многострочными, это снижает читабельность и вынуждает много скроллить. Определяя вызываемый интерфейс(в виде возвращаемого сервиса), вы убираете детали реализации вниз. А размещенный сверху интерфейс улучшает читабельность. ```javascript /* избегайте этого */ function dataService() { var someValue = ''; - function save() { + function save() { /* */ }; - function validate() { + function validate() { /* */ }; @@ -772,11 +769,11 @@ //////////// - function save() { + function save() { /* */ }; - function validate() { + function validate() { /* */ }; } @@ -791,7 +788,7 @@ - Используйте определения функций, чтобы скрыть детали реализации. Держите вызываемые члены фабрики в верхней части. Свяжите их с определениями функций, которые расположены ниже в файле. Подробную информацию смотрите [здесь](http://www.johnpapa.net/angular-function-declarations-function-expressions-and-readable-code). - *Почему?*: Размещение вызываемых членов в верхней части улучшает читабельность и помогает быстро определить, какие функции фабрики могут быть вызваны извне. + *Почему?*: Размещение вызываемых членов в верхней части улучшает читабельность и помогает быстро определить, какие функции фабрики могут быть вызваны извне. *Почему?*: Размещение функций с деталями реализации в нижней части файла выносит сложные вещи из поля зрения, так что только важные детали вы видите в верхней части файла. @@ -891,11 +888,11 @@ ### Отделите вызовы данных ###### [Style [Y060](#style-y060)] - - Делайте рефакторинг логики работы с данными и взаимодействия этих данных с фабрикой. Создавайте сервисы данных, ответственных за вызовы XHR, локальное хранилище(local storage), работу с памятью или за любые другие операции с данными. + - Делайте рефакторинг логики работы с данными и взаимодействия этих данных с фабрикой. Создавайте сервисы данных, ответственных за вызовы XHR, локальное хранилище(local storage), работу с памятью или за любые другие операции с данными. *Почему?*: Ответственность контроллера - это предоставление или сбор информации для представления. Он не должен заботиться о том, как работать с данными, он только должен знать кого попросить об этом. В сервисы для данных переносится вся логика работы с данными. Это делает контроллер более простым и более сфокусированным для работы с представлением. - *Почему?*: Это позволяет более проще тестировать (фиктивно или реально) вызовы данных в контроллере, который использует сервис для данных. + *Почему?*: Это позволяет более проще тестировать (фиктивно или реально) вызовы данных в контроллере, который использует сервис для данных. *Почему?*: Реализация сервиса данных может иметь очень специфичный код для операций с хранилищем данных. Могут использоваться заголовки для взаимодействовия с данными, или другие сервисы типа $http. Логика в сервисе данных инкапсулируется в одном месте и скрывает реализацию для внешних потребителей (контроллеров), также будет гораздо проще изменить реализацию в случае необходимости. @@ -929,7 +926,7 @@ } } ``` - + Замечание: Сервис данных вызывается потребителем (контроллером), и скрывает реализацию от потребителя. Это показано ниже. ```javascript @@ -961,7 +958,7 @@ return vm.avengers; }); } - } + } ``` ### Возвращение Объекта Promise для Контроллера @@ -969,7 +966,7 @@ - Если сервис данных возвращает promise типа $http, то в вызывающей функции возвращайте promise тоже. - *Почему?*: Вы можете объединить в цепочку объекты promise, и после того как вызов данных закончится, выполнить дальнейшие действия для принятия или отклонения объекта promise. + *Почему?*: Вы можете объединить в цепочку объекты promise, и после того как вызов данных закончится, выполнить дальнейшие действия для принятия или отклонения объекта promise. ```javascript /* рекомендовано */ @@ -979,8 +976,8 @@ function activate() { /** * Шаг 1 - * Запрашиваем функцию getAvengers function - * для получения данных и ждем promise + * Запрашиваем функцию getAvengers function + * для получения данных и ждем promise */ return getAvengers().then(function() { /** @@ -994,7 +991,7 @@ function getAvengers() { /** * Шаг 2 - * Запрашиваем сервис для данных + * Запрашиваем сервис для данных * и ждем promise */ return dataservice.getAvengers() @@ -1012,7 +1009,7 @@ **[К Содержанию](#table-of-contents)** ## Directives -### Одна Директива - Один Файл +### Одна Директива - Один Файл ###### [Style [Y070](#style-y070)] - Создавайте только одну директиву в файле. Называйте файл именем директивы. @@ -1074,7 +1071,7 @@ /** * @desc директива продажи, которая может быть использована везде в модуле продаж компании Acme * @example
- */ + */ angular .module('sales.widgets') .directive('acmeSalesCustomerInfo', salesCustomerInfo); @@ -1101,12 +1098,12 @@ } ``` - Замечание: Существует много способов для именования директив, особенно это зависит от широты области использования (локально или глобально). Выбирайте тот способ, который определяет директиву и ее файл четко и ясно. Несколько примеров будет ниже, но в основном смотрите рекомендации в секции именований. + Замечание: Существует много способов для именования директив, особенно это зависит от широты области использования (локально или глобально). Выбирайте тот способ, который определяет директиву и ее файл четко и ясно. Несколько примеров будет ниже, но в основном смотрите рекомендации в секции именований. ### Манипулирование Элементами DOM в Директиве ###### [Style [Y072](#style-y072)] - - Используйте директивы, если нужно манипулировать элементами DOM напрямую. Но если существуют альтернативные способы, то используйте лучше их. Например, для изменения стилей используйте CSS, для эффектов [сервисы анимации](https://docs.angularjs.org/api/ngAnimate), для управления видимостью используйте [`ngShow`](https://docs.angularjs.org/api/ng/directive/ngShow) и [`ngHide`](https://docs.angularjs.org/api/ng/directive/ngHide). + - Используйте директивы, если нужно манипулировать элементами DOM напрямую. Но если существуют альтернативные способы, то используйте лучше их. Например, для изменения стилей используйте CSS, для эффектов [сервисы анимации](https://docs.angularjs.org/api/ngAnimate), для управления видимостью используйте [`ngShow`](https://docs.angularjs.org/api/ng/directive/ngShow) и [`ngHide`](https://docs.angularjs.org/api/ng/directive/ngHide). *Почему?*: Манипулирование элементами DOM тяжело тестить, отлаживать, и зачастую существуют более лучшие способы для реализации поставленной задачи (например CSS, анимации, шаблоны) @@ -1115,14 +1112,14 @@ - Добавляйте директивам короткий, уникальный, пояснительный префикс, такой как `acmeSalesCustomerInfo`, директива будет объявлена в HTML как `acme-sales-customer-info`. - *Почему?*: Уникальный короткий префикс говорит о контексте и происхождении директивы. Например, префикс `cc-` может рассказать нам, что директива является частью приложения CodeCamper, а `acme-` это директива для компании Acme. + *Почему?*: Уникальный короткий префикс говорит о контексте и происхождении директивы. Например, префикс `cc-` может рассказать нам, что директива является частью приложения CodeCamper, а `acme-` это директива для компании Acme. Замечание: Не используйте префикс `ng-` для своих директив, так как он зарезервирован для директив AngularJS. Также исследуйте префиксы широко используемых директив для избежания конфликтов имен, например, префикс `ion-` используется для директив [Ionic Framework](http://ionicframework.com/). - + ### Ограничивайте Элементы и Атрибуты ###### [Style [Y074](#style-y074)] - - При создании директивы, которая планируется как самостоятельный элемент, применяйте ограничение `E` (разработано, как элемент) или по необходимости ограничение `A` (разработано, как атрибут). В основном, если директива разрабатывается как элемент, ограничения `E` вполне достаточно. Хотя Angular позволяет использовать `EA`, но все же лучше определится как реализовывать директиву, либо как самостоятельный отдельный элемент, либо как атрибут для улучшения функциональности существующего DOM-элемента. + - При создании директивы, которая планируется как самостоятельный элемент, применяйте ограничение `E` (разработано, как элемент) или по необходимости ограничение `A` (разработано, как атрибут). В основном, если директива разрабатывается как элемент, ограничения `E` вполне достаточно. Хотя Angular позволяет использовать `EA`, но все же лучше определится как реализовывать директиву, либо как самостоятельный отдельный элемент, либо как атрибут для улучшения функциональности существующего DOM-элемента. *Почему?*: Это имееет смысл. @@ -1160,7 +1157,7 @@
``` - + ```javascript /* рекомендовано */ angular @@ -1214,7 +1211,7 @@ controller: ExampleController, controllerAs: 'vm' }; - + return directive; function linkFunc(scope, el, attr, ctrl) { @@ -1230,8 +1227,8 @@ // Внедрение $scope сразу для параметра сравнения var vm = this; - vm.min = 3; - vm.max = $scope.max; + vm.min = 3; + vm.max = $scope.max; console.log('CTRL: $scope.max = %i', $scope.max); console.log('CTRL: vm.min = %i', vm.min); console.log('CTRL: vm.max = %i', vm.max); @@ -1252,14 +1249,14 @@ ### Активация объектов promise в контроллере ###### [Style [Y080](#style-y080)] - - Размещайте стартовую начальную логику для контроллера в функции `activate`. - + - Размещайте стартовую начальную логику для контроллера в функции `activate`. + *Почему?*: Размещение стартовой логики в согласованом месте контроллера позволяет ее быстрее находить, более согласованно тестить, и позволить не разбразывать по всему контроллеру логику активации. *Почему?*: Функция `activate` делает удобным повторное использование логики для обновления контроллера/представления, держит все логику вместе, делает более быстрой работу пользователя с представлением, делает анимацию более простой в директивами `ng-view` и `ui-view`, ну и делает ориентирование разработчика в коде более энергичным и быстрым. Замечание: Если вам нужно при каком-то условии отменить маршрут перед началом использования контроллера, используйте для этого [route resolve](#style-y081). - + ```javascript /* избегайте этого */ function Avengers(dataservice) { @@ -1297,7 +1294,7 @@ ### Работа с Объектами Promise в Маршрутах ###### [Style [Y081](#style-y081)] - - Если контроллер зависит от объекта promise, от результата которого зависит активация контроллера, то разрешайте/получайте эти зависимости в `$routeProvider`, перед тем как логика контроллера будет выполена. Если вам нужно по какому-то условию отменить маршрут перед активацией контроллера, то используйте обработчик маршрутов. + - Если контроллер зависит от объекта promise, от результата которого зависит активация контроллера, то разрешайте/получайте эти зависимости в `$routeProvider`, перед тем как логика контроллера будет выполена. Если вам нужно по какому-то условию отменить маршрут перед активацией контроллера, то используйте обработчик маршрутов. - Используйте обработчик маршрутов, если вы решили в последствии отменить маршут до перехода к представлению. @@ -1358,7 +1355,7 @@ } ``` - Замечание: В примере ниже показано, как разрешение маршрута указывает на именованную функцию, которую легче отлаживать и легче оперировать встроенной зависимостью. + Замечание: В примере ниже показано, как разрешение маршрута указывает на именованную функцию, которую легче отлаживать и легче оперировать встроенной зависимостью. ```javascript /* еще лучше */ @@ -1404,8 +1401,8 @@ ### Уязвимости от Минификации ###### [Style [Y090](#style-y090)] - - Избегайте объявления зависимостей без использования безопасного для минификации подхода. - + - Избегайте объявления зависимостей без использования безопасного для минификации подхода. + *Почему?*: Параметры для компонент (типа контроллер, фабрика и т.п.) будут преобразованы в усеченные переменные. Например, `common` и `dataservice` превратятся `a` или `b` и не будут найдены средой AngularJS. ```javascript @@ -1418,7 +1415,7 @@ } ``` - После минификации будут производится усеченные переменные и это будет вызывать ошибки выполнения. + После минификации будут производится усеченные переменные и это будет вызывать ошибки выполнения. ```javascript /* избегайте этого- не безопасно для минификации */ @@ -1429,7 +1426,7 @@ ###### [Style [Y091](#style-y091)] - Используйте `$inject` для ручного определения ваших зависимостей для AngulaJS. - + *Почему?*: Этот техника отражает технику использованную в [`ng-annotate`](https://github.com/olov/ng-annotate), которую я рекомендую для автоматического создания зависимостей, безопасных для минификации. Если `ng-annotate` обнаруживает вставку(injection), которая уже была, то она не будет продублирована. *Почему?*: Это гарантирует вашим зависимостям защиту от повреждений, которую может нанести минификация, путем урезания и укорачивания переменных. Например, `common` и `dataservice` превратятся `a` и `b`, и не будут найдены средой AngularJS. @@ -1440,8 +1437,8 @@ /* избегайте этого */ angular .module('app') - .controller('Dashboard', - ['$location', '$routeParams', 'common', 'dataservice', + .controller('Dashboard', + ['$location', '$routeParams', 'common', 'dataservice', function Dashboard($location, $routeParams, common, dataservice) {} ]); ``` @@ -1450,9 +1447,9 @@ /* избегайте этого */ angular .module('app') - .controller('Dashboard', + .controller('Dashboard', ['$location', '$routeParams', 'common', 'dataservice', Dashboard]); - + function Dashboard($location, $routeParams, common, dataservice) { } ``` @@ -1536,15 +1533,15 @@ ###### [Style [Y100](#style-y100)] - Используйте [ng-annotate](//github.com/olov/ng-annotate) для [Gulp](http://gulpjs.com) или [Grunt](http://gruntjs.com) и комментируйте функции, которые нуждаются в автоматической вставке зависимостей, используйте `/** @ngInject */`. - + *Почему?*: Это гарантирует, что в вашем коде нет зависимостей, которые не используют защиту для повреждений от минификации. - *Почему?*: [`ng-min`](https://github.com/btford/ngmin) не рекомендуется для применения, выводится из употребления + *Почему?*: [`ng-min`](https://github.com/btford/ngmin) не рекомендуется для применения, выводится из употребления >Я предпочитаю Gulp, так как для меня он проще для чтения, написания кода и отладки. Следующий код не использует защиту зависимостей от минификации. - + ```javascript angular .module('app') @@ -1563,7 +1560,7 @@ } ``` - Если код выше запустить через ng-annotate, то будет произведен код с аннотацией `$inject`, и код станет устойчив к минификации. + Если код выше запустить через ng-annotate, то будет произведен код с аннотацией `$inject`, и код станет устойчив к минификации. ```javascript angular @@ -1587,7 +1584,7 @@ Замечание: Если `ng-annotate` обнаруживает вставки которые уже сделаны (например `@ngInject` был обнаружен), он не будет дублирован в коде `$inject`. - Замечание: Если используется маршрутный обработчик, то вы можете перед встраиваемой функцией подставить `/* @ngInject */` и это будет производить корректный аннотационный код, делающий каждую вставленную зависимость безопасной для минификации. + Замечание: Если используется маршрутный обработчик, то вы можете перед встраиваемой функцией подставить `/* @ngInject */` и это будет производить корректный аннотационный код, делающий каждую вставленную зависимость безопасной для минификации. ```javascript // Используем @ngInject аннотацию @@ -1613,7 +1610,7 @@ ###### [Style [Y101](#style-y101)] - Используйте [gulp-ng-annotate](https://www.npmjs.org/package/gulp-ng-annotate) или [grunt-ng-annotate](https://www.npmjs.org/package/grunt-ng-annotate) для автоматических билдов. Вставляйте `/* @ngInject */` перед любой функцией, которая имеет зависимости. - + *Почему?*: ng-annotate будет отлавливать большинство зависимостей, но иногда требуются вставлять подсказки в виде синтаксиса `/* @ngInject */`. Следующий код является примером gulp задания с использованием ngAnnotate. @@ -1646,8 +1643,8 @@ ### декораторы ###### [Style [Y110](#style-y110)] - - Используйте [decorator](https://docs.angularjs.org/api/auto/service/$provide#decorator), во время конфигурации, применяя сервис [`$provide`](https://docs.angularjs.org/api/auto/service/$provide), пользовательские действия будут происходить в сервисе [`$exceptionHandler`](https://docs.angularjs.org/api/ng/service/$exceptionHandler), если произойдут исключения. - + - Используйте [decorator](https://docs.angularjs.org/api/auto/service/$provide#decorator), во время конфигурации, применяя сервис [`$provide`](https://docs.angularjs.org/api/auto/service/$provide), пользовательские действия будут происходить в сервисе [`$exceptionHandler`](https://docs.angularjs.org/api/ng/service/$exceptionHandler), если произойдут исключения. + *Почему?*: Это дает постоянный надежный способ обработки необработанных исключений Angular во время разработки и во время выполнения. Замечание: Другим способом является переопределение сервиса, вместо использования декоратора. Это прекрасный способ, но если вы хотите сохранить поведение по умолчанию, и просто дополнить это поведение, то декоратоор крайне рекомендуем. @@ -1669,9 +1666,9 @@ function extendExceptionHandler($delegate, toastr) { return function(exception, cause) { $delegate(exception, cause); - var errorData = { - exception: exception, - cause: cause + var errorData = { + exception: exception, + cause: cause }; /** * Здесь можно добавить ошибку в сервисную коллекцию, @@ -1687,7 +1684,7 @@ ### Обработчики Исключений ###### [Style [Y111](#style-y111)] - - Создайте фабрику, которая предоставит интерфейс для перехвата и изящной обработки исключений. + - Создайте фабрику, которая предоставит интерфейс для перехвата и изящной обработки исключений. *Почему?*: Это дает постоянный и надежный способ для перехвата исключений, которые могут возникнуть в вашем коде (например, во время вызовов объекта XHR или сбоев в работе объектов promise). @@ -1757,14 +1754,14 @@ - Используйте согласованные имена для всех компонентов по шаблону, который описывает особенность(feature) компонента, а затем (опционально) его тип. Я рекомендую шаблон - `feature.type.js`. Существует два типа имен для большинства случаев: * имя файла (`avengers.controller.js`) * имя компонента, которое зарегистрировано Angular (`AvengersController`) - - *Почему?*: Соглашения об именованиях дает постояннный надежный способ поиска содержимого быстрым беглым взглядом. Согласованность в проекте жизненно важна. Согласованность в команде очень важна. Согласованность между компаниями дает огромную эффективность. - *Почему?*: Соглашения об именованиях просто должны помочь найти вам свой код быстрее, и сделать его проще для понимания. + *Почему?*: Соглашения об именованиях дает постояннный надежный способ поиска содержимого быстрым беглым взглядом. Согласованность в проекте жизненно важна. Согласованность в команде очень важна. Согласованность между компаниями дает огромную эффективность. + + *Почему?*: Соглашения об именованиях просто должны помочь найти вам свой код быстрее, и сделать его проще для понимания. ### Характерные Имена Файлов ###### [Style [Y121](#style-y121)] - - Используйте согласованные имена для всех компонентов используя шаблон, который описывает компонентную особенность, затем опционально его тип. Я рекомендую шаблон - `feature.type.js`. + - Используйте согласованные имена для всех компонентов используя шаблон, который описывает компонентную особенность, затем опционально его тип. Я рекомендую шаблон - `feature.type.js`. *Почему?*: Это надежный способ для быстрой идентификации компонентов. @@ -1801,7 +1798,7 @@ // константы constants.js - + // определение модуля avengers.module.js @@ -1811,14 +1808,14 @@ // конфигурация avengers.config.js - + // директивы avenger-profile.directive.js avenger-profile.directive.spec.js ``` Замечание: Другим общим соглашением является именование файлов контроллера без слова `controller`, например, называем файл `avengers.js` вместо `avengers.controller.js`. Все остальные соглашения все же должны содержать суффикс типа. Просто контроллеры наиболее общий тип компонентов, и таким образом, мы экономим время печатая имя, но контроллеры все равно прекрасно идентифицируются. Я рекомендую выбрать один тип соглашения и быть на одной волне со своей командой. - + ```javascript /** * рекомендовано @@ -1831,7 +1828,7 @@ ### Имена Тестовых Файлов ###### [Style [Y122](#style-y122)] - - Имя тестовой спецификации подобно имени компонента, которая его тестит, только к ней еще добавляется суффикс `spec`. + - Имя тестовой спецификации подобно имени компонента, которая его тестит, только к ней еще добавляется суффикс `spec`. *Почему?*: Это надежный способ для быстрой идентификации компонентов. @@ -1850,7 +1847,7 @@ ### Имена Контроллеров ###### [Style [Y123](#style-y123)] - - Используйте согласованные имена для всех контроллеров, именованных по их характерной особенности. Используйте UpperCamelCase (ВерхнийВерблюжийРегистр) для контроллеров, так как они являются конструкторами. + - Используйте согласованные имена для всех контроллеров, именованных по их характерной особенности. Используйте UpperCamelCase (ВерхнийВерблюжийРегистр) для контроллеров, так как они являются конструкторами. *Почему?*: Это дает надежный и понятный способ для быстрой идентификации и применения контроллеров. @@ -1876,7 +1873,7 @@ *Почему?*: Суффикс `Controller` более общеупотребим и наиболее явно описателен. - *Почему?*: Если не указывать суффикс, то получатся более краткие имена, но контроллеры все равно будут легко идентифицируемы, даже без суффикса. + *Почему?*: Если не указывать суффикс, то получатся более краткие имена, но контроллеры все равно будут легко идентифицируемы, даже без суффикса. ```javascript /** @@ -1949,10 +1946,10 @@ ### Модули ###### [Style [Y127](#style-y127)] - - Если разрабатываются несколько модулей, файл главного модуля будет называться `app.module.js`, а другие модули получат свое название по своему назначению (то что они представляют). Например, модуль администрирования будет назван `admin.module.js`. Соответствующие зарегистрированные имена модулей будут `app` и `admin`. + - Если разрабатываются несколько модулей, файл главного модуля будет называться `app.module.js`, а другие модули получат свое название по своему назначению (то что они представляют). Например, модуль администрирования будет назван `admin.module.js`. Соответствующие зарегистрированные имена модулей будут `app` и `admin`. - *Почему?*: Это дает согласованность для многих модулей приложения, а также позволяет расширяться в огромные приложения. - *Почему?*: Получаем простой способ автоматизировать работу для первоначальной загрузки всех модульных определений, а затем уже остальных файлов angular. + *Почему?*: Это дает согласованность для многих модулей приложения, а также позволяет расширяться в огромные приложения. + *Почему?*: Получаем простой способ автоматизировать работу для первоначальной загрузки всех модульных определений, а затем уже остальных файлов angular. ### Конфигурация ###### [Style [Y128](#style-y128)] @@ -1966,7 +1963,7 @@ ### Маршруты ###### [Style [Y129](#style-y129)] - - Выделяйте конфигурацию маршрута в свой собственный файл. Примеры могут быть такими: `app.route.js` для главного модуля и `admin.route.js` для модуля `admin`. Даже в маленьких приложениях я предпочитаю такое разделение от остальной конфигурации. + - Выделяйте конфигурацию маршрута в свой собственный файл. Примеры могут быть такими: `app.route.js` для главного модуля и `admin.route.js` для модуля `admin`. Даже в маленьких приложениях я предпочитаю такое разделение от остальной конфигурации. **[К Содержанию](#table-of-contents)** @@ -1976,10 +1973,10 @@ - Структура вашего приложения должна быть построена таким образом, чтобы вы могли: `L` - размещать ваш код быстро (`L`ocate your code quickly), `I` - идентифицировать код практически с первого взгляда (`I`dentify the code at a glance), `F` - держать структуру плоской, насколько это возможно (keep the `F`lattest structure you can), и стараться оставаться DRY (Don’t Repeat Yourself) - Не Повторяйте Себя - (`T`ry to stay DRY - Don’t Repeat Yourself). Структура должна придерживаться этим основным 4 правилам. - *Почему LIFT?*: Получаем согласованную структуру, которая хорошо масштабируется, разбита на модули, и легко позволяет увеличить эффективность разработчика, путем быстрого нахождения кода. Другой способ проверить структуру вашего приложения - это спросить себя: Как быстро я могу открыть все сооответствующие файлы, чтобы работать над нужной функциональностью? - + *Почему LIFT?*: Получаем согласованную структуру, которая хорошо масштабируется, разбита на модули, и легко позволяет увеличить эффективность разработчика, путем быстрого нахождения кода. Другой способ проверить структуру вашего приложения - это спросить себя: Как быстро я могу открыть все сооответствующие файлы, чтобы работать над нужной функциональностью? + Когда я чувствую, что работать с моей структурой некомфортно, я возвращаюсь к принципам LIFT. - + 1. `L`Размещать наш код легко (`L`ocating our code is easy) 2. `I`Идентифицировать код быстро (`I`dentify code at a glance) 3. `F`Держать структуру ровной как можно дольше (`F`lat structure as long as we can) @@ -2027,8 +2024,8 @@ ### T-DRY (Try to Stick to DRY) T-DRY (Старайтесь придерживаться принципов DRY) ###### [Style [Y144](#style-y144)] - - Примечание переводчика: Аббревиатура DRY значит Don`t Repeat Yourself (Не повторяйте себя). - + - Примечание переводчика: Аббревиатура DRY значит Don`t Repeat Yourself (Не повторяйте себя). + - Придерживайтесь DRY, но не сходите с ума и не жертвуйте читабельностью. *Почему?*: Быть DRY - это важно, но не критично, если в жертву приносятся другие принципы LIFT. Поэтому я и назвал это T-DRY (Try DRY - попытайтесь быть DRY). Напрмер, я не хочу печатать session-view.html для представления, потому что и так понятно, что это представление(view). Но если это не очевидно или это определено соглашением, тогда нужно давать полное имя. @@ -2047,7 +2044,7 @@ ### Общие элементы ###### [Style [Y151](#style-y151)] - - Размещайте компоненты, которые определяют общий каркас приложения в папке `layout`. Там могут быть представление-оболочка и контроллер, которые являются контейнером для приложения, навигация, меню, регионы содержимого (content areas) и другие общие элементы. + - Размещайте компоненты, которые определяют общий каркас приложения в папке `layout`. Там могут быть представление-оболочка и контроллер, которые являются контейнером для приложения, навигация, меню, регионы содержимого (content areas) и другие общие элементы. *Почему?*: Так организуются все элементы общего назначения, которые размещаются в одном месте и используются во всем приложении. @@ -2104,15 +2101,15 @@ ![Пример Структуры Приложения](https://raw.githubusercontent.com/johnpapa/angularjs-styleguide/master/assets/modularity-2.png) - Замечание: Не используйте структуру папки-по-типу. Так файлы одной функциональности разбрасываются по нескольким папкам, и далее все быстро становится очень громоздким. Как только в приложении создаются 5, 10, или 25+ представлений и контроллеров (и других компонентов), то работа становится очень сложной, в отличиии от структуры папки-по-функциональностям. - + Замечание: Не используйте структуру папки-по-типу. Так файлы одной функциональности разбрасываются по нескольким папкам, и далее все быстро становится очень громоздким. Как только в приложении создаются 5, 10, или 25+ представлений и контроллеров (и других компонентов), то работа становится очень сложной, в отличиии от структуры папки-по-функциональностям. + ```javascript - /* + /* * избегайте этого * Альтернативный способ "папки-по-типу". * Я рекомендую "папки-по-функциональностям". */ - + app/ app.module.js app.config.js @@ -2143,7 +2140,7 @@ speakers.html speaker-detail.html topnav.html - ``` + ``` **[К Содержанию](#table-of-contents)** @@ -2181,14 +2178,14 @@ *Почему?*: Спринты или итерации могут сосредоточиться на функциональных областях, и включить их по завершению спринта или итерации. - *Почему?*: Оформление функциональных областей в модули позволяет проще их тестировать в изолированном или повторно используемом коде. + *Почему?*: Оформление функциональных областей в модули позволяет проще их тестировать в изолированном или повторно используемом коде. ### Повторно Используемые Блоки и Модули ###### [Style [Y164](#style-y164)] - Создавайте модули, которые представляют из себя повторно используемые блоки приложения для общих сервисов таких как обработка исключений, логгирование, диагностика, безопасность и локальная работа с данными. - *Почему?*: Эти типы функциональностей нужны во многих приложениях. Поэтому держите их отдельно в своих собственных модулях, применяйте универсально и повторно используйте во многих приложениях. + *Почему?*: Эти типы функциональностей нужны во многих приложениях. Поэтому держите их отдельно в своих собственных модулях, применяйте универсально и повторно используйте во многих приложениях. ### Зависимости модулей ###### [Style [Y165](#style-y165)] @@ -2203,11 +2200,11 @@ *Почему?*: Функциональности приложения для внутреннего пользования (intra-app) такие как общие сервисы данных становится проще размещать и делится из модуля `app.core` (выберите это имя для такого модуля). - Замечание: Это стратегия для согласованности. Здесь очень много хороших вариантов. Выберите тот, который следует правилам зависимостей AngularJS, и его проще поддерживать и масштабировать. + Замечание: Это стратегия для согласованности. Здесь очень много хороших вариантов. Выберите тот, который следует правилам зависимостей AngularJS, и его проще поддерживать и масштабировать. > Мои структуры слегка отличаются от проекта к проекту, но они всегда следовали этим руководствам структуры и модульности. Реализация может менятся в зависимости от особенностей проекта и команды. Другими словами, не зацикливайтесь на точных воспроизведениях структуры. Регулируйте свою структуру учитывая согласованность, способность поддерживать код и эффективность. - > В небольшом приложении вы можете конечно объединить все общие зависимости в модуль приложения, где функциональные модули не имеют прямых зависимостей. Это проще поддерживать в маленьких приложениях, использовать это вне приложения будет очень затруднительно. + > В небольшом приложении вы можете конечно объединить все общие зависимости в модуль приложения, где функциональные модули не имеют прямых зависимостей. Это проще поддерживать в маленьких приложениях, использовать это вне приложения будет очень затруднительно. **[К Содержанию](#table-of-contents)** @@ -2225,7 +2222,7 @@ .module('app') .config(configure); - configure.$inject = + configure.$inject = ['routerHelperProvider', 'exceptionHandlerProvider', 'toastr']; function configure (routerHelperProvider, exceptionHandlerProvider, toastr) { @@ -2250,7 +2247,7 @@ - Весь код, который должен запуститься, во время старта приложения, должен быть объявлен в фабрике, предоставлен в виде функции, и вставлен в [блок run](https://docs.angularjs.org/guide/module#module-loading-dependencies). - *Почему?*: Если код поместить сразу в блок run, то его будет тяжело тестить. Размещение кода в фабрике облегчает абстрагирование и использование фиктивных объектов для тестов. + *Почему?*: Если код поместить сразу в блок run, то его будет тяжело тестить. Размещение кода в фабрике облегчает абстрагирование и использование фиктивных объектов для тестов. ```javascript angular @@ -2274,7 +2271,7 @@ - Используйте [`$document`](https://docs.angularjs.org/api/ng/service/$document) и [`$window`](https://docs.angularjs.org/api/ng/service/$window) вместо `document` и `window`. - *Почему?*: Эти сервисы являются оберткой среды Angular, они более проще тестируются, чем объекты document и window. Это дает вам возможность не создавать самим фиктивные объекты document and window. + *Почему?*: Эти сервисы являются оберткой среды Angular, они более проще тестируются, чем объекты document и window. Это дает вам возможность не создавать самим фиктивные объекты document and window. ### $timeout and $interval ###### [Style [Y181](#style-y181)] @@ -2331,7 +2328,7 @@ *Почему?*: Karma просто конфигурируется, она просто запускается вручную или автоматически (как только вы измените код). - *Почему?*: Karma просто внедряется в ваш процесс Continuous Integration, как самостоятельно, так и через Grunt или Gulp. + *Почему?*: Karma просто внедряется в ваш процесс Continuous Integration, как самостоятельно, так и через Grunt или Gulp. *Почему?*: Некоторые средства разработки (IDE) начали интегрировать в себя библиотеку Karma, это - [WebStorm](http://www.jetbrains.com/webstorm/) и [Visual Studio](http://visualstudiogallery.msdn.microsoft.com/02f47876-0e7a-4f6c-93f8-1af5d5189225). @@ -2351,14 +2348,14 @@ - Используйте [PhantomJS](http://phantomjs.org/) для запуска тестов на сервере. - *Почему?*: PhantomJS - невизуальный браузер, который помогает запускать тесты, не используя обычные визуальные браузеры. Таким образом, вам не нужно устанавливать на ваш сервер Chrome, Safari, IE, или другие браузеры. + *Почему?*: PhantomJS - невизуальный браузер, который помогает запускать тесты, не используя обычные визуальные браузеры. Таким образом, вам не нужно устанавливать на ваш сервер Chrome, Safari, IE, или другие браузеры. Замечание: Все же проведите тесты на всех браузерах, особенно на браузерах вашей целевой аудитории. ### Анализ Кода ###### [Style [Y195](#style-y195)] - - Запустите JSHint на ваших тестах. + - Запустите JSHint на ваших тестах. *Почему?*: Тесты это код. JSHint помогает идентифицировать проблемы качества кода, которые могут причиной некорректной работы тестов. @@ -2367,7 +2364,7 @@ - Смягчите правила для кода ваших тестов, чтобы разрешить общие глобальные переменные такие как `describe` и `expect`. - *Почему?*: Ваши тесты - это код и он требует того же самого внимания и соблюдения правил качества, как и весь ваш рабочий код. Все же, глобальные переменные используются средой тестирования, и правила для них нужно ослабить в спецификации тестов. + *Почему?*: Ваши тесты - это код и он требует того же самого внимания и соблюдения правил качества, как и весь ваш рабочий код. Все же, глобальные переменные используются средой тестирования, и правила для них нужно ослабить в спецификации тестов. ```javascript /* global sinon, describe, it, afterEach, beforeEach, expect, inject */ @@ -2386,9 +2383,9 @@ *Почему?*: Когда вы изменяете исходный код, всегда проще сразу обновить тесты. - *Почему?*: Размещение файла кода и теста рядом упрощает их поиск и в случае необходимости, перенос в другое место обоих файлов не составляет большого труда. + *Почему?*: Размещение файла кода и теста рядом упрощает их поиск и в случае необходимости, перенос в другое место обоих файлов не составляет большого труда. - *Почему?*: Отделить тестовые файлы(specs), так чтобы они не попали в рабочую сборку можно с помощью grunt или gulp. + *Почему?*: Отделить тестовые файлы(specs), так чтобы они не попали в рабочую сборку можно с помощью grunt или gulp. ``` /src/client/app/customers/customer-detail.controller.js @@ -2416,8 +2413,8 @@ ### Длительность Анимаций ###### [Style [Y211](#style-y211)] - - Используйте короткую длительность анимаций. Я в основном начинаю с 300 миллисекунд и регулирую до нужного состояния. - *Почему?*: Долгие анимации могут иметь обратный эффект для пользователя, приложение будет восприниматься как медленно работающее. + - Используйте короткую длительность анимаций. Я в основном начинаю с 300 миллисекунд и регулирую до нужного состояния. + *Почему?*: Долгие анимации могут иметь обратный эффект для пользователя, приложение будет восприниматься как медленно работающее. ### animate.css ###### [Style [Y212](#style-y212)] @@ -2471,7 +2468,7 @@ /** * @name logError * @desc Logs errors - * @param {String} msg Message to log + * @param {String} msg Message to log * @returns {String} * @memberOf Factories.Logger */ @@ -2565,7 +2562,7 @@ ## Constants -### Глобальные Переменные Сторонних Производителей (Vendors) +### Глобальные Переменные Сторонних Производителей (Vendors) ###### [Style [Y240](#style-y240)] - Создайте константы Angular для глобальных переменных из библиотек сторонних производителей. @@ -2585,16 +2582,16 @@ .constant('moment', moment); })(); ``` - + ###### [Style [Y241](#style-y241)] - - Используйте константы для значений, которые не изменяются и не приходят из другого сервиса. Если константы используются в модуле, который может быть использован в нескольких приложениях, то поместите константу в файле, названному по имени модуля. В противном случае держите константы в главном модуле в файле `constants.js`. + - Используйте константы для значений, которые не изменяются и не приходят из другого сервиса. Если константы используются в модуле, который может быть использован в нескольких приложениях, то поместите константу в файле, названному по имени модуля. В противном случае держите константы в главном модуле в файле `constants.js`. *Почему?*: Значение может измениться, возможно это редкая ситуация, но допустим сервис возвращает нам значение, и таким образом мы не будем менять наш рабочий код, использующий этот сервис. Напрмер, url для сервиса данных мог бы быть помещен в константы, но лучше загружать его из веб сервиса. - + *Почему?*: Константы могут быть инжектированы в любой angular-компонент, включая провайдеры. - *Почему?*: Когда приложение разделено на модули, которые могут быть использованы в других приложениях, каждый отдельный модуль должен быть способен оперировать своими собственными зависимыми константами. + *Почему?*: Когда приложение разделено на модули, которые могут быть использованы в других приложениях, каждый отдельный модуль должен быть способен оперировать своими собственными зависимыми константами. ```javascript // Константы используются во всем приложении @@ -2619,13 +2616,13 @@ ### Sublime Text ###### [Style [Y250](#style-y250)] - - Angular сниппеты, которые соблюдают приведенные здесь стили и руководства. + - Angular сниппеты, которые соблюдают приведенные здесь стили и руководства. - - Скачайте [Sublime Angular сниппеты](assets/sublime-angular-snippets.zip?raw=true) + - Скачайте [Sublime Angular сниппеты](assets/sublime-angular-snippets.zip?raw=true) - Поместите все в вашу папку Packages - - Перезапустите Sublime + - Перезапустите Sublime - В файле JavaScript напечатайте следующие команды после клавиши `TAB` - + ```javascript ngcontroller // создает контроллер Angular ngdirective // создает директиву Angular @@ -2706,7 +2703,7 @@ *Почему?*: Когда мы удаляем или добавляем модуль, то приложение должно содержать только те маршруты, которые указывают на существующие представления. - *Почему?*: Так мы можем включать или исключать части приложения, не заботясь о том, что у нас останутся маршруты на несуществующие представления. + *Почему?*: Так мы можем включать или исключать части приложения, не заботясь о том, что у нас останутся маршруты на несуществующие представления. **[К Содержанию](#table-of-contents)** @@ -2719,7 +2716,7 @@ *Почему?*: Angular должен зарегистрировать все определения модулей, перед тем как их использовать. - *Почему?*: Именование модулей по специальному шаблону `*.module.js` упрощает их поиск и сборку в единую группу, для того чтобы подключить их первыми. + *Почему?*: Именование модулей по специальному шаблону `*.module.js` упрощает их поиск и сборку в единую группу, для того чтобы подключить их первыми. ```javascript var clientApp = './src/client/app/'; @@ -2743,7 +2740,7 @@ *Добавляя материал в данное хранилище вы согласны с тем, ваше содержимое будет доступно согласно приведенной ниже лицензии.* ### Процесс - 1. Обсудите изменения в Issue. + 1. Обсудите изменения в Issue. 2. Откройте Pull Request, сделайте ссылку на issue, объясните изменения и их ценность. 3. Pull Request будет проверен и далее принят или отклонен. diff --git a/i18n/zh-CN.md b/i18n/zh-CN.md index 57da4898..48849ca6 100644 --- a/i18n/zh-CN.md +++ b/i18n/zh-CN.md @@ -2,10 +2,6 @@ *Angular规范[@john_papa](//twitter.com/john_papa)* -*由[ZhaoKe](https://github.com/natee)翻译* - ->The [original English version](http://jpapa.me/ngstyles) is the source of truth, as it is maintained and updated first. - 如果你正在寻找一些关于语法、约定和结构化的Angular应用的一个有建设性的规范，那么你来对地方了。这里所包含的内容是基于我在团队中使用[Angular](//angularjs.org)的一些经验、一些演讲和[Pluralsight培训课程](http://pluralsight.com/training/Authors/Details/john-papa)。 这个规范的目的是为构建Angular应用提供指导，当然更加重要的是让大家知道我为什么要选择它们。 @@ -22,7 +18,7 @@ Angular社区是一个热衷于分享经验的令人难以置信的社区，尽 ## 在示例App中了解这些规范 看示例代码有助于你更好地理解，你可以在`modular`文件夹下找到[命名为modular的示例应用程序](https://github.com/johnpapa/ng-demos)，随便克隆。 -##翻译 +##翻译 [Angular规范翻译版本](https://github.com/johnpapa/angular-styleguide/tree/master/i18n)。 ##目录 @@ -45,7 +41,7 @@ Angular社区是一个热衷于分享经验的令人难以置信的社区，尽 1. [启动逻辑](#启动逻辑) 1. [Angular $包装服务](#angular-包装服务) 1. [测试](#测试) - 1. [动画](#动画) + 1. [动画](#动画) 1. [注释](#注释) 1. [JSHint](#js-hint) 1. [JSCS](#jscs) @@ -65,20 +61,20 @@ Angular社区是一个热衷于分享经验的令人难以置信的社区，尽 - 一个文件只定义一个组件。 - 下面的例子在同一个文件中定义了一个`app`的module和它的一些依赖、一个controller和一个factory。 + 下面的例子在同一个文件中定义了一个`app`的module和它的一些依赖、一个controller和一个factory。 ```javascript - /* avoid */ + /* avoid */ angular .module('app', ['ngRoute']) .controller('SomeController', SomeController) .factory('someFactory', someFactory); - + function SomeController() { } function someFactory() { } ``` - + 推荐以下面的方式来做，把上面相同的组件分割成单独的文件。 ```javascript /* recommended */ @@ -105,7 +101,7 @@ Angular社区是一个热衷于分享经验的令人难以置信的社区，尽 angular .module('app') .factory('someFactory', someFactory); - + function someFactory() { } ``` @@ -115,12 +111,12 @@ Angular社区是一个热衷于分享经验的令人难以置信的社区，尽 ### JavaScript闭包 ###### [Style [Y010](#style-y010)] - - 把Angular组件包装到一个立即调用函数表达式中（IIFE）。 - + - 把Angular组件包装到一个立即调用函数表达式中（IIFE）。 + *为什么？*：把变量从全局作用域中删除了，这有助于防止变量和函数声明比预期在全局作用域中有更长的生命周期，也有助于避免变量冲突。 *为什么？*：当你的代码为了发布而压缩了并且被合并到同一个文件中时，可能会有很多变量发生冲突，使用了IIFE（给每个文件提供了一个独立的作用域），你就不用担心这个了。 - + ```javascript /* avoid */ // logger.js @@ -128,7 +124,7 @@ Angular社区是一个热衷于分享经验的令人难以置信的社区，尽 .module('app') .factory('logger', logger); - // logger function会被当作一个全局变量 + // logger function会被当作一个全局变量 function logger() { } // storage.js @@ -136,15 +132,15 @@ Angular社区是一个热衷于分享经验的令人难以置信的社区，尽 .module('app') .factory('storage', storage); - // storage function会被当作一个全局变量 + // storage function会被当作一个全局变量 function storage() { } ``` ```javascript /** - * recommended + * recommended * - * 再也不存在全局变量了 + * 再也不存在全局变量了 */ // logger.js @@ -170,7 +166,7 @@ Angular社区是一个热衷于分享经验的令人难以置信的社区，尽 })(); ``` - - 注：为了简洁起见，本规范余下的示例中将会省略IIFE语法。 + - 注：为了简洁起见，本规范余下的示例中将会省略IIFE语法。 - 注：IIFE阻止了测试代码访问私有成员（正则表达式、helper函数等），这对于自身测试是非常友好的。然而你可以把这些私有成员暴露到可访问成员中进行测试，例如把私有成员（正则表达式、helper函数等）放到factory或是constant中。 @@ -188,10 +184,10 @@ Angular社区是一个热衷于分享经验的令人难以置信的社区，尽 ###定义(aka Setters) ###### [Style [Y021](#style-y021)] - - 不使用任何一个使用了setter语法的变量来定义modules。 + - 不使用任何一个使用了setter语法的变量来定义modules。 *为什么?*：在一个文件只有一个组件的条件下，完全不需要为一个模块引入一个变量。 - + ```javascript /* avoid */ var app = angular.module('app', [ @@ -226,7 +222,7 @@ Angular社区是一个热衷于分享经验的令人难以置信的社区，尽 /* avoid */ var app = angular.module('app'); app.controller('SomeController', SomeController); - + function SomeController() { } ``` @@ -235,7 +231,7 @@ Angular社区是一个热衷于分享经验的令人难以置信的社区，尽 angular .module('app') .controller('SomeController', SomeController); - + function SomeController() { } ``` @@ -243,16 +239,16 @@ Angular社区是一个热衷于分享经验的令人难以置信的社区，尽 ###### [Style [Y023](#style-y023)] - 只能设置一次。 - + *为什么？*：一个module只能被创建一次，创建之后才能被检索到。 - + - 设置module，`angular.module('app', []);`。 - - 获取module，`angular.module('app');`。 + - 获取module，`angular.module('app');`。 ###命名函数 vs 匿名函数 ###### [Style [Y024](#style-y024)] - - 回调函数使用命名函数，不要用匿名函数。 + - 回调函数使用命名函数，不要用匿名函数。 *为什么？*：易读，方便调试，减少嵌套回调函数的数量。 @@ -291,7 +287,7 @@ Angular社区是一个热衷于分享经验的令人难以置信的社区，尽 ###controllerAs在View中的语法 ###### [Style [Y030](#style-y030)] - - 使用[`controllerAs`](http://www.johnpapa.net/do-you-like-your-angular-controllers-with-or-without-sugar/) 语法代替直接用经典的$scope定义的controller的方式。 + - 使用[`controllerAs`](http://www.johnpapa.net/do-you-like-your-angular-controllers-with-or-without-sugar/) 语法代替直接用经典的$scope定义的controller的方式。 *为什么？*：controller被构建的时候，就会有一个新的实例，`controllerAs` 的语法比`经典的$scope语法`更接近JavaScript构造函数。 @@ -316,11 +312,11 @@ Angular社区是一个热衷于分享经验的令人难以置信的社区，尽 ###controllerAs在controller中的语法 ###### [Style [Y031](#style-y031)] - - 使用 `controllerAs` 语法代替 `经典的$scope语法` 语法。 + - 使用 `controllerAs` 语法代替 `经典的$scope语法` 语法。 - 使用`controllerAs` 时，controller中的`$scope`被绑定到了`this`上。 - *为什么？*：`controllerAs` 是`$scope`的语法修饰，你仍然可以绑定到View上并且访问 `$scope`的方法。 + *为什么？*：`controllerAs` 是`$scope`的语法修饰，你仍然可以绑定到View上并且访问 `$scope`的方法。 *为什么？*：避免在controller中使用 `$scope`，最好不用它们或是把它们移到一个factory中。factory中可以考虑使用`$scope`，controller中只在需要时候才使用`$scope`，例如当使用[`$emit`](https://docs.angularjs.org/api/ng/type/$rootScope.Scope#$emit)， [`$broadcast`](https://docs.angularjs.org/api/ng/type/$rootScope.Scope#$broadcast)，或者 [`$on`](https://docs.angularjs.org/api/ng/type/$rootScope.Scope#$on)来发布和订阅事件时，可以考虑把这些调用挪到factory当中，并从controller中调用。 @@ -344,7 +340,7 @@ Angular社区是一个热衷于分享经验的令人难以置信的社区，尽 ###### [Style [Y032](#style-y032)] - 使用`controllerAs`语法时把`this` 赋值给一个可捕获的变量，选择一个有代表性的名称，例如`vm`代表ViewModel。 - + *为什么？*：`this`在不同的地方有不同的语义（就是作用域不同），在controller中的一个函数内部使用`this`时可能会改变它的上下文。用一个变量来捕获`this`的上下文从而可以避免遇到这样的坑。 ```javascript @@ -365,7 +361,7 @@ Angular社区是一个热衷于分享经验的令人难以置信的社区，尽 ``` - 注：你可以参照下面的做法来避免 [jshint](http://www.jshint.com/)的警告。但是构造函数（函数名首字母大写）是不需要这个的. - + ```javascript /* jshint validthis: true */ var vm = this; @@ -380,7 +376,7 @@ Angular社区是一个热衷于分享经验的令人难以置信的社区，尽 function SomeController($scope, $log) { var vm = this; vm.title = 'Some Title'; - + $scope.$watch('vm.title', function(current, original) { $log.info('vm.title was %s', original); $log.info('vm.title is now %s', current); @@ -388,15 +384,15 @@ Angular社区是一个热衷于分享经验的令人难以置信的社区，尽 } ``` - + ###可绑定成员放到顶部 ###### [Style [Y033](#style-y033)] - 把可绑定的成员放到controller的顶部，按字母排序，并且不要通过controller的代码传播。 - - *为什么？*：易读，可以让你立即识别controller中的哪些成员可以在View中绑定和使用。 - *为什么？*：虽然设置单行匿名函数很容易，但是当这些函数的代码超过一行时，这将极大降低代码的可读性。在可绑定成员下面定义函数（这些函数被提出来），把具体的实现细节放到下面，可绑定成员放到顶部，这会提高代码的可读性。 + *为什么？*：易读，可以让你立即识别controller中的哪些成员可以在View中绑定和使用。 + + *为什么？*：虽然设置单行匿名函数很容易，但是当这些函数的代码超过一行时，这将极大降低代码的可读性。在可绑定成员下面定义函数（这些函数被提出来），把具体的实现细节放到下面，可绑定成员放到顶部，这会提高代码的可读性。 ```javascript /* avoid */ @@ -453,8 +449,8 @@ Angular社区是一个热衷于分享经验的令人难以置信的社区，尽 vm.gotoSession = gotoSession; vm.refresh = function() { - /** - * lines + /** + * lines * of * code * affects @@ -482,20 +478,20 @@ Angular社区是一个热衷于分享经验的令人难以置信的社区，尽 ###### [Style [Y034](#style-y034)] - 使用函数声明来隐藏实现细节，把绑定成员放到顶部，当你需要在controller中绑定一个函数时，把它指向一个在文件的后面会出现函数声明。更多详情请看[这里](http://www.johnpapa.net/angular-function-declarations-function-expressions-and-readable-code)。 - + *为什么？*：易读，易识别哪些成员可以在View中绑定和使用。 *为什么？*：把函数的实现细节放到后面，你可以更清楚地看到重要的东西。 *为什么？*：由于函数声明会被提到顶部，所以没有必要担心在声明它之前就使用函数的问题。 - *为什么？*：你再也不用担心当 `a`依赖于 `b`时，把`var a`放到`var b`之前会中断你的代码的函数声明问题。 + *为什么？*：你再也不用担心当 `a`依赖于 `b`时，把`var a`放到`var b`之前会中断你的代码的函数声明问题。 *为什么？*：函数表达式中顺序是至关重要的。 ```javascript - /** - * avoid + /** + * avoid * Using function expressions. */ function Avengers(dataservice, logger) { @@ -575,7 +571,7 @@ Angular社区是一个热衷于分享经验的令人难以置信的社区，尽 vm.isCreditOk; vm.total = 0; - function checkCredit () { + function checkCredit () { var settings = {}; // Get the credit service base URL from config // Set credit service required headers @@ -605,7 +601,7 @@ Angular社区是一个热衷于分享经验的令人难以置信的社区，尽 vm.isCreditOk; vm.total = 0; - function checkCredit () { + function checkCredit () { return creditService.isOrderTotalOk(vm.total) .then(function(isOk) { vm.isCreditOk = isOk; }) .catch(showServiceError); @@ -616,16 +612,16 @@ Angular社区是一个热衷于分享经验的令人难以置信的社区，尽 ###保持Controller的专一性 ###### [Style [Y037](#style-y037)] - - 一个view定义一个controller，尽量不要在其它view中使用这个controller。把可重用的逻辑放到factory中，保证controller只服务于当前视图。 - + - 一个view定义一个controller，尽量不要在其它view中使用这个controller。把可重用的逻辑放到factory中，保证controller只服务于当前视图。 + *为什么？*：不同的view用同一个controller是非常不科学的，良好的端对端测试覆盖率对于保证大型应用稳定性是必需的。 ###分配Controller ###### [Style [Y038](#style-y038)] - - 当一个controller必须匹配一个view时或者任何一个组件可能被其它controller或是view重用时，连同controller的route一起定义。 - - 注：如果一个view是通过route外的其它形式加载的，那么就用`ng-controller="Avengers as vm"`语法。 + - 当一个controller必须匹配一个view时或者任何一个组件可能被其它controller或是view重用时，连同controller的route一起定义。 + + 注：如果一个view是通过route外的其它形式加载的，那么就用`ng-controller="Avengers as vm"`语法。 *为什么？*：在route中匹配controller允许不同的路由调用不同的相匹配的controller和view，当在view中通过[`ng-controller`](https://docs.angularjs.org/api/ng/directive/ngController)分配controller时，这个view总是和相同的controller相关联。 @@ -683,7 +679,7 @@ Angular社区是一个热衷于分享经验的令人难以置信的社区，尽 ###### [Style [Y040](#style-y040)] - 用`new`实例化service，用`this`实例化公共方法和变量，由于这和factory是类似的，所以为了保持统一，推荐用facotry来代替。 - + 注意：[所有的Angular services都是单例](https://docs.angularjs.org/guide/services)，这意味着每个injector都只有一个实例化的service。 ```javascript @@ -727,7 +723,7 @@ Angular社区是一个热衷于分享经验的令人难以置信的社区，尽 ###### [Style [Y051](#style-y051)] - facotry是一个单例，它返回一个包含service成员的对象。 - + 注：[所有的Angular services都是单例](https://docs.angularjs.org/guide/services)，这意味着每个injector都只有一个实例化的service。 ###可访问的成员放到顶部### @@ -735,7 +731,7 @@ Angular社区是一个热衷于分享经验的令人难以置信的社区，尽 - 使用从[显露模块模式](http://addyosmani.com/resources/essentialjsdesignpatterns/book/#revealingmodulepatternjavascript)派生出来的技术把service（它的接口）中可调用的成员暴露到顶部， - *为什么？*：易读，并且让你可以立即识别service中的哪些成员可以被调用，哪些成员必须进行单元测试（或者被别人嘲笑）。 + *为什么？*：易读，并且让你可以立即识别service中的哪些成员可以被调用，哪些成员必须进行单元测试（或者被别人嘲笑）。 *为什么？*：当文件内容很长时，这可以避免需要滚动才能看到暴露了哪些东西。 @@ -748,7 +744,7 @@ Angular社区是一个热衷于分享经验的令人难以置信的社区，尽 function save () { /* */ }; - function validate () { + function validate () { /* */ }; @@ -773,11 +769,11 @@ Angular社区是一个热衷于分享经验的令人难以置信的社区，尽 //////////// - function save () { + function save () { /* */ }; - function validate () { + function validate () { /* */ }; } @@ -798,9 +794,9 @@ Angular社区是一个热衷于分享经验的令人难以置信的社区，尽 *为什么？*：由于函数声明会被提到顶部，所以没有必要担心在声明它之前就使用函数的问题。 - *为什么？*：你再也不用担心当 `a`依赖于 `b`时，把`var a`放到`var b`之前会中断你的代码的函数声明问题。 + *为什么？*：你再也不用担心当 `a`依赖于 `b`时，把`var a`放到`var b`之前会中断你的代码的函数声明问题。 - *为什么？*：函数表达式中顺序是至关重要的。 + *为什么？*：函数表达式中顺序是至关重要的。 ```javascript /** @@ -962,7 +958,7 @@ Angular社区是一个热衷于分享经验的令人难以置信的社区，尽 return vm.avengers; }); } - } + } ``` ###数据调用返回一个Promise @@ -1016,7 +1012,7 @@ Angular社区是一个热衷于分享经验的令人难以置信的社区，尽 ###一个directive一个文件 ###### [Style [Y070](#style-y070)] - - 一个文件中只创建一个directive，并依照directive来命名文件。 + - 一个文件中只创建一个directive，并依照directive来命名文件。 *为什么？*：虽然把所有directive放到一个文件中很简单，但是当一些directive是跨应用的，一些是跨模块的，一些仅仅在一个模块中使用时，想把它们独立出来就非常困难了。 @@ -1077,7 +1073,7 @@ Angular社区是一个热衷于分享经验的令人难以置信的社区，尽 /** * @desc sales directive that can be used anywhere across the sales app at a company named Acme * @example
- */ + */ angular .module('sales.widgets') .directive('acmeSalesCustomerInfo', salesCustomerInfo); @@ -1163,7 +1159,7 @@ Angular社区是一个热衷于分享经验的令人难以置信的社区，尽
``` - + ```javascript /* recommended */ angular @@ -1218,9 +1214,9 @@ Angular社区是一个热衷于分享经验的令人难以置信的社区，尽 controllerAs: 'vm', bindToController: true // because the scope is isolated }; - + return directive; - + function linkFunc(scope, el, attr, ctrl) { console.log('LINK: scope.min = %s *** should be undefined', scope.min); console.log('LINK: scope.max = %s *** should be undefined', scope.max); @@ -1228,7 +1224,7 @@ Angular社区是一个热衷于分享经验的令人难以置信的社区，尽 console.log('LINK: scope.vm.max = %s', scope.vm.max); } } - + ExampleController.$inject = ['$scope']; function ExampleController($scope) { @@ -1252,7 +1248,7 @@ Angular社区是一个热衷于分享经验的令人难以置信的社区，尽 ``` 注意：当你把controller注入到link的函数或可访问的directive的attributes时，你可以把它命名为控制器的属性。 - + ```javascript // Alternative to above example function linkFunc(scope, el, attr, vm) { // 和上面例子的区别在于把vm直接传递进来 @@ -1317,13 +1313,13 @@ Angular社区是一个热衷于分享经验的令人难以置信的社区，尽 ###### [Style [Y080](#style-y080)] - 在`activate`函数中解决controller的启动逻辑。 - + *为什么？*：把启动逻辑放在一个controller中固定的位置可以方便定位、有利于保持测试的一致性，并能够避免controller中到处都是激活逻辑。 *为什么？*：`activate`这个controller使得重用刷新视图的逻辑变得很方便，把所有的逻辑都放到了一起，可以让用户更快地看到视图，可以很轻松地对`ng-view` 或 `ui-view`使用动画，用户体验更好。 注意：如果你需要在开始使用controller之前有条件地取消路由，那么就用[route resolve](#style-y081)来代替。 - + ```javascript /* avoid */ function Avengers(dataservice) { @@ -1365,7 +1361,7 @@ Angular社区是一个热衷于分享经验的令人难以置信的社区，尽 - 当你决定在过渡到视图之前取消路由时，使用route resolve。 - *为什么？*：controller在加载前可能需要一些数据，这些数据可能是从一个通过自定义factory或是[$http](https://docs.angularjs.org/api/ng/service/$http)的promise而来的。[route resolve](https://docs.angularjs.org/api/ngRoute/provider/$routeProvider)允许promise在controller的逻辑执行之前解决，因此它可能对从promise中来的数据做一些处理。 + *为什么？*：controller在加载前可能需要一些数据，这些数据可能是从一个通过自定义factory或是[$http](https://docs.angularjs.org/api/ng/service/$http)的promise而来的。[route resolve](https://docs.angularjs.org/api/ngRoute/provider/$routeProvider)允许promise在controller的逻辑执行之前解决，因此它可能对从promise中来的数据做一些处理。 *为什么？*：这段代码将在路由后的controller的激活函数中执行，视图立即加载，promise resolve的时候将会开始进行数据绑定，可以（通过`ng-view`或`ui-view`）在视图的过渡之间加个loading状态的动画。 @@ -1469,7 +1465,7 @@ Angular社区是一个热衷于分享经验的令人难以置信的社区，尽 ###### [Style [Y090](#style-y090)] - 声明依赖时避免使用缩写语法。 - + *为什么？*：组件的参数（例如controller、factory等等）将会被转换成各种乱七八糟错误的变量。例如，`common`和`dataservice`可能会变成`a`或者`b`，但是这些转换后的变量在Angular中是找不到的。 ```javascript @@ -1493,30 +1489,30 @@ Angular社区是一个热衷于分享经验的令人难以置信的社区，尽 ###### [Style [Y091](#style-y091)] - 用`$inject`手动添加Angular组件所需的依赖。 - + *为什么？*：这种技术反映了使用[`ng-annotate`](https://github.com/olov/ng-annotate)的技术，这就是我推荐的对依赖关系进行自动化创建安全压缩的方式，如果`ng-annotate`检测到已经有了注入，那么它就不会再次重复执行。 *为什么？*：可以避免依赖变成其它Angular找不到的变量，例如，`common`和`dataservice`可能会变成`a`或者`b`。 - *为什么？*：避免创建内嵌的依赖，因为一个数组太长不利于阅读，此外，内嵌的方式也会让人感到困惑，比如数组是一系列的字符串，但是最后一个却是组件的function。 + *为什么？*：避免创建内嵌的依赖，因为一个数组太长不利于阅读，此外，内嵌的方式也会让人感到困惑，比如数组是一系列的字符串，但是最后一个却是组件的function。 ```javascript /* avoid */ angular .module('app') - .controller('Dashboard', - ['$location', '$routeParams', 'common', 'dataservice', + .controller('Dashboard', + ['$location', '$routeParams', 'common', 'dataservice', function Dashboard($location, $routeParams, common, dataservice) {} - ]); + ]); ``` ```javascript /* avoid */ angular .module('app') - .controller('Dashboard', + .controller('Dashboard', ['$location', '$routeParams', 'common', 'dataservice', Dashboard]); - + function Dashboard($location, $routeParams, common, dataservice) { } ``` @@ -1528,7 +1524,7 @@ Angular社区是一个热衷于分享经验的令人难以置信的社区，尽 .controller('Dashboard', Dashboard); Dashboard.$inject = ['$location', '$routeParams', 'common', 'dataservice']; - + function Dashboard($location, $routeParams, common, dataservice) { } ``` @@ -1571,7 +1567,7 @@ Angular社区是一个热衷于分享经验的令人难以置信的社区，尽 ###### [Style [Y092](#style-y092)] - 用`$inject`手动给Angular组件添加路由解析器依赖。 - + *为什么？*：这种技术打破了路由解析的匿名函数的形式，易读。 *为什么？*：`$inject`语句可以让任何依赖都可以安全压缩。 @@ -1604,7 +1600,7 @@ Angular社区是一个热衷于分享经验的令人难以置信的社区，尽 ###### [Style [Y100](#style-y100)] - 在[Gulp](http://gulpjs.com)或[Grunt](http://gruntjs.com)中使用[ng-annotate](//github.com/olov/ng-annotate)，用`/** @ngInject */`对需要自动依赖注入的function进行注释。 - + *为什么？*：可以避免代码中的依赖使用到任何不安全的写法。 *为什么？*：不推荐用[`ng-min`](https://github.com/btford/ngmin)。 @@ -1681,7 +1677,7 @@ Angular社区是一个热衷于分享经验的令人难以置信的社区，尽 ###### [Style [Y101](#style-y101)] - 在自动化任务中使用[gulp-ng-annotate](https://www.npmjs.org/package/gulp-ng-annotate)或[grunt-ng-annotate](https://www.npmjs.org/package/grunt-ng-annotate)，把`/* @ngInject */`注入到任何有依赖关系函数的前面。 - + *为什么？*：ng-annotate会捕获大部分的依赖关系，但是有时候需要借助于`/* @ngInject */`语法提示。 下面的代码是gulp任务使用ngAnnotate的例子。 @@ -1716,7 +1712,7 @@ Angular社区是一个热衷于分享经验的令人难以置信的社区，尽 ###### [Style [Y110](#style-y110)] - 使用一个[decorator](https://docs.angularjs.org/api/auto/service/$provide#decorator)，在配置的时候用[`$provide`](https://docs.angularjs.org/api/auto/service/$provide)服务，当发生异常时，在[`$exceptionHandler`](https://docs.angularjs.org/api/ng/service/$exceptionHandler)服务中执行自定义的处理方法。 - + *为什么？*：在开发时和运行时提供了一种统一的方式来处理未被捕获的Angular异常。 注：另一个选项是用来覆盖service的，这个可以代替decorator，这是一个非常nice的选项，但是如果你想保持默认行为，那么推荐你扩展一个decorator。 @@ -1738,9 +1734,9 @@ Angular社区是一个热衷于分享经验的令人难以置信的社区，尽 function extendExceptionHandler($delegate, toastr) { return function(exception, cause) { $delegate(exception, cause); - var errorData = { - exception: exception, - cause: cause + var errorData = { + exception: exception, + cause: cause }; /** * Could add the error to a service's collection, @@ -1839,10 +1835,10 @@ Angular社区是一个热衷于分享经验的令人难以置信的社区，尽 - 遵循以描述组件功能，然后是类型（可选）的方式来给所有的组件提供统一的命名，我推荐的做法是`feature.type.js`。大多数文件都有2个名字。 * 文件名 (`avengers.controller.js`) * 带有Angular的注册组件名 (`AvengersController`) - + *为什么？*：命名约定有助于为一目了然地找到内容提供一个统一的方式，在项目中和团队中保持统一性是非常重要的，保持统一性对于跨公司来说提供了巨大的效率。 - *为什么？*：命名约定应该只为代码的检索和沟通提供方便。 + *为什么？*：命名约定应该只为代码的检索和沟通提供方便。 ###功能文件命名 ###### [Style [Y121](#style-y121)] @@ -1855,7 +1851,7 @@ Angular社区是一个热衷于分享经验的令人难以置信的社区，尽 ```javascript /** - * common options + * common options */ // Controllers @@ -1884,7 +1880,7 @@ Angular社区是一个热衷于分享经验的令人难以置信的社区，尽 // constants constants.js - + // module definition avengers.module.js @@ -1894,14 +1890,14 @@ Angular社区是一个热衷于分享经验的令人难以置信的社区，尽 // configuration avengers.config.js - + // directives avenger-profile.directive.js avenger-profile.directive.spec.js ``` 注意：另外一种常见的约定就是不要用`controller`这个词来给controller文件命名，例如不要用`avengers.controller.js`，而是用`avengers.js`。所有其它的约定都坚持使用类型作为后缀，但是controller是组件中最为常用的类型，因此这种做法的好处貌似仅仅是节省了打字，但是仍然很容易识别。我建议你为你的团队选择一种约定，并且要保持统一性。我喜欢的命名方式是`avengers.controller.js`。 - + ```javascript /** * recommended @@ -1914,7 +1910,7 @@ Angular社区是一个热衷于分享经验的令人难以置信的社区，尽 ###测试文件命名 ###### [Style [Y122](#style-y122)] - - 和组件命名差不多，带上一个`spec`后缀。 + - 和组件命名差不多，带上一个`spec`后缀。 *为什么？*：为快速识别组件提供统一的方式。 @@ -1949,7 +1945,7 @@ Angular社区是一个热衷于分享经验的令人难以置信的社区，尽 .module .controller('HeroAvengersController', HeroAvengersController); - function HeroAvengers(){ } + function HeroAvengers(){ } ``` ###Controller命名后缀 @@ -1971,7 +1967,7 @@ Angular社区是一个热衷于分享经验的令人难以置信的社区，尽 function AvengersController(){ } ``` - + ###Factory命名 ###### [Style [Y125](#style-y125)] @@ -1980,7 +1976,7 @@ Angular社区是一个热衷于分享经验的令人难以置信的社区，尽 *为什么？*：可以快速识别和引用factory。 *为什么？*：避免与内部使用`$`前缀的服务发生冲突。 - + ```javascript /** * recommended @@ -2006,7 +2002,7 @@ Angular社区是一个热衷于分享经验的令人难以置信的社区，尽 * recommended */ - // avenger-profile.directive.js + // avenger-profile.directive.js angular .module .directive('xxAvengerProfile', xxAvengerProfile); @@ -2050,7 +2046,7 @@ Angular社区是一个热衷于分享经验的令人难以置信的社区，尽 *为什么是LIFT?*: 提供一个有良好扩展的结构，并且是模块化的，更快的找到代码能够帮助开发者提高效率。另一种检查你的app结构的方法就是问你自己：你能多块地打开涉及到一个功能的所有相关文件并开始工作？ 当我发现我的的代码结构很恶心的时候，我就重新看看LIFT准则。 - + 1. 轻松定位代码（L） 2. 一眼识别代码（I） 3. 平直的代码结构（层级不要太多）（F） @@ -2083,7 +2079,7 @@ Angular社区是一个热衷于分享经验的令人难以置信的社区，尽 ###Identify ###### [Style [Y142](#style-y142)] - + - 当你看到一个文件时你应该能够立即知道它包含了什么、代表了什么。 *为什么？*：你花费更少的时间来了解代码代表了什么，并且变得更加高效。如果这意味着你需要更长的名字，那么就这么干吧。文件名一定要具有描述性，保持和文件内容互为一体。避免文件中有多个controller，多个service，甚至是混合的。 @@ -2119,13 +2115,13 @@ Angular社区是一个热衷于分享经验的令人难以置信的社区，尽 - 把定义应用程序总体布局的组件放到`layout`文件夹中，如导航、内容区等等。 *为什么？*：复用。 - + ###按功能划分文件夹结构 ###### [Style [Y152](#style-y152)] - 按照它们代表的功能来给创建的文件夹命名，当文件夹包含的文件超过7个（根据需要自行调整数量限制），就考虑新建文件夹。 - *为什么？*：开发者可以快速定位代码、快速识别文件代表的意思，结构尽可能平直，没有重复，没有多余名字。 + *为什么？*：开发者可以快速定位代码、快速识别文件代表的意思，结构尽可能平直，没有重复，没有多余名字。 *为什么？*：LIFT规范都包括在内。 @@ -2141,21 +2137,21 @@ Angular社区是一个热衷于分享经验的令人难以置信的社区，尽 app/ app.module.js app.config.js - directives/ - calendar.directive.js - calendar.directive.html - user-profile.directive.js - user-profile.directive.html - services/ - dataservice.js + directives/ + calendar.directive.js + calendar.directive.html + user-profile.directive.js + user-profile.directive.html + services/ + dataservice.js localstorage.js - logger.js + logger.js spinner.js layout/ - shell.html + shell.html shell.controller.js - topnav.html - topnav.controller.js + topnav.html + topnav.controller.js people/ attendees.html attendees.controller.js @@ -2165,11 +2161,11 @@ Angular社区是一个热衷于分享经验的令人难以置信的社区，尽 speaker-detail.html speaker-detail.controller.js sessions/ - sessions.html + sessions.html sessions.controller.js sessions.routes.js session-detail.html - session-detail.controller.js + session-detail.controller.js ``` ![实例App结构](https://raw.githubusercontent.com/johnpapa/angular-styleguide/master/assets/modularity-2.png) @@ -2177,49 +2173,49 @@ Angular社区是一个热衷于分享经验的令人难以置信的社区，尽 注意：不要使用按类型划分文件夹结构，因为如果这样的话，当做一个功能时，需要在多个文件夹中来回切换。当应用程序有5个、10个，甚至是25个以上的view、controller（或其他feature）时，这种方式将迅速变得不实用，这就使得它定位文件比按功能分文件夹的方式要困难的多。 ```javascript - /* + /* * avoid * Alternative folders-by-type. * I recommend "folders-by-feature", instead. */ - + app/ app.module.js app.config.js app.routes.js directives.js controllers/ - attendees.js - session-detail.js - sessions.js - shell.js - speakers.js - speaker-detail.js + attendees.js + session-detail.js + sessions.js + shell.js + speakers.js + speaker-detail.js topnav.js directives/ calendar.directive.js calendar.directive.html user-profile.directive.js user-profile.directive.html - services/ - dataservice.js + services/ + dataservice.js localstorage.js - logger.js - spinner.js + logger.js + spinner.js views/ - attendees.html + attendees.html session-detail.html - sessions.html - shell.html - speakers.html + sessions.html + shell.html + speakers.html speaker-detail.html - topnav.html - ``` - + topnav.html + ``` + **[返回顶部](#目录)** ## 模块化 - + ###许多小的、独立的模块 ###### [Style [Y160](#style-y160)] @@ -2260,7 +2256,7 @@ Angular社区是一个热衷于分享经验的令人难以置信的社区，尽 - 为通用service创建代表可重用的应用程序块的模块，例如异常处理、日志记录、诊断、安全性和本地数据储藏等模块。 *为什么？*：这些类型的功能在很多应用程序中都需要用到，所以把它们分离到自己的模块中，它们可以变成通用的应用程序，也能被跨应用地进行重用。 - + ###模块依赖 ###### [Style [Y165](#style-y165)] @@ -2296,9 +2292,9 @@ Angular社区是一个热衷于分享经验的令人难以置信的社区，尽 .module('app') .config(configure); - configure.$inject = + configure.$inject = ['routerHelperProvider', 'exceptionHandlerProvider', 'toastr']; - + function configure (routerHelperProvider, exceptionHandlerProvider, toastr) { exceptionHandlerProvider.configure(config.appErrorPrefix); configureStateHelper(); @@ -2424,7 +2420,7 @@ Angular社区是一个热衷于分享经验的令人难以置信的社区，尽 - 在服务器上使用[PhantomJS](http://phantomjs.org/)来运行你的测试。 - *为什么？*：PhantomJS是一个headless browser，无需一个“可视”的浏览器来帮助你运行测试。因此你的服务器上不需要安装Chrome、Safari、IE或是其它浏览器。 + *为什么？*：PhantomJS是一个headless browser，无需一个“可视”的浏览器来帮助你运行测试。因此你的服务器上不需要安装Chrome、Safari、IE或是其它浏览器。 注意：你仍然需要在你的环境下测试所有浏览器，来满足用户的需求。 @@ -2497,7 +2493,7 @@ Angular社区是一个热衷于分享经验的令人难以置信的社区，尽 ###Sub Second ###### [Style [Y211](#style-y211)] - - 使用短持续性的动画，我一般使用300ms，然后调整到合适的时间。 + - 使用短持续性的动画，我一般使用300ms，然后调整到合适的时间。 *为什么？*：长时间的动画容易造成用户认为程序性能太差的影响。 @@ -2553,7 +2549,7 @@ Angular社区是一个热衷于分享经验的令人难以置信的社区，尽 /** * @name logError * @desc Logs errors - * @param {String} msg Message to log + * @param {String} msg Message to log * @returns {String} * @memberOf Factories.Logger */ @@ -2575,7 +2571,7 @@ Angular社区是一个热衷于分享经验的令人难以置信的社区，尽 - 用JS Hint来分析你的JavaScript代码，确保你自定义了JS Hint选项文件并且包含在源控制里。详细信息：[JS Hint文档](http://www.jshint.com/docs/)。 - *为什么？*：提交代码到原版本之前先发出警告。 + *为什么？*：提交代码到原版本之前先发出警告。 *为什么？*：统一性。 @@ -2789,11 +2785,11 @@ Angular社区是一个热衷于分享经验的令人难以置信的社区，尽 ###Sublime Text ###### [Style [Y250](#style-y250)] - - Angular片段遵循这些规范。 + - Angular片段遵循这些规范。 - - 下载[Sublime Angular snippets](assets/sublime-angular-snippets?raw=true) + - 下载[Sublime Angular snippets](assets/sublime-angular-snippets?raw=true) - 把它放到Packages文件夹中 - - 重启Sublime + - 重启Sublime - 在JavaScript文件中输入下面的命令然后按下`TAB`键即可： ```javascript @@ -2819,12 +2815,12 @@ Angular社区是一个热衷于分享经验的令人难以置信的社区，尽 - 你可以把它们导入到WebStorm设置中: - - 下载[WebStorm Angular file templates and snippets](https://github.com/johnpapa/angular-styleguide/blob/master/assets/webstorm-angular-file-template.settings.jar?raw=true) + - 下载[WebStorm Angular file templates and snippets](https://github.com/johnpapa/angular-styleguide/blob/master/assets/webstorm-angular-file-template.settings.jar?raw=true) - 打开WebStorm点击`File`菜单 - 选择`Import Settings`菜单选项 - 选择文件点击`OK` - 在JavaScript文件中输入下面的命令然后按下`TAB`键即可： - + ```javascript ng-c // creates an Angular controller ng-f // creates an Angular factory @@ -3075,7 +3071,7 @@ Angular社区是一个热衷于分享经验的令人难以置信的社区，尽 ## 许可证 - - **tldr;** 如果可以的话，使用本规范的时候还是指明归属吧。 + - **tldr;** 如果可以的话，使用本规范的时候还是指明归属吧。 ### Copyright From f42ee71a8fb6070440e0a7294d116b96448a0c3e Mon Sep 17 00:00:00 2001 From: Javier Pena Date: Thu, 20 Aug 2015 01:26:27 -0500 Subject: [PATCH 083/248] Added modified snippets for vim's ultisnips plugin Filenames are prepended with 'javascript_' so UltiSnips will load them for javascript files. --- README.md | 6 ++++ .../javascript_angular.controller.snippets | 22 ++++++++++++ .../javascript_angular.directive.snippets | 35 +++++++++++++++++++ .../javascript_angular.factory.snippets | 22 ++++++++++++ .../javascript_angular.filter.snippets | 19 ++++++++++ .../javascript_angular.module.snippets | 10 ++++++ .../javascript_angular.service.snippets | 19 ++++++++++ 7 files changed, 133 insertions(+) create mode 100644 assets/vim-angular-ultisnips/javascript_angular.controller.snippets create mode 100644 assets/vim-angular-ultisnips/javascript_angular.directive.snippets create mode 100644 assets/vim-angular-ultisnips/javascript_angular.factory.snippets create mode 100644 assets/vim-angular-ultisnips/javascript_angular.filter.snippets create mode 100644 assets/vim-angular-ultisnips/javascript_angular.module.snippets create mode 100644 assets/vim-angular-ultisnips/javascript_angular.service.snippets diff --git a/README.md b/README.md index 3f5ef258..47bbbfc3 100644 --- a/README.md +++ b/README.md @@ -2974,6 +2974,12 @@ Use file templates or snippets to help follow consistent styles and patterns. He - set [neosnippet.vim](https://github.com/Shougo/neosnippet.vim) - copy snippets to snippet directory + - vim UltiSnips snippets that follow these styles and guidelines. + + - Download the [vim Angular UltiSnips snippets](assets/vim-angular-ultisnips?raw=true) + - set [UltiSnips](https://github.com/SirVer/ultisnips) + - copy snippets to UltiSnips directory + ```javascript ngcontroller // creates an Angular controller ngdirective // creates an Angular directive diff --git a/assets/vim-angular-ultisnips/javascript_angular.controller.snippets b/assets/vim-angular-ultisnips/javascript_angular.controller.snippets new file mode 100644 index 00000000..51cfdc16 --- /dev/null +++ b/assets/vim-angular-ultisnips/javascript_angular.controller.snippets @@ -0,0 +1,22 @@ +snippet ngcontroller +(function() { + 'use strict'; + + angular + .module('${1:module}') + .controller('${2:Controller}Controller', $2Controller); + + /* @ngInject */ + function $2Controller(${3:dependencies}) { + var vm = this; + vm.title = '$2Controller'; + + activate(); + + //////////////// + + function activate() { + } + } +})(); +endsnippet diff --git a/assets/vim-angular-ultisnips/javascript_angular.directive.snippets b/assets/vim-angular-ultisnips/javascript_angular.directive.snippets new file mode 100644 index 00000000..14c882f5 --- /dev/null +++ b/assets/vim-angular-ultisnips/javascript_angular.directive.snippets @@ -0,0 +1,35 @@ +snippet ngdirective +(function() { + 'use strict'; + + angular + .module('${1:module}') + .directive('${2:directive}', $2); + + /* @ngInject */ + function $2(${3:dependencies}) { + // Usage: + // + // Creates: + // + var directive = { + bindToController: true, + controller: ${4:Controller}, + controllerAs: '${5:vm}', + link: link, + restrict: 'A', + scope: { + } + }; + return directive; + + function link(scope, element, attrs) { + } + } + + /* @ngInject */ + function $4() { + + } +})(); +endsnippet diff --git a/assets/vim-angular-ultisnips/javascript_angular.factory.snippets b/assets/vim-angular-ultisnips/javascript_angular.factory.snippets new file mode 100644 index 00000000..41966ff7 --- /dev/null +++ b/assets/vim-angular-ultisnips/javascript_angular.factory.snippets @@ -0,0 +1,22 @@ +snippet ngfactory +(function() { + 'use strict'; + + angular + .module('${1:module}') + .factory('${2:factory}', $2); + + /* @ngInject */ + function $2(${3:dependencies}) { + var service = { + ${4:func}: $4 + }; + return service; + + //////////////// + + function $4() { + } + } +})(); +endsnippet diff --git a/assets/vim-angular-ultisnips/javascript_angular.filter.snippets b/assets/vim-angular-ultisnips/javascript_angular.filter.snippets new file mode 100644 index 00000000..e2b10ef6 --- /dev/null +++ b/assets/vim-angular-ultisnips/javascript_angular.filter.snippets @@ -0,0 +1,19 @@ +snippet ngfilter +(function() { + 'use strict'; + + angular + .module('${1:module}') + .filter('${2:filter}', $2); + + function $2() { + return $2Filter; + + //////////////// + function $2Filter(${3:params}) { + return $3; + }; + } + +})(); +endsnippet diff --git a/assets/vim-angular-ultisnips/javascript_angular.module.snippets b/assets/vim-angular-ultisnips/javascript_angular.module.snippets new file mode 100644 index 00000000..972018df --- /dev/null +++ b/assets/vim-angular-ultisnips/javascript_angular.module.snippets @@ -0,0 +1,10 @@ +snippet ngmodule +(function() { + 'use strict'; + + angular + .module('${1:module}', [ + '${2:dependencies}' + ]); +})(); +endsnippet diff --git a/assets/vim-angular-ultisnips/javascript_angular.service.snippets b/assets/vim-angular-ultisnips/javascript_angular.service.snippets new file mode 100644 index 00000000..53a8692d --- /dev/null +++ b/assets/vim-angular-ultisnips/javascript_angular.service.snippets @@ -0,0 +1,19 @@ +snippet ngservice +(function() { + 'use strict'; + + angular + .module('${1:module}') + .service('${2:Service}', $2); + + /* @ngInject */ + function $2(${3:dependencies}) { + this.${4:func} = $4; + + //////////////// + + function $4() { + } + } +})(); +endsnippet From 7333a935ab76b9d8433e9897c3ea27331ec8ff7a Mon Sep 17 00:00:00 2001 From: Bruno Wego Date: Sat, 22 Aug 2015 17:38:27 -0300 Subject: [PATCH 084/248] Rename PT-BR.md to pt-BR.md --- i18n/{PT-BR.md => pt-BR.md} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename i18n/{PT-BR.md => pt-BR.md} (100%) diff --git a/i18n/PT-BR.md b/i18n/pt-BR.md similarity index 100% rename from i18n/PT-BR.md rename to i18n/pt-BR.md From 326a0fa5ffa15646611fa00d8af7103abba889ae Mon Sep 17 00:00:00 2001 From: jedgell Date: Sun, 23 Aug 2015 02:56:28 -0400 Subject: [PATCH 085/248] Clarified a statement which suggested $scope was injectable into factories. Per the docs at https://docs.angularjs.org/error/$injector/unpr Attempting to inject a scope object into anything that's not a controller or a directive, for example a service, will also throw an Unknown provider: $scopeProvider <- $scope error. --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 47bbbfc3..26b3da03 100644 --- a/README.md +++ b/README.md @@ -329,7 +329,7 @@ While this guide explains the *what*, *why* and *how*, I find it helpful to see *Why?*: `controllerAs` is syntactic sugar over `$scope`. You can still bind to the View and still access `$scope` methods. - *Why?*: Helps avoid the temptation of using `$scope` methods inside a controller when it may otherwise be better to avoid them or move them to a factory. Consider using `$scope` in a factory, or if in a controller just when needed. For example when publishing and subscribing events using [`$emit`](https://docs.angularjs.org/api/ng/type/$rootScope.Scope#$emit), [`$broadcast`](https://docs.angularjs.org/api/ng/type/$rootScope.Scope#$broadcast), or [`$on`](https://docs.angularjs.org/api/ng/type/$rootScope.Scope#$on) consider moving these uses to a factory and invoke from the controller. + *Why?*: Helps avoid the temptation of using `$scope` methods inside a controller when it may otherwise be better to avoid them or move the method to a factory, and reference them from the controller. Consider using `$scope` in a controller only when needed. For example when publishing and subscribing events using [`$emit`](https://docs.angularjs.org/api/ng/type/$rootScope.Scope#$emit), [`$broadcast`](https://docs.angularjs.org/api/ng/type/$rootScope.Scope#$broadcast), or [`$on`](https://docs.angularjs.org/api/ng/type/$rootScope.Scope#$on) consider moving these uses to a factory and invoke from the controller. ```javascript /* avoid */ From 7c50c85d08a84bc456e5a76c215cf60dadd7fe2b Mon Sep 17 00:00:00 2001 From: angelochiello Date: Thu, 27 Aug 2015 11:16:27 +0200 Subject: [PATCH 086/248] [it-IT] PR #485 Updated as PR #485 --- i18n/it-IT.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/i18n/it-IT.md b/i18n/it-IT.md index f2910846..a1c69207 100644 --- a/i18n/it-IT.md +++ b/i18n/it-IT.md @@ -1610,7 +1610,7 @@ Invece usa la più semplice sintassi setter. ### ng-annotate ###### [Stile [Y100](#stile-y100)] - - Usa [ng-annotate](//github.com/olov/ng-annotate) per [Gulp](http://gulpjs.com) o [Grunt](http://gruntjs.com) e commenta le funzioni che necessitano di automatizzare la dependency injection usando `/** @ngInject */` + - Usa [ng-annotate](//github.com/olov/ng-annotate) per [Gulp](http://gulpjs.com) o [Grunt](http://gruntjs.com) e commenta le funzioni che necessitano di automatizzare la dependency injection usando `/* @ngInject */` *Perché?*: Questo salvaguarda il tuo codice da ogni dipendenza che non segua le pratiche a prova di minificazione From efb5f55bf6d35ebb7f0a9b45b8e2e09f5787fe07 Mon Sep 17 00:00:00 2001 From: angelochiello Date: Thu, 27 Aug 2015 11:20:19 +0200 Subject: [PATCH 087/248] [it-IT] PR #498 Updated as PR #498 --- i18n/it-IT.md | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/i18n/it-IT.md b/i18n/it-IT.md index a1c69207..50af9867 100644 --- a/i18n/it-IT.md +++ b/i18n/it-IT.md @@ -2967,7 +2967,12 @@ Usa file template o snippet che ti aiutino a seguire stili e schemi consistentem - Scarica gli [snippet vim per Angular](assets/vim-angular-snippets?raw=true) - setta [neosnippet.vim](https://github.com/Shougo/neosnippet.vim) - copia gli snippets nella directory snippet + + - snippet vim UltiSnips che seguono questi stilili e linee guida. + - Scarica gli [snippet vim Angular UltiSnips](assets/vim-angular-ultisnips?raw=true) + - setta [UltiSnips](https://github.com/SirVer/ultisnips) + - copia gli snippet nella directory UltiSnips ```javascript ngcontroller // crea un controller Angular ngdirective // crea una directive Angular From c0268ac05117c3e276ae9f6cbf72a4a8cad3dde7 Mon Sep 17 00:00:00 2001 From: angelochiello Date: Thu, 27 Aug 2015 11:28:14 +0200 Subject: [PATCH 088/248] [it-IT] PR #504 Updated as PR #504 --- i18n/it-IT.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/i18n/it-IT.md b/i18n/it-IT.md index 50af9867..a48e0f29 100644 --- a/i18n/it-IT.md +++ b/i18n/it-IT.md @@ -329,7 +329,7 @@ Invece usa la più semplice sintassi setter. *Perché?*: `controllerAs` è una semplificazione sintattica per `$scope`. Puoi ancora fare il binding con la View ed accedere ai metodi di `$scope`. - *Perché?*: Aiuta ad evitare la tentazione ad usare i metodi di `$scope` dentro un controller quando sarebbe meglio evitare o spostarli in una factory. Considera l'uso di `$scope` in una factory o, se in un controller, soltanto quando necessario. Per esempio, quando si pubblicano o sottoscrivono eventi usando [`$emit`](https://docs.angularjs.org/api/ng/type/$rootScope.Scope#$emit), [`$broadcast`](https://docs.angularjs.org/api/ng/type/$rootScope.Scope#$broadcast), o [`$on`](https://docs.angularjs.org/api/ng/type/$rootScope.Scope#$on) considera di spostare questi tipi di utilizzi in una facotry e di invocarli da un controller. + *Perché?*: Aiuta ad evitare la tentazione ad usare i metodi di `$scope` dentro un controller quando sarebbe meglio evitare o spostarli in una factory quindi referenziarli dal controller. Considera l'uso di `$scope` in un controller soltanto quando necessario. Per esempio, quando si pubblicano o sottoscrivono eventi usando [`$emit`](https://docs.angularjs.org/api/ng/type/$rootScope.Scope#$emit), [`$broadcast`](https://docs.angularjs.org/api/ng/type/$rootScope.Scope#$broadcast), o [`$on`](https://docs.angularjs.org/api/ng/type/$rootScope.Scope#$on) considera di spostare questi tipi di utilizzi in una facotry e di invocarli da un controller. ```javascript /* evitare */ From 23feefefb21977f067c6ef53c668317689713e00 Mon Sep 17 00:00:00 2001 From: Zlati Pehlivanov Date: Thu, 27 Aug 2015 14:07:17 +0300 Subject: [PATCH 089/248] fix #458 add: netbeans code templates xml --- ...es-editor-settings-CustomCodeTemplates.xml | 208 ++++++++++++++++++ 1 file changed, 208 insertions(+) create mode 100644 assets/org-netbeans-modules-editor-settings-CustomCodeTemplates.xml diff --git a/assets/org-netbeans-modules-editor-settings-CustomCodeTemplates.xml b/assets/org-netbeans-modules-editor-settings-CustomCodeTemplates.xml new file mode 100644 index 00000000..93f7bfa1 --- /dev/null +++ b/assets/org-netbeans-modules-editor-settings-CustomCodeTemplates.xml @@ -0,0 +1,208 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + From c75a0eacaf583378502fd745895ded669a899e46 Mon Sep 17 00:00:00 2001 From: Lauriane Date: Thu, 27 Aug 2015 21:50:26 +0200 Subject: [PATCH 090/248] Correct french wording --- i18n/fr-FR.md | 22 +++++++++++----------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/i18n/fr-FR.md b/i18n/fr-FR.md index 96f369c1..25f18d79 100644 --- a/i18n/fr-FR.md +++ b/i18n/fr-FR.md @@ -901,7 +901,7 @@ Bien que ce guide explique le *quoi*, le *pourquoi* et le *comment*, il m'est ut - *Refactorez* la logique pour faire les opérations et interactions avec les données dans une *factory*. Rendez les services de données responsables des appels *XHR*, du *local storage*, du stockage en mémoire, ou de toute autre opération sur les données. - *Pourquoi ?* : Les responsabilités du contrôleur sont la présentation et l'assemblage des informations pour la vue. Il ne devrait pas avoir à se soucier de la façon dont les données sont récupérées mais seulement de la façon de les demander. Séparer les services de données transforme la logique du contrôleur en logique de « À quel service vais-je demander ces données ? ». Le contrôleur esr alors plus simple est plus focalisé sur sa vue. + *Pourquoi ?* : Les responsabilités du contrôleur sont la présentation et l'assemblage des informations pour la vue. Il ne devrait pas avoir à se soucier de la façon dont les données sont récupérées mais seulement de la façon de les demander. Séparer les services de données transforme la logique du contrôleur en logique de « À quel service vais-je demander ces données ? ». Le contrôleur est alors plus simple est plus focalisé sur sa vue. *Pourquoi ?* : Cela rend plus facile à tester (*mocké* ou en utilisant le vrai) les appels aux données lorsque l'on teste un contrôleur qui utilise un service de données. @@ -1116,7 +1116,7 @@ Bien que ce guide explique le *quoi*, le *pourquoi* et le *comment*, il m'est ut ### Manipuler le DOM dans une directive ###### [Style [Y072](#style-y072)] - - Quand vous manipulez le DOM est directement, utilisez une directive. S'il existe des alternatives, comme par exemple le CSS pour définir les styles ou les [services d'animation](https://docs.angularjs.org/api/ngAnimate), les *templates* Angular , [`ngShow`](https://docs.angularjs.org/api/ng/directive/ngShow) ou [`ngHide`](https://docs.angularjs.org/api/ng/directive/ngHide), utilisez les à la place. Par exemple si la directive affiche ou cache un élément, utilisez ngHide ou ngShow. + - Quand vous manipulez le DOM directement, utilisez une directive. S'il existe des alternatives, comme par exemple le CSS pour définir les styles ou les [services d'animation](https://docs.angularjs.org/api/ngAnimate), les *templates* Angular , [`ngShow`](https://docs.angularjs.org/api/ng/directive/ngShow) ou [`ngHide`](https://docs.angularjs.org/api/ng/directive/ngHide), utilisez les à la place. Par exemple si la directive affiche ou cache un élément, utilisez ngHide ou ngShow. *Pourquoi ?* : La manipulation du DOM peut être difficile à tester, déboguer, et il y a souvent une meilleure façon de faire (ex : CSS, animations, *templates*). @@ -1767,7 +1767,7 @@ Bien que ce guide explique le *quoi*, le *pourquoi* et le *comment*, il m'est ut *Pourquoi ?* : Cela fournit un moyen cohérent pour intercepter les exceptions qui peuvent être déclenchées dans votre code (par exemple, pendant une requête XHR ou lors d'un échec de *promise*). - Note : Le intercepteur d'exceptions est bon pour intercepter et réagir à des exceptions spécifiques potentielles provenant d'appels qui pourraient en produire. Par exemple, lorsque on fait une requête XHR pour récupérer des données d'un service web distant et que vous voulez intercepter n'importe quelles exceptions provenant de ce service uniquement et réagir seulement à celles-ci. + Note : L'intercepteur d'exceptions est bon pour intercepter et réagir à des exceptions spécifiques potentielles provenant d'appels qui pourraient en produire. Par exemple, lorsque on fait une requête XHR pour récupérer des données d'un service web distant et que vous voulez intercepter n'importe quelles exceptions provenant de ce service uniquement et réagir seulement à celles-ci. ```javascript /* recommandé */ @@ -2305,7 +2305,7 @@ Bien que ce guide explique le *quoi*, le *pourquoi* et le *comment*, il m'est ut *Pourquoi ?* : Les fonctionnalités propres à l'application telles que les services de données partagées deviennent faciles à repérer et partager au sein d'un `app.core` (choisissez un nom de votre choix pour ce module). - Note : C'est un stratégie pour la cohérence. Il y a ici beaucoup de bons choix. Choisissez-en une qui soit cohérente, suivez les règles des dépendances d'Angular, et la maintenance et la montée en charge sera facilitée. + Note : C'est une stratégie pour la cohérence. Il y a ici beaucoup de bons choix. Choisissez-en une qui soit cohérente, qui suit les règles des dépendances d'Angular, et qui facilite la maintenance et la montée en charge. > Mes structures peuvent varier légèrement entre les projets mais elles suivent toutes ces règles pour la structure et la modularité. L'implémentation peut varier en fonction des fonctionnalités et de l'équipe. En d'autres termes, ne vous paralysez pas sur une structure exactement semblable mais pensez votre structure en termes de cohérence, maintenabilité, et efficacité. @@ -2388,9 +2388,9 @@ Bien que ce guide explique le *quoi*, le *pourquoi* et le *comment*, il m'est ut **[Retour en haut de page](#table-des-matières)** ## Tests -Les tests unitaires aident à maintenir un code source propre, ainsi j'ai inclut quelques unes de mes recommandations sur les bases des tests unitaires avec des liens pour plus d'informations. +Les tests unitaires aident à maintenir un code source propre, ainsi j'ai inclus quelques unes de mes recommandations sur les bases des tests unitaires avec des liens pour plus d'informations. -### Écrire les tests avec des scenarii +### Écrire les tests avec des scenario ###### [Style [Y190](#style-y190)] - Écrivez un ensemble de tests pour chaque scenario. Commencer avec un test vide et complétez-les à mesure que vous écrivez le code pour le scenario. @@ -2510,7 +2510,7 @@ Les tests unitaires aident à maintenir un code source propre, ainsi j'ai inclut - Exécutez JSHint sur vos tests. - *Pourquoi ?* : Les tests' c'est aussi du code. JSHint peut vous aider à identifier les problèmes de qualité de code qui pourrait amener les tests à fonctionner de façon incorrecte. + *Pourquoi ?* : Les tests c'est aussi du code. JSHint peut vous aider à identifier les problèmes de qualité de code qui pourrait amener les tests à fonctionner de façon incorrecte. ### Assouplissement des règles de JSHint avec les variables globales dans les tests ###### [Style [Y196](#style-y196)] @@ -2531,10 +2531,10 @@ Les tests unitaires aident à maintenir un code source propre, ainsi j'ai inclut ![Outils de test](https://raw.githubusercontent.com/johnpapa/angular-styleguide/master/assets/testing-tools.png) -### Organizing Tests +### Organisation des tests ###### [Style [Y197](#style-y197)] - - Placez les fichiers des tests unitaires (specs) à parallèlement du code client. Placez les specs qui sont en charge de l'intégration avec le serveur ou les celles qui testent plusieurs composants dans un répertoire `tests` séparé. + - Placez les fichiers des tests unitaires (specs) parallèle au code client. Placez les specs qui sont en charge de l'intégration avec le serveur ou celles qui testent plusieurs composants dans un répertoire `tests` séparé. *Pourquoi ?* : Les tests unitaires sont en corrélation directe avec les composants et fichiers qu'ils testent dans le code source. @@ -2837,7 +2837,7 @@ Les tests unitaires aident à maintenir un code source propre, ainsi j'ai inclut ###### [Style [Y241](#style-y241)] - - Utilisez des constantes pour les valeurs qui ne changent pas et ne viennent pas d'un autre service. Quand des contentes ne sont pas utilisées que par un module qui peut être ré-utilisé dans d'autres applications, placez les constantes dans un seul fichier par module nommé comme le module. Tant que c'est possible, gardez les constantes dans le module principal dans un fichier `constants.js`. + - Utilisez des constantes pour les valeurs qui ne changent pas et ne viennent pas d'un autre service. Quand des constantes ne sont utilisées que par un module qui peut être ré-utilisé dans d'autres applications, placez les constantes dans un seul fichier par module nommé comme le module. Tant que c'est possible, gardez les constantes dans le module principal dans un fichier `constants.js`. *Pourquoi ?* : Une valeur qui peut changer, même rarement, devrait être récupérée d'un service afin de ne pas avoir à changer le code source. Par exemple, une URL pour un service de données pourrait être définie comme constante mais il serait mieux de lire cette valeur par appel à un web service. @@ -3114,7 +3114,7 @@ Utilisez [Gulp](http://gulpjs.com) ou [Grunt](http://gruntjs.com) pour créer de - Utilisez l'automatisation des tâches pour lister les fichiers de définition de module `*.module.js` avant tout autre fichier JavaScript de l'application. - *Pourquoi ?* : Angular a besoin que la définition des modules soit faire avant qu'ils puissent être utilisés. + *Pourquoi ?* : Angular a besoin que la définition des modules soit faite avant qu'ils puissent être utilisés. *Pourquoi ?* : Nommer les modules avec un pattern spécifique tel que `*.module.js` les rends faciles à aller chercher avec une expression régulière et à les lister. From 9edaf82eb08bee018e554140d2c1d71a7a04e98a Mon Sep 17 00:00:00 2001 From: matt Date: Thu, 27 Aug 2015 13:28:02 -0700 Subject: [PATCH 091/248] typo --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 26b3da03..1b48be9d 100644 --- a/README.md +++ b/README.md @@ -2017,7 +2017,7 @@ While this guide explains the *what*, *why* and *how*, I find it helpful to see function creditService() { } - // credit.service.js + // customer.service.js angular .module .service('customersService', customersService); From 58006aa88ccc7fa8ba86d3c63a4cd8d7ef6c820a Mon Sep 17 00:00:00 2001 From: John Papa Date: Thu, 27 Aug 2015 22:13:55 -0700 Subject: [PATCH 092/248] Revert "fix #458" --- ...es-editor-settings-CustomCodeTemplates.xml | 208 ------------------ 1 file changed, 208 deletions(-) delete mode 100644 assets/org-netbeans-modules-editor-settings-CustomCodeTemplates.xml diff --git a/assets/org-netbeans-modules-editor-settings-CustomCodeTemplates.xml b/assets/org-netbeans-modules-editor-settings-CustomCodeTemplates.xml deleted file mode 100644 index 93f7bfa1..00000000 --- a/assets/org-netbeans-modules-editor-settings-CustomCodeTemplates.xml +++ /dev/null @@ -1,208 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - From 8ffb4a5849bff666f9ff0eb759c0d0bf79522022 Mon Sep 17 00:00:00 2001 From: John Papa Date: Mon, 31 Aug 2015 07:39:24 -0400 Subject: [PATCH 093/248] added angular snippets for js and ts for vscode --- assets/vscode-snippets/javascript.json | 124 +++++++++++++++++++++++++ assets/vscode-snippets/typescript.json | 64 +++++++++++++ 2 files changed, 188 insertions(+) create mode 100644 assets/vscode-snippets/javascript.json create mode 100644 assets/vscode-snippets/typescript.json diff --git a/assets/vscode-snippets/javascript.json b/assets/vscode-snippets/javascript.json new file mode 100644 index 00000000..b0957f61 --- /dev/null +++ b/assets/vscode-snippets/javascript.json @@ -0,0 +1,124 @@ +{ + "Angular Controller": { + "prefix": "ngcontroller", + "body": [ + "(function() {", + "'use strict';", + "", + "\tangular", + "\t\t.module('${Module}')", + "\t\t.controller('${Controller}Controller', ${Controller}Controller);", + "", + "\t${Controller}Controller.$inject = ['${dependency1}'];", + "\tfunction ${Controller}Controller(${dependency1}) {", + "\t\tvar vm = this;", + "\t\t$0", + "", + "\t\tactivate();", + "", + "\t\t////////////////", + "", + "\t\tfunction activate() { }", + "\t}", + "})();" + ], + "description": "Angular 1 controller" + }, + "Angular Service": { + "prefix": "ngservice", + "body": [ + "(function() {", + "'use strict';", + "", + "\tangular", + "\t\t.module('${Module}')", + "\t\t.service('${Service}', ${Service});", + "", + "\t${Service}.$inject = ['${dependency1}'];", + "\tfunction ${Service}(${dependency1}) {", + "\t\tthis.${exposedFn} = ${exposedFn};", + "\t\t$0", + "\t\t////////////////", + "\t\tfunction ${exposedFn}() { }", + "\t}", + "})();" + ], + "description": "Angular 1 service" + }, + "Angular Factory": { + "prefix": "ngfactory", + "body": [ + "(function() {", + "'use strict';", + "", + "\tangular", + "\t\t.module('${Module}')", + "\t\t.factory('${Service}', ${Service});", + "", + "\t${Service}.$inject = ['${dependency1}'];", + "\tfunction ${Service}(${dependency1}) {", + "\t\tvar service = {", + "\t\t\t${exposedFn}:${exposedFn}", + "\t\t};", + "\t\t$0", + "\t\treturn service;", + "", + "\t\t////////////////", + "\t\tfunction ${exposedFn}() { }", + "\t}", + "})();" + ], + "description": "Angular 1 factory" + }, + "Angular Directive": { + "prefix": "ngdirective", + "body": [ + "(function() {", + "\t'use strict';", + "", + "\tangular", + "\t\t.module('${Module}')", + "\t\t.factory('${Directive}', ${Directive});", + "", + "\t${Directive}.$inject = ['${dependency1}'];", + "\tfunction ${Directive}(${dependency1}) {", + "\t\t// Usage:", + "\t\t//", + "\t\t// Creates:", + "\t\t//", + "\t\tvar directive = {", + "\t\t bindToController: true,", + "\t\t controller: ${Controller}Controller,", + "\t\t controllerAs: '${vm}',", + "\t\t link: link,", + "\t\t restrict: 'A',", + "\t\t scope: {", + "\t\t }", + "\t\t};", + "\t\treturn directive;", + "\t\t", + "\t\tfunction link(scope, element, attrs) {", + "\t\t}", + "\t}", + "\t/* @ngInject */", + "\tfunction ${Controller}Controller () {", + "\t\t$0", + "\t}", + "})();" + ], + "description": "Angular 1 directive" + }, + "Angular Module": { + "prefix": "ngmodule", + "body": [ + "(function() {", + "\t'use strict';", + "", + "\tangular.module('${module}', [", + "\t\t$0", + "\t]);", + "})();" + ], + "description": "Angular 1 module" + } +} \ No newline at end of file diff --git a/assets/vscode-snippets/typescript.json b/assets/vscode-snippets/typescript.json new file mode 100644 index 00000000..716dc70e --- /dev/null +++ b/assets/vscode-snippets/typescript.json @@ -0,0 +1,64 @@ +{ + "Angular Controller": { + "prefix": "ngcontroller", + "body": [ + "namespace ${module} {", + "'use strict';", + "", + "export class ${Controller}Controller {", + "\tstatic $inject: Array = ['${dependency1}'];", + "\tconstructor(private ${dependency1}: ${dependency1Type}) {", + "$0", + "}", + "", + "\t${property}: ${propertyType} = ${propertyValue};", + "", + "\t${fn}() { }", + "}", + "", + "angular", + "\t.module('${Module}')", + "\t.controller('${Controller}Controller', ${Controller}Controller);", + "}" + ] + }, + "Angular Service": { + "prefix": "ngservice", + "body": [ + "namespace ${module} {", + "'use strict';", + "", + "export interface I${Service} {", + "\t${serviceFn}: (${dependency1}:${dependency1Type}) => ${returnType};", + "}", + "export class ${Service} implements I${Service} {", + "\tstatic $inject: Array = ['${dependency1}'];", + "\tconstructor(private ${dependency1}: ${dependency1Type}) {", + "", + "}", + "", + "\t${serviceFn}: (${dependency1}:${dependency1Type}) => ${returnType} = (${dependency1}:${dependency1Type}) => {", + "\t\t$0", + "\t}", + "", + "}", + "", + "angular", + "\t.module('${Module}')", + "\t.service('${Service}', ${Service});", + "}" + ] + }, + "Angular Module": { + "prefix": "ngmodule", + "body": [ + "namespace ${module} {", + "\t'use strict';", + "", + "\tangular.module('${module}', [", + "\t$0", + "\t]);", + "}" + ] + } +} \ No newline at end of file From 28d01f88b4ba9514c47ea024fbe304ecaaf8af8b Mon Sep 17 00:00:00 2001 From: John Papa Date: Mon, 31 Aug 2015 07:42:55 -0400 Subject: [PATCH 094/248] added link to vscode snips --- README.md | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/README.md b/README.md index 1b48be9d..3596dedb 100644 --- a/README.md +++ b/README.md @@ -2988,7 +2988,22 @@ Use file templates or snippets to help follow consistent styles and patterns. He ngservice // creates an Angular service ngfilter // creates an Angular filter ``` +### vim + +###### [Style [Y256](#style-y256)] + + - [Visual Studio Code](http://code.visualstudio.com) snippets that follow these styles and guidelines. + - Download the [VS Code Angular snippets](assets/vscode-snippets/javascript.json?raw=true) + - copy snippets to snippet directory, or alternatively copy and paste the snippets into your existing ones + + ```javascript + ngcontroller // creates an Angular controller + ngdirective // creates an Angular directive + ngfactory // creates an Angular factory + ngmodule // creates an Angular module + ngservice // creates an Angular service + ``` **[Back to top](#table-of-contents)** From 97ae8cec6c41d8f3a9c4f28e9ae353aa78f9c51c Mon Sep 17 00:00:00 2001 From: John Papa Date: Mon, 31 Aug 2015 07:43:36 -0400 Subject: [PATCH 095/248] added link to vscode snips --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 3596dedb..31ea00d2 100644 --- a/README.md +++ b/README.md @@ -2988,7 +2988,7 @@ Use file templates or snippets to help follow consistent styles and patterns. He ngservice // creates an Angular service ngfilter // creates an Angular filter ``` -### vim +### Visual Studio Code ###### [Style [Y256](#style-y256)] From d2fc75468c042b59ac32d35ef44ca05e8967aa16 Mon Sep 17 00:00:00 2001 From: John Papa Date: Mon, 31 Aug 2015 07:44:53 -0400 Subject: [PATCH 096/248] added link to vscode snips --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index 31ea00d2..eb166a02 100644 --- a/README.md +++ b/README.md @@ -2988,6 +2988,7 @@ Use file templates or snippets to help follow consistent styles and patterns. He ngservice // creates an Angular service ngfilter // creates an Angular filter ``` + ### Visual Studio Code ###### [Style [Y256](#style-y256)] From 9489a238b0d1f5de7904fbc5fd56c27591b36eda Mon Sep 17 00:00:00 2001 From: John Papa Date: Tue, 1 Sep 2015 08:32:37 -0400 Subject: [PATCH 097/248] directive for vs code snippets --- assets/vscode-snippets/javascript.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/assets/vscode-snippets/javascript.json b/assets/vscode-snippets/javascript.json index b0957f61..0b1920ad 100644 --- a/assets/vscode-snippets/javascript.json +++ b/assets/vscode-snippets/javascript.json @@ -78,7 +78,7 @@ "", "\tangular", "\t\t.module('${Module}')", - "\t\t.factory('${Directive}', ${Directive});", + "\t\t.directive('${Directive}', ${Directive});", "", "\t${Directive}.$inject = ['${dependency1}'];", "\tfunction ${Directive}(${dependency1}) {", From 9bbd7b625e20af312c5394f39a17760cd8ab8dbb Mon Sep 17 00:00:00 2001 From: Angelo Chiello Date: Thu, 10 Sep 2015 08:39:24 +0200 Subject: [PATCH 098/248] [it-IT] PR #510 Updated as PR #510 --- i18n/it-IT.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/i18n/it-IT.md b/i18n/it-IT.md index a48e0f29..915de520 100644 --- a/i18n/it-IT.md +++ b/i18n/it-IT.md @@ -2016,7 +2016,7 @@ Invece usa la più semplice sintassi setter. function creditService() { } - // credit.service.js + // customer.service.js angular .module .service('customersService', customersService); From 57fb9ca6ed73ca81569fa14a57dace96df21d52a Mon Sep 17 00:00:00 2001 From: Angelo Chiello Date: Thu, 10 Sep 2015 08:43:32 +0200 Subject: [PATCH 099/248] [it-IT] PRs: #515, #516, #517 Updated as PRs: #515, #516, #517 --- i18n/it-IT.md | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) diff --git a/i18n/it-IT.md b/i18n/it-IT.md index 915de520..4730777b 100644 --- a/i18n/it-IT.md +++ b/i18n/it-IT.md @@ -2981,6 +2981,24 @@ Usa file template o snippet che ti aiutino a seguire stili e schemi consistentem ngservice // crea un service Angular ngfilter // crea un filter Angular ``` + +### Visual Studio Code + +###### [Stile [Y256](#stile-y256)] + + - Snippet [Visual Studio Code](http://code.visualstudio.com) che seguono questi stili e linee guida. + + - Scarica gli [snippet VS Code Angular](assets/vscode-snippets/javascript.json?raw=true) + - copia gli snippet nella directory snippet o, in alternativa, copia ed incolla gli snippet in quella esistente. + + ```javascript + ngcontroller // crea un controller Angular + ngdirective // crea una directive Angular + ngfactory // crea una factory Angular + ngmodule // crea un modulo Angular + ngservice // crea un service Angular + ``` + **[Torna all'inizio](#tavola-dei-contenuti)** ## Generatore Yeoman From 9f48188c2b904356615e79c8d3f5103220f7bf26 Mon Sep 17 00:00:00 2001 From: Melissa Austin Date: Wed, 23 Sep 2015 14:28:14 -0700 Subject: [PATCH 100/248] PR for issue #529 - Replace/Add WebStorm live templates, i.e., controller, directive, factory, filter, module, service - Replace .jar file with native .xml format - Enhance original template with default values - Update README WebStorm Style Y252 --- README.md | 18 +- ...ebstorm-angular-file-template.settings.jar | Bin 3862 -> 0 bytes ...gular.controller.webstorm-live-template.js | 25 +++ ...ngular.directive.webstorm-live-template.js | 28 +++ .../angular.factory.webstorm-live-template.js | 24 +++ .../angular.filter.webstorm-live-template.js | 18 ++ .../angular.module.webstorm-live-template.js | 9 + .../angular.service.webstorm-live-template.js | 21 ++ .../webstorm-angular-live-templates.xml | 184 ++++++++++++++++++ 9 files changed, 319 insertions(+), 8 deletions(-) delete mode 100644 assets/webstorm-angular-file-template.settings.jar create mode 100644 assets/webstorm-angular-live-templates/angular.controller.webstorm-live-template.js create mode 100644 assets/webstorm-angular-live-templates/angular.directive.webstorm-live-template.js create mode 100644 assets/webstorm-angular-live-templates/angular.factory.webstorm-live-template.js create mode 100644 assets/webstorm-angular-live-templates/angular.filter.webstorm-live-template.js create mode 100644 assets/webstorm-angular-live-templates/angular.module.webstorm-live-template.js create mode 100644 assets/webstorm-angular-live-templates/angular.service.webstorm-live-template.js create mode 100644 assets/webstorm-angular-live-templates/webstorm-angular-live-templates.xml diff --git a/README.md b/README.md index eb166a02..8b321ad4 100644 --- a/README.md +++ b/README.md @@ -2896,18 +2896,20 @@ Use file templates or snippets to help follow consistent styles and patterns. He ### WebStorm ###### [Style [Y252](#style-y252)] - - Angular snippets and file templates that follow these styles and guidelines. You can import them into your WebStorm settings: + - Angular live templates that follow these styles and guidelines. - - Download the [WebStorm Angular file templates and snippets](assets/webstorm-angular-file-template.settings.jar?raw=true) - - Open WebStorm and go to the `File` menu - - Choose the `Import Settings` menu option - - Select the file and click `OK` + - Download the [webstorm-angular-live-templates.xml](assets/webstorm-angular-live-templates.xml?raw=true) + - Place it in your [templates folder](https://www.jetbrains.com/webstorm/help/project-and-ide-settings.html) + - Restart WebStorm - In a JavaScript file type these commands followed by a `TAB`: ```javascript - ng-c // creates an Angular controller - ng-f // creates an Angular factory - ng-m // creates an Angular module + ngcontroller // creates an Angular controller + ngdirective // creates an Angular directive + ngfactory // creates an Angular factory + ngmodule // creates an Angular module + ngservice // creates an Angular service + ngfilter // creates an Angular filter ``` ### Atom diff --git a/assets/webstorm-angular-file-template.settings.jar b/assets/webstorm-angular-file-template.settings.jar deleted file mode 100644 index 38763068aad28f3bcc300c681c715fe2e09516a7..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 3862 zcma)82{=^y8=e?sm?_3u$z-X>wcQftT4G25x+VjUqui^`U|bk8aNGf4mYo#&i6^PKa0&-Z=jeDC`@+6hBtAWMNw_R?Dn zL?DzPPzcSBNu*I3I!pq^kBnmyv>5~@lSnTU^NSACJR&A2gELj(I^x@lyseA8UV?Nx^x2|&-E8KdvXG#Q+tQ1H0p*b*TVXXY2AIk_p;BEsl~{ z1QfR1aw60!RSC9Tl8A0pzF0G0vrLA`!Ej~AM#P<>A_s;Jc-$KF*)bHQQF=d~M+)I-Mgm0@FnMTZOLvu)|<1h|a-&`zN0V7P-7P!SfVQ zg6NVTMZ$n{2qfA{&+7Zh%mD%Xg2nBcd2tLKenY~o=iaNj;NC6N0|8_l9c4+QGU+rj znLyVjF$j)DqzYY`jwxB%QX9mh)`PI${3E>0W@P? zC;JZa8{Im2g=8VF0Cj{Tg;Tq#R&>i&73bg}agK#)UY5~Z+3HhPls(Y+*B9!^h&5>6 zc!RSEI<&$}6LX({QUxTp*XQ@)uDkm3sn8uCq~y?lXAL$~(&|ka>78SiPLzfn9ql86Q>F*T9v^bKd7#wp{)VeoOxO`2?Dd6gE9c%k>E*2T?jbX+mPGKK*iuX;PO9<;wfmeIv51t5@4k z8OMw(GOEYoq@rv4lcUpq|Lk`q=WsRoV~TnocgpPEdWjO7itww$uJHzDMiZk6B^yKV z2-d@PH94;4hw`(}4k3c&$;Gk-Z$mXiNO|hLSVx{mNxXbY{#Fg|k78iwY&NtX9s>IE z^p~AOE!sJ29G*#|9|HQe*Rco|0e)_=k`~e$cU)k<6z*kBLDghZQzr z+IdV)M<-icqxj_&lE@`r$p+{(w0TCdtcxMsCnm<}#rC=m6>8g_7v_G3+FE$H!uHLU z<+n+F`;}S;1NB(PS7jG8EA{&Q(Pgjhd0*D};uD$5Zn%nAxmd)7x(v*~`l>fxamj8Y z=e}xwLXOoJ4V=L!RhISW*0ziimbK%@Gq0sRj=y#CVzEq_>fW(aYGEx|`#kEV#xIm~ z=+{AyNuLb`h)8T{$>;%tN}%QwbGkBrW_1?riapIcfJ}J#cOrqs1diI2@Be`&HQQ{c zwbSO-)HgTm%IkN62#q!M?2771&Z>DO9dJU;z)%#_sz_?Efxjp z;5!$}j&|MU)4YBDRarN!vZH9ojn}Wivl<$;#iPY9RoP`ory3^pLYMd4tFL2QoT+-O zwsw=U`&Z9Q^aXbP<%kM)eUw6T!^aqvcjJL-_aAt;mVaR6r>eLtsc$WkoFJbbBULkFHv_C7)71BA*n8rWox#?{CMM5-%_f zZRu4u6iAz1yq?d*GGT6T@jrdW&Lrms4aW96v(n`D3re1XkeYnBWSJ%uj&T*6`bjvU3Kw2+kupVUdEiPeNkpT85iUD&M_{wF{FdJK1M=vtwwTK3ZkB(}@+U znO9JqPgHjD3YL4VK+E+P*>YIk;p)SLuBf5>LsbgO^)nj^eT>bu|f!FN`_38~&S8Bb=hE84#)(mcZI+EpaS_R3?a zSSoCs8cl-o8t#f5-;7$h(X;y?g0Yfk7#Wj-mI&;PWTU8SpVV+o$62NpcaP@b3!iYf zF;;rAm1$p{O&IALQtRWI(_x&T+|u`$JU1Ej_5PptxEdi=r0kER9N%v${BQ$(JQGo& z(mG*;9C~y(2#>4iUAg*O$se8tllR_6?0zE;Qj?6cNgqcD0y)1-&@*Mvvj}kD^Cwan zOdQ|^ytSDuraHGAegp;hK6b9(QL04`Y^nW}Ya4XUT8H8Cpb&NAirn-|I}?Qu^K`Op zeI7*yORh=dCP-J)zZSmsf5tlRbo=qGb|=FSFoOqBWaU->-yYccq%%JQCE)5dDw9Aa z6Kzr3FjiYoTgfyp92te3aiorRON3+~d@Czx20<%3H)ajs?CdWvw)5cxZ5Jr~{AdAA zXW< z&rfC+P|)Md#}m{$6hAxQ%ma84bBmkB<14=)8rUj9RRT4VAO0eXp)IPIAo%Qi_?fWr z!4*a4gU`s^;sBt~@xyijfPn1%SCFuufc#Ge7Y6}_kRQbhKxSl-5AZW# + + + + + + + \ No newline at end of file From e9238b9d0c3f16851e519f6ddbb42795fda102e4 Mon Sep 17 00:00:00 2001 From: Melissa Austin Date: Wed, 23 Sep 2015 14:45:12 -0700 Subject: [PATCH 101/248] Correct link to .xml file --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 8b321ad4..b6ca3a63 100644 --- a/README.md +++ b/README.md @@ -2898,7 +2898,7 @@ Use file templates or snippets to help follow consistent styles and patterns. He - Angular live templates that follow these styles and guidelines. - - Download the [webstorm-angular-live-templates.xml](assets/webstorm-angular-live-templates.xml?raw=true) + - Download the [webstorm-angular-live-templates.xml](assets/webstorm-angular-live-templates/webstorm-angular-live-templates.xml?raw=true) - Place it in your [templates folder](https://www.jetbrains.com/webstorm/help/project-and-ide-settings.html) - Restart WebStorm - In a JavaScript file type these commands followed by a `TAB`: From e05726ec06c6d050b42e83463a026c1ce1008bc3 Mon Sep 17 00:00:00 2001 From: Melissa Austin Date: Wed, 23 Sep 2015 15:23:23 -0700 Subject: [PATCH 102/248] Replace .js with .xml to allow optional download of individual templates --- ...gular.controller.webstorm-live-template.js | 25 -------------- ...ular.controller.webstorm-live-template.xml | 32 ++++++++++++++++++ ...ngular.directive.webstorm-live-template.js | 28 ---------------- ...gular.directive.webstorm-live-template.xml | 33 +++++++++++++++++++ .../angular.factory.webstorm-live-template.js | 24 -------------- ...angular.factory.webstorm-live-template.xml | 33 +++++++++++++++++++ .../angular.filter.webstorm-live-template.js | 18 ---------- .../angular.filter.webstorm-live-template.xml | 32 ++++++++++++++++++ .../angular.module.webstorm-live-template.js | 9 ----- .../angular.module.webstorm-live-template.xml | 31 +++++++++++++++++ .../angular.service.webstorm-live-template.js | 21 ------------ ...angular.service.webstorm-live-template.xml | 33 +++++++++++++++++++ 12 files changed, 194 insertions(+), 125 deletions(-) delete mode 100644 assets/webstorm-angular-live-templates/angular.controller.webstorm-live-template.js create mode 100644 assets/webstorm-angular-live-templates/angular.controller.webstorm-live-template.xml delete mode 100644 assets/webstorm-angular-live-templates/angular.directive.webstorm-live-template.js create mode 100644 assets/webstorm-angular-live-templates/angular.directive.webstorm-live-template.xml delete mode 100644 assets/webstorm-angular-live-templates/angular.factory.webstorm-live-template.js create mode 100644 assets/webstorm-angular-live-templates/angular.factory.webstorm-live-template.xml delete mode 100644 assets/webstorm-angular-live-templates/angular.filter.webstorm-live-template.js create mode 100644 assets/webstorm-angular-live-templates/angular.filter.webstorm-live-template.xml delete mode 100644 assets/webstorm-angular-live-templates/angular.module.webstorm-live-template.js create mode 100644 assets/webstorm-angular-live-templates/angular.module.webstorm-live-template.xml delete mode 100644 assets/webstorm-angular-live-templates/angular.service.webstorm-live-template.js create mode 100644 assets/webstorm-angular-live-templates/angular.service.webstorm-live-template.xml diff --git a/assets/webstorm-angular-live-templates/angular.controller.webstorm-live-template.js b/assets/webstorm-angular-live-templates/angular.controller.webstorm-live-template.js deleted file mode 100644 index 9e74834b..00000000 --- a/assets/webstorm-angular-live-templates/angular.controller.webstorm-live-template.js +++ /dev/null @@ -1,25 +0,0 @@ -(function() { - 'use strict'; - - angular - .module('$moduleName$') - .controller('$ControllerName$', $ControllerName$); - - $ControllerName$.$inject = ['$dependency$']; - - /* @ngInject */ - function $ControllerName$($dependency$) { - var vm = this; - vm.title = '$ControllerName$'; - - activate(); - - //////////////// - - function activate() { - $END$ - } - } - -})(); - diff --git a/assets/webstorm-angular-live-templates/angular.controller.webstorm-live-template.xml b/assets/webstorm-angular-live-templates/angular.controller.webstorm-live-template.xml new file mode 100644 index 00000000..15b80cc0 --- /dev/null +++ b/assets/webstorm-angular-live-templates/angular.controller.webstorm-live-template.xml @@ -0,0 +1,32 @@ + + + \ No newline at end of file diff --git a/assets/webstorm-angular-live-templates/angular.directive.webstorm-live-template.js b/assets/webstorm-angular-live-templates/angular.directive.webstorm-live-template.js deleted file mode 100644 index 22d9e0be..00000000 --- a/assets/webstorm-angular-live-templates/angular.directive.webstorm-live-template.js +++ /dev/null @@ -1,28 +0,0 @@ -(function() { - 'use strict'; - - angular - .module('$moduleName$') - .directive('$directiveName$', $directiveName$); - - $directiveName$.$inject = ['$dependency$']; - - /* @ngInject */ - function $directiveName$ ($dependency$) { - var directive = { - bindToController: true, - controller: $ControllerName$, - controllerAs: 'vm', - link: link, - restrict: 'A', - scope: { - } - }; - return directive; - - function link(scope, element, attrs) { - $END$ - } - } - -})(); diff --git a/assets/webstorm-angular-live-templates/angular.directive.webstorm-live-template.xml b/assets/webstorm-angular-live-templates/angular.directive.webstorm-live-template.xml new file mode 100644 index 00000000..6ca95b29 --- /dev/null +++ b/assets/webstorm-angular-live-templates/angular.directive.webstorm-live-template.xml @@ -0,0 +1,33 @@ + + + \ No newline at end of file diff --git a/assets/webstorm-angular-live-templates/angular.factory.webstorm-live-template.js b/assets/webstorm-angular-live-templates/angular.factory.webstorm-live-template.js deleted file mode 100644 index 8c3c934a..00000000 --- a/assets/webstorm-angular-live-templates/angular.factory.webstorm-live-template.js +++ /dev/null @@ -1,24 +0,0 @@ -(function() { - 'use strict'; - - angular - .module('$moduleName$') - .factory('$factoryName$', $factoryName$); - - $factoryName$.$inject = ['$dependency$']; - - /* @ngInject */ - function $factoryName$($dependency$) { - var service = { - $functionName$: $functionName$ - }; - return service; - - //////////////// - - function $functionName$() { - $END$ - } - } - -})(); diff --git a/assets/webstorm-angular-live-templates/angular.factory.webstorm-live-template.xml b/assets/webstorm-angular-live-templates/angular.factory.webstorm-live-template.xml new file mode 100644 index 00000000..ac5e6e23 --- /dev/null +++ b/assets/webstorm-angular-live-templates/angular.factory.webstorm-live-template.xml @@ -0,0 +1,33 @@ + + + \ No newline at end of file diff --git a/assets/webstorm-angular-live-templates/angular.filter.webstorm-live-template.js b/assets/webstorm-angular-live-templates/angular.filter.webstorm-live-template.js deleted file mode 100644 index 6a6f3fe4..00000000 --- a/assets/webstorm-angular-live-templates/angular.filter.webstorm-live-template.js +++ /dev/null @@ -1,18 +0,0 @@ -(function() { - 'use strict'; - - angular - .module('$moduleName$') - .filter('$filterName$', $filterName$); - - function $filterName$() { - return $filterName$Filter; - - //////////////// - - function $filterName$Filter($parameters$) { - return $parameters$; - } $END$ - } - -})(); diff --git a/assets/webstorm-angular-live-templates/angular.filter.webstorm-live-template.xml b/assets/webstorm-angular-live-templates/angular.filter.webstorm-live-template.xml new file mode 100644 index 00000000..b3f7cfc9 --- /dev/null +++ b/assets/webstorm-angular-live-templates/angular.filter.webstorm-live-template.xml @@ -0,0 +1,32 @@ + + + \ No newline at end of file diff --git a/assets/webstorm-angular-live-templates/angular.module.webstorm-live-template.js b/assets/webstorm-angular-live-templates/angular.module.webstorm-live-template.js deleted file mode 100644 index 3224bfdc..00000000 --- a/assets/webstorm-angular-live-templates/angular.module.webstorm-live-template.js +++ /dev/null @@ -1,9 +0,0 @@ -(function() { - 'use strict'; - - angular - .module('$moduleName$', [ - '$dependency$' - ]); $END$ - -})(); diff --git a/assets/webstorm-angular-live-templates/angular.module.webstorm-live-template.xml b/assets/webstorm-angular-live-templates/angular.module.webstorm-live-template.xml new file mode 100644 index 00000000..c578b788 --- /dev/null +++ b/assets/webstorm-angular-live-templates/angular.module.webstorm-live-template.xml @@ -0,0 +1,31 @@ + + + \ No newline at end of file diff --git a/assets/webstorm-angular-live-templates/angular.service.webstorm-live-template.js b/assets/webstorm-angular-live-templates/angular.service.webstorm-live-template.js deleted file mode 100644 index 7349a433..00000000 --- a/assets/webstorm-angular-live-templates/angular.service.webstorm-live-template.js +++ /dev/null @@ -1,21 +0,0 @@ -(function() { - 'use strict'; - - angular - .module('$moduleName$') - .service('$ServiceName$', $ServiceName$); - - $ServiceName$.$inject = ['$dependency$']; - - /* @ngInject */ - function $ServiceName$($dependency$) { - this.$functionName$ = $functionName$; - - //////////////// - - function $functionName$() { - $END$ - } - } - -})(); diff --git a/assets/webstorm-angular-live-templates/angular.service.webstorm-live-template.xml b/assets/webstorm-angular-live-templates/angular.service.webstorm-live-template.xml new file mode 100644 index 00000000..e48258cd --- /dev/null +++ b/assets/webstorm-angular-live-templates/angular.service.webstorm-live-template.xml @@ -0,0 +1,33 @@ + + + \ No newline at end of file From 2eebc5bed09882e0ba259a016373865ac3f5b416 Mon Sep 17 00:00:00 2001 From: Melissa Austin Date: Wed, 23 Sep 2015 15:39:34 -0700 Subject: [PATCH 103/248] Update README to include link to individual templates --- README.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/README.md b/README.md index b6ca3a63..7527b627 100644 --- a/README.md +++ b/README.md @@ -2911,6 +2911,8 @@ Use file templates or snippets to help follow consistent styles and patterns. He ngservice // creates an Angular service ngfilter // creates an Angular filter ``` + + *Individual templates are also available for download within the [webstorm-angular-live-templates](assets/webstorm-angular-live-templates?raw=true) folder* ### Atom ###### [Style [Y253](#style-y253)] From 979c55a6477ef073abd0b7ab2b29e9184a1ccf7d Mon Sep 17 00:00:00 2001 From: Melissa Austin Date: Wed, 23 Sep 2015 15:54:10 -0700 Subject: [PATCH 104/248] Update templateSet to individual group name --- .../angular.controller.webstorm-live-template.xml | 2 +- .../angular.directive.webstorm-live-template.xml | 2 +- .../angular.factory.webstorm-live-template.xml | 2 +- .../angular.filter.webstorm-live-template.xml | 2 +- .../angular.module.webstorm-live-template.xml | 2 +- .../angular.service.webstorm-live-template.xml | 2 +- 6 files changed, 6 insertions(+), 6 deletions(-) diff --git a/assets/webstorm-angular-live-templates/angular.controller.webstorm-live-template.xml b/assets/webstorm-angular-live-templates/angular.controller.webstorm-live-template.xml index 15b80cc0..ec548a54 100644 --- a/assets/webstorm-angular-live-templates/angular.controller.webstorm-live-template.xml +++ b/assets/webstorm-angular-live-templates/angular.controller.webstorm-live-template.xml @@ -1,4 +1,4 @@ - +