|
1 | 1 | # Руководство по стилям для AngularJS
|
2 | 2 |
|
3 |
| -*AngularJS соглашения по стилям для команд разработчиков, предложенные [@john_papa](//twitter.com/john_papa)* |
| 3 | +*Angular соглашения по стилям для команд разработчиков, предложенные [@john_papa](//twitter.com/john_papa)* |
4 | 4 |
|
5 | 5 | *Перевел на русский язык [Василий Мажекин](https://github.com/mazhekin)*
|
6 | 6 |
|
|
9 | 9 | Если вам нужны стандарты написания кода, соглашения, и руководства структурирования приложений AngularJS, то вы находитесь в правильном месте. Эти соглашения основаны на моем опыте программирования на [AngularJS](//angularjs.org), на моих презентациях [Pluralsight training courses](http://pluralsight.com/training/Authors/Details/john-papa), а также на совместной работе в командах разработчиков.
|
10 | 10 |
|
11 | 11 | Главной целью этого документа является желание предоставить вам наиболее полные инструкции для построения приложений AngularJS. Рекомендуя данные соглашения, я стараюсь акцентировать ваше внимание на цели и причины, зачем их нужно придерживаться.
|
12 |
| ->Если это руководство вам понравится, то вы можете также оценить мой курс [AngularJS Patterns: Clean Code](http://jpapa.me/ngclean), который размещен на сайте Pluralsight. |
| 12 | +>Если это руководство вам понравится, то вы можете также оценить мой курс [Angular Patterns: Clean Code](http://jpapa.me/ngclean), который размещен на сайте Pluralsight. |
13 | 13 |
|
14 |
| - [](http://jpapa.me/ngclean) |
| 14 | + [](http://jpapa.me/ngclean) |
15 | 15 |
|
16 | 16 | ## Признательность сообществу и коллегам
|
17 |
| -Никогда не работайте в вакууме. Я считаю AngularJS-сообщество невероятно открытым, которое активно обменивается опытом и заботится об этом. Также как и мой друг Todd Motto (отличный AngularJS эксперт), я работал со многими стилями и соглашениями. Мы с ним сходимся во многом, но иногда и противоречим друг другу. Я предлагаю вам ознакомиться с курсом [Todd's guidelines](https://github.com/toddmotto/angularjs-styleguide) дабы почувствовать разницу подходов. |
| 17 | +Никогда не работайте в вакууме. Я считаю AngularJS-сообщество невероятно открытым, которое активно обменивается опытом и заботится об этом. Также как и мой друг Todd Motto (отличный Angular эксперт), я работал со многими стилями и соглашениями. Мы с ним сходимся во многом, но иногда и противоречим друг другу. Я предлагаю вам ознакомиться с курсом [Todd's guidelines](https://github.com/toddmotto/angularjs-styleguide) дабы почувствовать разницу подходов. |
18 | 18 |
|
19 | 19 | Многие из моих стилей взяты в ходе моих программистских сессий с [Ward Bell](http://twitter.com/wardbell). А так как мы не всегда были согласны друг с другом, то мой друг Ward оказал очень сильное влияние на эволюцию и окончательную редакцию этого документа.
|
20 | 20 |
|
|
53 | 53 | 1. [Yeoman Generator](#yeoman-generator)
|
54 | 54 | 1. [Routing (Маршрутизация)](#routing)
|
55 | 55 | 1. [Task Automation (Автоматизация)](#task-automation)
|
56 |
| - 1. [AngularJS Docs (AngularJS документация)](#angularjs-docs) |
| 56 | + 1. [Angular Docs (Angular документация)](#angularjs-docs) |
57 | 57 | 1. [Contributing (Сотрудничество)](#contributing)
|
58 | 58 | 1. [License](#license)
|
59 | 59 |
|
|
116 | 116 | ### Замыкания JavaScript
|
117 | 117 | ###### [Style [Y010](#style-y010)]
|
118 | 118 |
|
119 |
| - - Оборачивайте компоненты AngularJS в Немедленно Исполняемые Функции(IIFE - Immediately Invoked Function Expression). |
| 119 | + - Оборачивайте компоненты Angular в Немедленно Исполняемые Функции(IIFE - Immediately Invoked Function Expression). |
120 | 120 |
|
121 | 121 | *Зачем?*: IIFE удаляют переменные из глобальной области видимости. Этот прием не дает существовать переменным и функциям дольше, чем это необходимо в глобальной области видимости. Иначе это может вызвать непредсказуемые коллизии во время исполнения всего приложения.
|
122 | 122 |
|
|
683 | 683 |
|
684 | 684 | - Сервисы создаются с помощью ключевого слова `new`. Используйте `this` для публичных методов и переменных. Так как они очень похожи на фабрики, то используйте фабрики для согласованности.
|
685 | 685 |
|
686 |
| - Замечание: [Все AngularJS сервисы являются синглтонами](https://docs.angularjs.org/guide/services). Это значит, что создается только один экземпляр сервиса на один инжектор. |
| 686 | + Замечание: [Все Angular сервисы являются синглтонами](https://docs.angularjs.org/guide/services). Это значит, что создается только один экземпляр сервиса на один инжектор. |
687 | 687 |
|
688 | 688 | ```javascript
|
689 | 689 | // service
|
|
727 | 727 |
|
728 | 728 | - Фабрики это синглтоны, которые возвращают объект, содержащий свойства и методы сервиса.
|
729 | 729 |
|
730 |
| - Замечание: [Все AngularJS сервисы являются синглтонами](https://docs.angularjs.org/guide/services). |
| 730 | + Замечание: [Все Angular сервисы являются синглтонами](https://docs.angularjs.org/guide/services). |
731 | 731 |
|
732 | 732 | ### Доступные Члены Наверх
|
733 | 733 | ###### [Style [Y052](#style-y052)]
|
|
1122 | 1122 | ### Ограничивайте Элементы и Атрибуты
|
1123 | 1123 | ###### [Style [Y074](#style-y074)]
|
1124 | 1124 |
|
1125 |
| - - При создании директивы, которая планируется как самостоятельный элемент, применяйте ограничение `E` (разработано, как элемент) или по необходимости ограничение `A` (разработано, как атрибут). В основном, если директива разрабатывается как элемент, ограничения `E` вполне достаточно. Хотя AngularJS позволяет использовать `EA`, но все же лучше определится как реализовывать директиву, либо как самостоятельный отдельный элемент, либо как атрибут для улучшения функциональности существующего DOM-элемента. |
| 1125 | + - При создании директивы, которая планируется как самостоятельный элемент, применяйте ограничение `E` (разработано, как элемент) или по необходимости ограничение `A` (разработано, как атрибут). В основном, если директива разрабатывается как элемент, ограничения `E` вполне достаточно. Хотя Angular позволяет использовать `EA`, но все же лучше определится как реализовывать директиву, либо как самостоятельный отдельный элемент, либо как атрибут для улучшения функциональности существующего DOM-элемента. |
1126 | 1126 |
|
1127 | 1127 | *Почему?*: Это имееет смысл.
|
1128 | 1128 |
|
1129 | 1129 | *Почему?*: Конечно мы можем использовать директиву в атрибуте class, но если директива действует как элемент, то лучше объявлять ее как элемент, ну или по крайней мере как атрибут.
|
1130 | 1130 |
|
1131 |
| - Замечание: EA используется по умолчанию для AngularJS 1.3 + |
| 1131 | + Замечание: EA используется по умолчанию для Angular 1.3 + |
1132 | 1132 |
|
1133 | 1133 | ```html
|
1134 | 1134 | <!-- избегайте этого -->
|
|
1606 | 1606 | }
|
1607 | 1607 | ```
|
1608 | 1608 |
|
1609 |
| - > Замечание: Начиная с AngularJS 1.3 используйте [`ngApp`](https://docs.angularjs.org/api/ng/directive/ngApp) директивный параметр `ngStrictDi`. При наличии инжектора будет создан режим "strict-di", который не даст приложению работать, если обнаружит функции, которые не используют явные аннотации (например, для защиты от минификации). Отладочная информация будет отображаться в консоли, чтобы помочь разработчику выявить код, ломающий приложение. |
| 1609 | + > Замечание: Начиная с Angular 1.3 используйте [`ngApp`](https://docs.angularjs.org/api/ng/directive/ngApp) директивный параметр `ngStrictDi`. При наличии инжектора будет создан режим "strict-di", который не даст приложению работать, если обнаружит функции, которые не используют явные аннотации (например, для защиты от минификации). Отладочная информация будет отображаться в консоли, чтобы помочь разработчику выявить код, ломающий приложение. |
1610 | 1610 | `<body ng-app="APP" ng-strict-di>`
|
1611 | 1611 |
|
1612 | 1612 | ### Используйте Gulp или Grunt для ng-annotate
|
|
1648 | 1648 |
|
1649 | 1649 | - Используйте [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), если произойдут исключения.
|
1650 | 1650 |
|
1651 |
| - *Почему?*: Это дает постоянный надежный способ обработки необработанных исключений AngularJS во время разработки и во время выполнения. |
| 1651 | + *Почему?*: Это дает постоянный надежный способ обработки необработанных исключений Angular во время разработки и во время выполнения. |
1652 | 1652 |
|
1653 | 1653 | Замечание: Другим способом является переопределение сервиса, вместо использования декоратора. Это прекрасный способ, но если вы хотите сохранить поведение по умолчанию, и просто дополнить это поведение, то декоратоор крайне рекомендуем.
|
1654 | 1654 |
|
|
2161 | 2161 |
|
2162 | 2162 | - Создайте корневой модуль приложения, который будет собирать вместе все модули и функциональности вашего приложения. Назовите этот модуль именем вашего приложения.
|
2163 | 2163 |
|
2164 |
| - *Почему?*: AngularJS специально разработан для поддержки модульности и принципов разделения сущностей. А создание корневого модуля приложения, который связывает все ваши остальные модули вместе, предоставляет очень простой способ добавления и удаления модулей из приложения. |
| 2164 | + *Почему?*: Angular специально разработан для поддержки модульности и принципов разделения сущностей. А создание корневого модуля приложения, который связывает все ваши остальные модули вместе, предоставляет очень простой способ добавления и удаления модулей из приложения. |
2165 | 2165 |
|
2166 | 2166 | ### Держите Модуль Приложения Тонким
|
2167 | 2167 | ###### [Style [Y162](#style-y162)]
|
|
2568 | 2568 | ### Глобальные Переменные Сторонних Производителей (Vendors)
|
2569 | 2569 | ###### [Style [Y240](#style-y240)]
|
2570 | 2570 |
|
2571 |
| - - Создайте константы AngularJS для глобальных переменных из библиотек сторонних производителей. |
| 2571 | + - Создайте константы Angular для глобальных переменных из библиотек сторонних производителей. |
2572 | 2572 |
|
2573 | 2573 | *Почему?*: Предоставляет способ подключить сторонние библиотеки, которые являются глобальными переменными. Это улучшает тестируемость кода, позволяя вам проще узнать, какие зависимости есть у ваших компонентов. Это также позволит вам, создать фиктивные объекты этих зависимостей, если это нужно.
|
2574 | 2574 |
|
|
2619 | 2619 | ### Sublime Text
|
2620 | 2620 | ###### [Style [Y250](#style-y250)]
|
2621 | 2621 |
|
2622 |
| - - AngularJS сниппеты, которые соблюдают приведенные здесь стили и руководства. |
| 2622 | + - Angular сниппеты, которые соблюдают приведенные здесь стили и руководства. |
2623 | 2623 |
|
2624 | 2624 | - Скачайте [Sublime Angular сниппеты](assets/sublime-angular-snippets.zip?raw=true)
|
2625 | 2625 | - Поместите все в вашу папку Packages
|
|
2645 | 2645 | ### WebStorm
|
2646 | 2646 | ###### [Style [Y252](#style-y252)]
|
2647 | 2647 |
|
2648 |
| - - AngularJS сниппеты и шаблоны файлов, которые соблюдают приведенные здесь стили и руководства. Вы можете импортировать их в свои настройки WebStorm: |
| 2648 | + - Angular сниппеты и шаблоны файлов, которые соблюдают приведенные здесь стили и руководства. Вы можете импортировать их в свои настройки WebStorm: |
2649 | 2649 |
|
2650 |
| - - Скачайте [WebStorm AngularJS шаблоны файлов и сниппетов](../assets/webstorm-angular-file-template.settings.jar?raw=true) |
| 2650 | + - Скачайте [WebStorm Angular шаблоны файлов и сниппетов](../assets/webstorm-angular-file-template.settings.jar?raw=true) |
2651 | 2651 | - Откройте WebStorm и перейдите в меню `File`
|
2652 | 2652 | - Выберите пункт меню `Import Settings`
|
2653 | 2653 | - Выберите файл и нажмите `OK`
|
|
2733 | 2733 |
|
2734 | 2734 | **[К Содержанию](#table-of-contents)**
|
2735 | 2735 |
|
2736 |
| -## AngularJS Docs |
| 2736 | +## Angular Docs |
2737 | 2737 | Для дополнительной информации, описания API, смотрите [документацию Angular](//docs.angularjs.org/api).
|
2738 | 2738 |
|
2739 | 2739 | ## Contributing
|
|
0 commit comments