diff --git a/.gitignore b/.gitignore new file mode 100644 index 00000000..70a1fe1e --- /dev/null +++ b/.gitignore @@ -0,0 +1,2 @@ +# awesome_bot output files +ab-results-* diff --git a/README.md b/README.md index 2c92c15b..e0f92823 100644 --- a/README.md +++ b/README.md @@ -4,10 +4,10 @@ There are multiple versions of Angular, and thus there are multiple versions of the guide. Choose your guide appropriately. ### Angular 1 Style Guide -[The Angular 1 Style Guide](https://github.com/johnpapa/angular-styleguide/tree/master/a1/README.md). +[The Angular 1 Style Guide](https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md). ### Angular 2 Style Guide -[The Angular 2 Style Guide](https://github.com/johnpapa/angular-styleguide/tree/master/a2/README.md). +[The Angular 2 Style Guide](https://github.com/johnpapa/angular-styleguide/blob/master/a2/README.md). ## Angular Team Endorsed Special thanks to Igor Minar, lead on the Angular team, for reviewing, contributing feedback, and entrusting me to shepherd this guide. @@ -15,7 +15,7 @@ Special thanks to Igor Minar, lead on the Angular team, for reviewing, contribut ## Purpose *Opinionated Angular style guide for teams by [@john_papa](//twitter.com/john_papa)* -If you are looking for an opinionated style guide for syntax, conventions, and structuring Angular applications, then step right in. These styles are based on my development experience with [Angular](//angularjs.org), presentations, [Pluralsight training courses](http://app.pluralsight.com/author/john-papa) and working in teams. +If you are looking for an opinionated style guide for syntax, conventions, and structuring Angular applications, then step right in. These styles are based on my development experience with [Angular](//angularjs.org), presentations, [Pluralsight training courses](https://app.pluralsight.com/profile/author/john-papa) and working in teams. The purpose of this style guide is to provide guidance on building Angular applications by showing the conventions I use and, more importantly, why I choose them. @@ -42,7 +42,7 @@ _tldr; Use this guide. Attributions are appreciated._ ### Copyright -Copyright (c) 2014-2016 [John Papa](http://johnpapa.net) +Copyright (c) 2014-2016 [John Papa](https://johnpapa.net) ### (The MIT License) Permission is hereby granted, free of charge, to any person obtaining diff --git a/a1/README.md b/a1/README.md index 4a94f919..b50e826b 100644 --- a/a1/README.md +++ b/a1/README.md @@ -6,7 +6,7 @@ Special thanks to Igor Minar, lead on the Angular team, for reviewing, contribut ## Purpose *Opinionated Angular style guide for teams by [@john_papa](//twitter.com/john_papa)* -If you are looking for an opinionated style guide for syntax, conventions, and structuring Angular applications, then step right in. These styles are based on my development experience with [Angular](//angularjs.org), presentations, [Pluralsight training courses](http://app.pluralsight.com/author/john-papa) and working in teams. +If you are looking for an opinionated style guide for syntax, conventions, and structuring Angular applications, then step right in. These styles are based on my development experience with [Angular](//angularjs.org), presentations, [Pluralsight training courses](https://app.pluralsight.com/profile/author/john-papa) and working in teams. The purpose of this style guide is to provide guidance on building Angular applications by showing the conventions I use and, more importantly, why I choose them. @@ -15,7 +15,7 @@ The purpose of this style guide is to provide guidance on building Angular appli [![Angular Patterns: Clean Code](https://raw.githubusercontent.com/johnpapa/angular-styleguide/master/a1/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, 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/angular-styleguide) to get a sense for his approach and how it compares. +Never work in a vacuum. I find that the Angular community is an incredible group who are passionate about sharing experiences. As such, 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. Many of my styles have been from the many pair programming sessions [Ward Bell](https://twitter.com/wardbell) and I have had. My friend Ward has certainly helped influence the ultimate evolution of this guide. @@ -324,7 +324,7 @@ While this guide explains the *what*, *why* and *how*, I find it helpful to see ### controllerAs View Syntax ###### [Style [Y030](#style-y030)] - - Use the [`controllerAs`](http://www.johnpapa.net/do-you-like-your-angular-controllers-with-or-without-sugar/) syntax over the `classic controller with $scope` syntax. + - Use the [`controllerAs`](https://johnpapa.net/do-you-like-your-angular-controllers-with-or-without-sugar/) syntax over the `classic controller with $scope` syntax. *Why?*: Controllers are constructed, "newed" up, and provide a single new instance, and the `controllerAs` syntax is closer to that of a JavaScript constructor than the `classic $scope syntax`. @@ -397,7 +397,7 @@ While this guide explains the *what*, *why* and *how*, I find it helpful to see } ``` - Note: You can avoid any [jshint](http://jshint.com/) warnings by placing the comment above the line of code. However it is not needed when the function is named using UpperCasing, as this convention means it is a constructor function, which is what a controller is in Angular. + Note: You can avoid any [jshint](https://jshint.com/) warnings by placing the comment above the line of code. However it is not needed when the function is named using UpperCasing, as this convention means it is a constructor function, which is what a controller is in Angular. ```javascript /* jshint validthis: true */ @@ -530,7 +530,7 @@ While this guide explains the *what*, *why* and *how*, I find it helpful to see ### Function Declarations to Hide Implementation Details ###### [Style [Y034](#style-y034)] - - Use function declarations to hide implementation details. Keep your bindable members up top. When you need to bind a function in a controller, point it to a function declaration that appears later in the file. This is tied directly to the section Bindable Members Up Top. For more details see [this post](http://www.johnpapa.net/angular-function-declarations-function-expressions-and-readable-code/). + - Use function declarations to hide implementation details. Keep your bindable members up top. When you need to bind a function in a controller, point it to a function declaration that appears later in the file. This is tied directly to the section Bindable Members Up Top. For more details see [this post](https://johnpapa.net/angular-function-declarations-function-expressions-and-readable-code/). *Why?*: Placing bindable members at the top makes it easy to read and helps you instantly identify which members of the controller can be bound and used in the View. (Same as above.) @@ -839,7 +839,7 @@ While this guide explains the *what*, *why* and *how*, I find it helpful to see ### Function Declarations to Hide Implementation Details ###### [Style [Y053](#style-y053)] - - Use function declarations to hide implementation details. Keep your accessible members of the factory up top. Point those to function declarations that appears later in the file. For more details see [this post](http://www.johnpapa.net/angular-function-declarations-function-expressions-and-readable-code). + - Use function declarations to hide implementation details. Keep your accessible members of the factory up top. Point those to function declarations that appears later in the file. For more details see [this post](https://johnpapa.net/angular-function-declarations-function-expressions-and-readable-code). *Why?*: Placing accessible members at the top makes it easy to read and helps you instantly identify which functions of the factory you can access externally. @@ -1169,7 +1169,7 @@ Note: There are many naming options for directives, especially since they can be *Why?*: The unique short prefix identifies the directive's context and origin. For example a prefix of `cc-` may indicate that the directive is part of a CodeCamper app while `acme-` may indicate a directive for the Acme company. - Note: Avoid `ng-` as these are reserved for Angular directives. Research widely used directives to avoid naming conflicts, such as `ion-` for the [Ionic Framework](http://ionicframework.com/). + Note: Avoid `ng-` as these are reserved for Angular directives. Research widely used directives to avoid naming conflicts, such as `ion-` for the [Ionic Framework](https://ionicframework.com/). ### Restrict to Elements and Attributes ###### [Style [Y074](#style-y074)] @@ -1734,7 +1734,7 @@ Note: The code example's dependency on `movieService` is not minification safe o ### 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](https://gulpjs.com) or [Grunt](https://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. @@ -2266,7 +2266,7 @@ Note: The code example's dependency on `movieService` is not minification safe o - Have a near term view of implementation and a long term vision. In other words, start small 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`). - Note: Find more details and reasoning behind the structure at [this original post on application structure](http://www.johnpapa.net/angular-app-structuring-guidelines/). + Note: Find more details and reasoning behind the structure at [this original post on application structure](https://johnpapa.net/angular-app-structuring-guidelines/). ### Layout ###### [Style [Y151](#style-y151)] @@ -2548,11 +2548,11 @@ Unit testing helps maintain clean code, as such I included some of my recommenda ### Testing Library ###### [Style [Y191](#style-y191)] - - Use [Jasmine](http://jasmine.github.io/) or [Mocha](http://mochajs.org) for unit testing. + - Use [Jasmine](https://jasmine.github.io/) or [Mocha](https://mochajs.org) for unit testing. *Why?*: Both Jasmine and Mocha are widely used in the Angular community. Both are stable, well maintained, and provide robust testing features. - Note: When using Mocha, also consider choosing an assert library such as [Chai](http://chaijs.com). I prefer Mocha. + Note: When using Mocha, also consider choosing an assert library such as [Chai](https://www.chaijs.com/). I prefer Mocha. ### Test Runner ###### [Style [Y192](#style-y192)] @@ -2563,9 +2563,9 @@ Unit testing helps maintain clean code, as such I included some of my recommenda *Why?*: Karma hooks into your Continuous Integration process easily on its own or through Grunt or Gulp. - *Why?*: Some IDE's are beginning to integrate with Karma, such as [WebStorm](http://www.jetbrains.com/webstorm/) and [Visual Studio](https://visualstudiogallery.msdn.microsoft.com/02f47876-0e7a-4f6c-93f8-1af5d5189225). + *Why?*: Some IDE's are beginning to integrate with Karma, such as [WebStorm](http://www.jetbrains.com/webstorm/) and [Visual Studio](https://marketplace.visualstudio.com/items?itemName=DanielFisherlennybacon.KarmaVs). - *Why?*: Karma works well with task automation leaders such as [Grunt](http://gruntjs.com/) (with [grunt-karma](https://github.com/karma-runner/grunt-karma)) and [Gulp](http://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. + *Why?*: Karma works well with task automation leaders such as [Grunt](https://gruntjs.com/) (with [grunt-karma](https://github.com/karma-runner/grunt-karma)) and [Gulp](https://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 /* recommended */ @@ -2619,7 +2619,7 @@ Unit testing helps maintain clean code, as such I included some of my recommenda ### Stubbing and Spying ###### [Style [Y193](#style-y193)] - - Use [Sinon](http://sinonjs.org/) for stubbing and spying. + - Use [Sinon](https://sinonjs.org/) for stubbing and spying. *Why?*: Sinon works well with both Jasmine and Mocha and extends the stubbing and spying features they offer. @@ -2712,7 +2712,7 @@ Unit testing helps maintain clean code, as such I included some of my recommenda ### animate.css ###### [Style [Y212](#style-y212)] - - Use [animate.css](http://daneden.github.io/animate.css/) for conventional animations. + - Use [animate.css](https://daneden.github.io/animate.css/) for conventional animations. *Why?*: The animations that animate.css provides are fast, smooth, and easy to add to your application. @@ -2720,7 +2720,7 @@ Unit testing helps maintain clean code, as such I included some of my recommenda *Why?*: animate.css is widely used and tested. - Note: See this [great post by Matias Niemelä on Angular animations](http://www.yearofmoo.com/2013/08/remastered-animation-in-angularjs-1-2.html) + Note: See this [great post by Matias Niemelä on Angular animations](https://www.yearofmoo.com/2013/08/remastered-animation-in-angularjs-1-2.html) **[Back to top](#table-of-contents)** @@ -2781,7 +2781,7 @@ Unit testing helps maintain clean code, as such I included some of my recommenda ### Use an Options File ###### [Style [Y230](#style-y230)] - - Use JS Hint for linting your JavaScript and be sure to customize the JS Hint options file and include in source control. See the [JS Hint docs](http://jshint.com/docs/) for details on the options. + - Use JS Hint for linting your JavaScript and be sure to customize the JS Hint options file and include in source control. See the [JS Hint docs](https://jshint.com/docs/) for details on the options. *Why?*: Provides a first alert prior to committing any code to source control. @@ -3029,7 +3029,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/webstorm-angular-live-templates.xml?raw=true) - - Place it in your [templates folder](https://www.jetbrains.com/webstorm/help/project-and-ide-settings.html) + - Place it in your [templates folder](https://www.jetbrains.com/help/webstorm/project-and-ide-settings.html) - Restart WebStorm - In a JavaScript file type these commands followed by a `TAB`: @@ -3157,7 +3157,7 @@ Use file templates or snippets to help follow consistent styles and patterns. He Note that yasnippet categorizes snippets by major mode, and there are several Emacs major modes for editing Javascript code. The snippets are in `js2-mode`, and the other directories contain only a dotfile to reference them there. - - install [yasnippet](https://github.com/capitaomorte/yasnippet) (`M-x package-install RET yasnippet RET`) + - install [yasnippet](https://github.com/joaotavora/yasnippet) (`M-x package-install RET yasnippet RET`) - copy snippets to snippet directory, or modify your Emacs init to add snippet directory to `yas-snippet-dirs` ```javascript @@ -3291,7 +3291,7 @@ Client-side routing is important for creating a navigation flow between views an **[Back to top](#table-of-contents)** ## Task Automation -Use [Gulp](http://gulpjs.com) or [Grunt](http://gruntjs.com) for creating automated tasks. Gulp leans to code over configuration while Grunt leans to configuration over code. I personally prefer Gulp as I feel it is easier to read and write, but both are excellent. +Use [Gulp](https://gulpjs.com) or [Grunt](https://gruntjs.com) for creating automated tasks. Gulp leans to code over configuration while Grunt leans to configuration over code. I personally prefer Gulp as I feel it is easier to read and write, but both are excellent. > Learn more about gulp and patterns for task automation in my [Gulp Pluralsight course](http://jpapa.me/gulpps) diff --git a/a1/i18n/README.md b/a1/i18n/README.md index 40e24863..e7838263 100644 --- a/a1/i18n/README.md +++ b/a1/i18n/README.md @@ -21,7 +21,7 @@ Language translations are welcomed and encouraged. The success of these translat 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. +> All contributions fall under the [MIT License of this repository](https://github.com/johnpapa/angular-styleguide#license). In other words, you would be providing these free to the community. ### New Translations 1. Fork the repository diff --git a/a1/i18n/de-DE.md b/a1/i18n/de-DE.md index 99be9755..3b4d84ba 100644 --- a/a1/i18n/de-DE.md +++ b/a1/i18n/de-DE.md @@ -2,7 +2,7 @@ *Dogmatischer Angular Styleguide für Teams von John Papa [@john_papa](//twitter.com/john_papa)* -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](https://app.pluralsight.com/profile/author/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. @@ -13,13 +13,13 @@ Der Zweck dieses Styleguides ist es, eine Anleitung für die Erstellung von Angu ## 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. +Viele meiner Vorlagen entstanden aus Pair-Programming-Sessions, die [Ward Bell](https://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, 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. +[Übersetzungen dieses Styleguides](https://github.com/johnpapa/angular-styleguide/tree/master/a1/i18n) werden von der Community hier verwaltet. ## Inhaltsverzeichnis @@ -291,7 +291,7 @@ Während diese Anleitung das *Was*, *Warum* und *Wie* erklärt, finde ich es ebe ### controllerAs View-Syntax ###### [Style [Y030](#style-y030)] - - 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. + - Ziehen Sie die [`controllerAs`](https://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`. @@ -364,7 +364,7 @@ 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 Konstruktor-Funktion handelt, was einem Controller in Angular entspricht. + Anmerkung: Sie können jegliche [jshint](https://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 */ @@ -481,7 +481,7 @@ 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](https://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 einem View genutzt werden können. (Das Gleiche, wie zuvor.) @@ -722,7 +722,7 @@ Während diese Anleitung das *Was*, *Warum* und *Wie* erklärt, finde ich es ebe ### Single Responsibility ###### [Style [Y050](#style-y050)] - - Factories sollten [eine einzige Verantwortung](http://en.wikipedia.org/wiki/Single_responsibility_principle) haben, die in ihrem Kontext gekapselt ist. Wenn eine Factory einmal über diesen einzigen Zweck hinaus erweitert werden muss, dann sollte eine neue Factory erstellt werden. + - Factories sollten [eine einzige Verantwortung](https://en.wikipedia.org/wiki/Single_responsibility_principle) haben, die in ihrem Kontext gekapselt ist. Wenn eine Factory einmal über diesen einzigen Zweck hinaus erweitert werden muss, dann sollte eine neue Factory erstellt werden. ### Singletons ###### [Style [Y051](#style-y051)] @@ -734,7 +734,7 @@ 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](https://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. @@ -791,7 +791,7 @@ 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 aufgefü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](https://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. @@ -1120,7 +1120,7 @@ Während diese Anleitung das *Was*, *Warum* und *Wie* erklärt, finde ich es ebe *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. + 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](https://ionicframework.com/) vorzubeugen. ### Beschränken Sie Direktiven auf Elemente und Attribute ###### [Style [Y074](#style-y074)] @@ -1603,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](https://gulpjs.com) oder [Grunt](https://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. @@ -1680,7 +1680,7 @@ Während diese Anleitung das *Was*, *Warum* und *Wie* erklärt, finde ich es ebe ### 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 automatisierten Build-Task. Fügen Sie `/* @ngInject */` vor jeder Funktion ein, die Abhängigkeiten hat. + - Benutzen Sie [gulp-ng-annotate](https://www.npmjs.com/package/gulp-ng-annotate) oder [grunt-ng-annotate](https://www.npmjs.com/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. @@ -2116,7 +2116,7 @@ Während diese Anleitung das *Was*, *Warum* und *Wie* erklärt, finde ich es ebe - 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/). + Anmerkung: Sie finden mehr Details und Gründe für diese Struktur in [diesem Originalbeitrag zur Anwendungsstruktur](https://johnpapa.net/angular-app-structuring-guidelines/). ### Layout ###### [Style [Y151](#style-y151)] @@ -2394,11 +2394,11 @@ Unit-Tests tragen dazu bei, sauberen Code zu erhalten. Daher habe ich einige mei ### Testbibliotheken ###### [Style [Y191](#style-y191)] - - Nutzen Sie [Jasmine](http://jasmine.github.io/) oder [Mocha](http://mochajs.org) für Unit-Tests. + - Nutzen Sie [Jasmine](https://jasmine.github.io/) oder [Mocha](https://mochajs.org) für Unit-Tests. *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 Mocha 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](https://www.chaijs.com) zu nutzen. Ich ziehe dem Mocha vor. ### Testrunner ###### [Style [Y192](#style-y192)] @@ -2409,14 +2409,14 @@ 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 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?*: Verschiedene IDEs wie [WebStorm](http://www.jetbrains.com/webstorm/) und [Visual Studio](https://marketplace.visualstudio.com/items?itemName=DanielFisherlennybacon.KarmaVs) 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. + *Warum?*: Karma arbeitet wunderbar mit Task-Managern für Automatisierte Aufgaben wie [Grunt](https://gruntjs.com) (with [grunt-karma](https://github.com/karma-runner/grunt-karma)) und [Gulp](https://gulpjs.com) (with [gulp-karma](https://github.com/lazd/gulp-karma)) zusammen. ### Simulation durch "Stubbing" und "Spying" ###### [Style [Y193](#style-y193)] - - Benutzen Sie [Sinon](http://sinonjs.org/) um Komponenten im Rahmen von "Stubbing" und "Spying" (Mocking) zu simulieren. + - Benutzen Sie [Sinon](https://sinonjs.org/) um Komponenten im Rahmen von "Stubbing" und "Spying" (Mocking) zu simulieren. *Warum?*: Sinon arbeitet wunderbar mit Jasmine und Mocha zusammen und erweitert deren Fähigkeiten der Simulation von Komponenten. @@ -2509,7 +2509,7 @@ Unit-Tests tragen dazu bei, sauberen Code zu erhalten. Daher habe ich einige mei ### animate.css ###### [Style [Y212](#style-y212)] - - Benutzen Sie [animate.css](http://daneden.github.io/animate.css/) für konventielle Animationen. + - Benutzen Sie [animate.css](https://daneden.github.io/animate.css/) für konventielle Animationen. *Warum?*: Die Animationen von animate.css sind schnell, sanft und einfach zu Ihrer Anwendung hinzuzufügen. @@ -2517,7 +2517,7 @@ Unit-Tests tragen dazu bei, sauberen Code zu erhalten. Daher habe ich einige mei *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. + Anmerkung: Schauen Sie sich diesen [tollen Beitrag von Matias Niemelä über Angular Animationen](https://www.yearofmoo.com/2013/08/remastered-animation-in-angularjs-1-2.html) an. **[Zurück zum Anfang](#table-of-contents)** @@ -2578,7 +2578,7 @@ Unit-Tests tragen dazu bei, sauberen Code zu erhalten. Daher habe ich einige mei ### Nutzen Sie eine Optionsdatei ###### [Style [Y230](#style-y230)] - - Benutzen Sie JS Hint um Ihren JavaScript-Code zu prüfen (Linting) und versichern Sie sich, dass sie die Prüffunktion für sich angepasst haben und die Optionsdatei in Ihrer Quellcodeverwaltung abgelegt haben. Schauen Sie sich die [JS Hint Dokumentation](http://www.jshint.com/docs/) an, um mehr über die Optionen zu erfahren. + - Benutzen Sie JS Hint um Ihren JavaScript-Code zu prüfen (Linting) und versichern Sie sich, dass sie die Prüffunktion für sich angepasst haben und die Optionsdatei in Ihrer Quellcodeverwaltung abgelegt haben. Schauen Sie sich die [JS Hint Dokumentation](https://jshint.com/docs/) an, um mehr über die Optionen zu erfahren. *Warum?*: Erstattet erste Meldung, bevor Sie den Code in die Quellcodeverwaltung übertragen. @@ -2655,7 +2655,7 @@ Unit-Tests tragen dazu bei, sauberen Code zu erhalten. Daher habe ich einige mei ### Nutzung und Optionsdatei ###### [Style [Y235](#style-y235)] - - Benutzen Sie JSCS um die Anwendung von Programmier-Richtlinien in Ihrem JavaScript-Code zu prüfen und versichern Sie sich, dass Sie die Prüffunktion für sich angepasst haben und die Optionsdatei in Ihrer Quellcodeverwaltung abgelegt haben. Schauen Sie sich die [JS Hint Dokumentation](http://www.jshint.com/docs/) an, um mehr über die Optionen zu erfahren. + - Benutzen Sie JSCS um die Anwendung von Programmier-Richtlinien in Ihrem JavaScript-Code zu prüfen und versichern Sie sich, dass Sie die Prüffunktion für sich angepasst haben und die Optionsdatei in Ihrer Quellcodeverwaltung abgelegt haben. Schauen Sie sich die [JS Hint Dokumentation](https://jshint.com/docs/) an, um mehr über die Optionen zu erfahren. *Warum?*: Erstattet erste Meldung, bevor Sie den Code in die Quellcodeverwaltung übertragen. @@ -3032,7 +3032,7 @@ Das Routing auf der Client-Seite ist für die Erstellung eines Navigationsflusse **[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 Grunt Konfiguration vor Code. Ich persönlich bevorzuge Gulp, weil ich denke, es ist einfacher zu lesen und zu schreiben, aber beide sind erstklassig. +Nutzen Sie [Gulp](https://gulpjs.com) oder [Grunt](https://gruntjs.com), um Aufgaben zu automatisieren. Bei Gulp geht der Code vor Konfiguration, bei Grunt 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 Aufgaben in meinem [Gulp Pluralsight Kurs](http://jpapa.me/gulpps) @@ -3086,7 +3086,7 @@ _tldr; Wenden Sie diese Richtlinien an. Beiträge sind willkommen._ ### Copyright -Copyright (c) 2014-2015 [John Papa](http://johnpapa.net) +Copyright (c) 2014-2015 [John Papa](https://johnpapa.net) ### (Die MIT-Lizenz) Hiermit wird unentgeltlich jeder Person, die eine Kopie der Software und der zugehörigen Dokumentationen (die "Software") erhält, die Erlaubnis erteilt, sie uneingeschränkt zu benutzen, inklusive und ohne Ausnahme dem Recht, sie zu verwenden, kopieren, ändern, fusionieren, verlegen, verbreiten, unterlizenzieren und/oder zu verkaufen, und Personen, die diese Software erhalten, diese Rechte zu geben, unter den folgenden Bedingungen: diff --git a/a1/i18n/es-ES.md b/a1/i18n/es-ES.md index 8f86bc62..84459272 100644 --- a/a1/i18n/es-ES.md +++ b/a1/i18n/es-ES.md @@ -2,7 +2,7 @@ *Guía de estilos colaborativa de Angular para equipos por [@john_papa](//twitter.com/john_papa)* -Si estás buscando una guía colaborativa sobre sintaxis, convenciones y estructura de aplicaciones con AngularJS, este es el sitio. Estos estilos están basados en mi experiencia desarrollando con [AngularJS](//angularjs.org), presentaciones, [Cursos en Pluralsight](http://pluralsight.com/training/Authors/Details/john-papa) y trabajando en equipos. +Si estás buscando una guía colaborativa sobre sintaxis, convenciones y estructura de aplicaciones con AngularJS, este es el sitio. Estos estilos están basados en mi experiencia desarrollando con [AngularJS](//angularjs.org), presentaciones, [Cursos en Pluralsight](https://app.pluralsight.com/profile/author/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é. @@ -13,13 +13,13 @@ El propósito de esta guía de estilos es proporcionar una guía de cómo constr ## Asombrosa comunidad y créditos Nunca trabajes solo. Personalmente, la comunidad de Angular es un increíble grupo apasionado por compartir experiencias. Como por ejemplo, mi amigo y experto en Angular Todd Motto, con el que he colaborado en muchos de los estilos y convenciones. Estamos de acuerdo en la mayoría, y en otras no. Te recomiendo que le eches un vistazo a [Todd's guidelines](https://github.com/toddmotto/angularjs-styleguide) para que le des sentido a esta guía y la compares. -Muchos de los estilos han salido de las muchas sesiones de pair programming que [Ward Bell](http://twitter.com/wardbell) y yo hemos tenido. Aunque no siempre coincidimos, mi amigo Ward me ha ayudado con la última evolución de esta guía. +Muchos de los estilos han salido de las muchas sesiones de pair programming que [Ward Bell](https://twitter.com/wardbell) y yo hemos tenido. Aunque no siempre coincidimos, mi amigo Ward me ha ayudado con la última evolución de esta guía. ## Mira los estilos en la aplicación de ejemplo Mientras que esta guía explica el *qué*, *por qué* y *cómo*, me resulta útil verlos en práctica. Esta guía viene acompañada de una aplicación de ejemplo que sigue los estilos y patrones. La puedes encontrar en [aplicación de ejemplo (llamada modular) aquí](https://github.com/johnpapa/ng-demos) dentro del directorio `modular`. Siéntete libre de cogerla, hacerle clone o un fork. [Instrucciones de cómo arrancarla en su readme](https://github.com/johnpapa/ng-demos/tree/master/modular). ## Traducciones -[Traducciones de esta guía de estilos Angular](https://github.com/johnpapa/angularjs-styleguide/tree/master/i18n) son mantenidas por la comunidad y las puedes encontrar aquí. +[Traducciones de esta guía de estilos Angular](https://github.com/johnpapa/angular-styleguide/tree/master/a1/i18n) son mantenidas por la comunidad y las puedes encontrar aquí. ## Tabla de contenidos @@ -295,7 +295,7 @@ Mientras que esta guía explica el *qué*, *por qué* y *cómo*, me resulta úti ### controllerAs Sintaxis en la Vista ###### [Style [Y030](#style-y030)] - - Usa la sintaxis [`controllerAs`](http://www.johnpapa.net/do-you-like-your-angular-controllers-with-or-without-sugar/) en lugar del `clásico controlador con $scope`. + - Usa la sintaxis [`controllerAs`](https://johnpapa.net/do-you-like-your-angular-controllers-with-or-without-sugar/) en lugar del `clásico controlador con $scope`. *¿Por qué?*: Los Controladores se construyen, renuevan y proporcionan una nueva instancia única, y la sintaxis `controllerAs` se acerca más a eso que la `sintaxis clásica de $scope`. @@ -368,7 +368,7 @@ Mientras que esta guía explica el *qué*, *por qué* y *cómo*, me resulta úti } ``` - Nota: Puedes evitar los warnings de [jshint](http://www.jshint.com/) escribiendo un comentario encima de la línea de código. Sin embargo no hace falta si el nombre de la función empieza con mayúsculas, ya que esa es la convención para las funciones de los constructores, que es lo que un controller en Angular es. + Nota: Puedes evitar los warnings de [jshint](https://jshint.com/) escribiendo un comentario encima de la línea de código. Sin embargo no hace falta si el nombre de la función empieza con mayúsculas, ya que esa es la convención para las funciones de los constructores, que es lo que un controller en Angular es. ```javascript /* jshint validthis: true */ @@ -485,7 +485,7 @@ Mientras que esta guía explica el *qué*, *por qué* y *cómo*, me resulta úti ### Declaraciones de Funciones para Esconder los Detalles de Implementación ###### [Style [Y034](#style-y034)] - - Declara funciones para ocultar detalles de implementación. Mantén las variables bindeables arriba. Cuando necesites bindear una función a un controlador referencia una función que aparezca después en el archivo. Esto está directamente relacionado con la sección: Miembros Bindeables Arriba. Para más detalles mira [este post](http://www.johnpapa.net/angular-function-declarations-function-expressions-and-readable-code). + - Declara funciones para ocultar detalles de implementación. Mantén las variables bindeables arriba. Cuando necesites bindear una función a un controlador referencia una función que aparezca después en el archivo. Esto está directamente relacionado con la sección: Miembros Bindeables Arriba. Para más detalles mira [este post](https://johnpapa.net/angular-function-declarations-function-expressions-and-readable-code). *¿Por qué?*: Colocar las variables bindeables arriba hace más fácil la lectura y te ayuda a identificar qué variables del controlador pueden ser asociadas y usadas en la Vista. @@ -725,7 +725,7 @@ Mientras que esta guía explica el *qué*, *por qué* y *cómo*, me resulta úti ### Responsabilidad Única ###### [Style [Y050](#style-y050)] - - Las factorías deben tener una [responsabilidad única](http://en.wikipedia.org/wiki/Single_responsibility_principle), que es encapsulada por su contexto. Cuando una factoría empiece a exceder el principio de responsabilidad única, una nueva factoría debe ser creada. + - Las factorías deben tener una [responsabilidad única](https://en.wikipedia.org/wiki/Single_responsibility_principle), que es encapsulada por su contexto. Cuando una factoría empiece a exceder el principio de responsabilidad única, una nueva factoría debe ser creada. ### Singletons ###### [Style [Y051](#style-y051)] @@ -737,7 +737,7 @@ Mientras que esta guía explica el *qué*, *por qué* y *cómo*, me resulta úti ### Miembros accesibles Arriba ###### [Style [Y052](#style-y052)] - - Expón las variables que se llaman del servicio (su interfaz) arriba, usando la técnica derivada de [Revealing Module Pattern](http://addyosmani.com/resources/essentialjsdesignpatterns/book/#revealingmodulepatternjavascript). + - Expón las variables que se llaman del servicio (su interfaz) arriba, usando la técnica derivada de [Revealing Module Pattern](https://addyosmani.com/resources/essentialjsdesignpatterns/book/#revealingmodulepatternjavascript). *¿Por qué?*: Colocar los elementos que se llaman arriba hace más fácil la lectura y te ayuda a identificar los elementos del servicio que se pueden llamar y se deben testear (y/o mockear). @@ -794,7 +794,7 @@ Mientras que esta guía explica el *qué*, *por qué* y *cómo*, me resulta úti ### Declaración de Funciones para Esconder los Detalles de Implementación ###### [Style [Y053](#style-y053)] - - Declara funciones para esconder detalles de implementación. Manten los elementos accesibles en la parte superior de la factoría. Referencia a los que aparezcan después en el archivo. Para más detalles visita [este post](http://www.johnpapa.net/angular-function-declarations-function-expressions-and-readable-code). + - Declara funciones para esconder detalles de implementación. Manten los elementos accesibles en la parte superior de la factoría. Referencia a los que aparezcan después en el archivo. Para más detalles visita [este post](https://johnpapa.net/angular-function-declarations-function-expressions-and-readable-code). *¿Por qué?*: Coloca los elementos accesibles en la parte superior para hacerlo más fácil de leer y ayudarte a identificar instantáneamente qué funciones de la factoría se pueden accesar externamente. @@ -1124,7 +1124,7 @@ Mientras que esta guía explica el *qué*, *por qué* y *cómo*, me resulta úti *¿Por qué?*: El prefijo corto y único identifica el contexto de la directiva y el origen. Por ejemplo el prefijo `cc-` puede indicar que la directiva en particular es parte de la aplicación CodeCamper, mientras que `acme-` pudiera indicar que la directiva es de la compañía Acme. - Nota: Evita `ng-` ya que está reservado para las directivas AngularJS. Estudia sabiamente las directivas usadas para evitar conflictos de nombres, como `ion-` de [Ionic Framework](http://ionicframework.com/). + Nota: Evita `ng-` ya que está reservado para las directivas AngularJS. Estudia sabiamente las directivas usadas para evitar conflictos de nombres, como `ion-` de [Ionic Framework](https://ionicframework.com/). ### Limitate a Elementos y Atributos ###### [Style [Y074](#style-y074)] @@ -1592,7 +1592,7 @@ Mientras que esta guía explica el *qué*, *por qué* y *cómo*, me resulta úti ### ng-annotate ###### [Style [Y100](#style-y100)] - - Usa [ng-annotate](//github.com/olov/ng-annotate) para [Gulp](http://gulpjs.com) or [Grunt](http://gruntjs.com) y comenta funciones que necesiten inyección de dependencias automatizadas usando `/** @ngInject */` + - Usa [ng-annotate](//github.com/olov/ng-annotate) para [Gulp](https://gulpjs.com) or [Grunt](https://gruntjs.com) y comenta funciones que necesiten inyección de dependencias automatizadas usando `/** @ngInject */` *¿Por qué?*: Salvaguarda tu código de cualquier dependencia que pueda no estar usando prácticas de minificación segura. @@ -1669,7 +1669,7 @@ Mientras que esta guía explica el *qué*, *por qué* y *cómo*, me resulta úti ### Usa Gulp o Grunt para ng-annotate ###### [Style [Y101](#style-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) en una tarea de construcción automática. Inyecta `/* @ngInject */` antes de cualquier función que tenga dependecias. + - Usa [gulp-ng-annotate](https://www.npmjs.com/package/gulp-ng-annotate) o [grunt-ng-annotate](https://www.npmjs.com/package/grunt-ng-annotate) en una tarea de construcción automática. Inyecta `/* @ngInject */` antes de cualquier función que tenga dependecias. *¿Por qué?*: ng-annotate atrapará la mayoría de las dependencias, pero algunas veces requiere indicios usando la sintaxis `/* @ngInject */`. @@ -2105,7 +2105,7 @@ Mientras que esta guía explica el *qué*, *por qué* y *cómo*, me resulta úti - Ten una visión de implementación de corto y largo plazo. En otras palabras, empieza con poco pero ten en mente hacia donde se dirige la aplicación. Todo el código de la aplicación va en el directorio raíz llamado `app`. Todo el contenido es separado en 1 característica por archivo. Cada controlador, servicio, módulo, vista tiene su propio archivo. Todos los vendor scripts de terceros son almacenados en otro directorio raíz y no en el directorio `app`. Si yo no lo escribí no los quiero saturando mi aplicación (`bower_components`, `scripts`, `lib`). - Nota: Encuentra más detalles y el razonamiento detrás de esta estructura en [este post original sobre la estructura de una aplicación](http://www.johnpapa.net/angular-app-structuring-guidelines/). + Nota: Encuentra más detalles y el razonamiento detrás de esta estructura en [este post original sobre la estructura de una aplicación](https://johnpapa.net/angular-app-structuring-guidelines/). ### Layout ###### [Style [Y151](#style-y151)] @@ -2381,11 +2381,11 @@ Las pruebas unitarias ayudan a mantener el código limpio, así que incluyo algu ### Librería para las Pruebas ###### [Style [Y191](#style-y191)] - - Usa [Jasmine](http://jasmine.github.io/) o [Mocha](http://mochajs.org) para las pruebas unitarias. + - Usa [Jasmine](https://jasmine.github.io/) o [Mocha](https://mochajs.org) para las pruebas unitarias. *¿Por qué?*: Ambas Jasmine y Mocha son usadas ampliamente por la comunidad de AngularJS. Ambas son estables, bien mantenidas, y proveen de características de pruebas robustas. - Nota: Cuando uses Mocha, también considera elegir una librería como [Chai](http://chaijs.com). + Nota: Cuando uses Mocha, también considera elegir una librería como [Chai](https://www.chaijs.com). ### Test Runner ###### [Style [Y192](#style-y192)] @@ -2396,14 +2396,14 @@ Las pruebas unitarias ayudan a mantener el código limpio, así que incluyo algu *¿Por qué?*: Karma encaja en tu proceso de Integración Continua fácilmente por sí sola o a través de Grunt o Gulp. - *¿Por qué?*: Algunos IDE's están comenzando a integrarse con Karma, tal como [WebStorm](http://www.jetbrains.com/webstorm/) y [Visual Studio](http://visualstudiogallery.msdn.microsoft.com/02f47876-0e7a-4f6c-93f8-1af5d5189225). + *¿Por qué?*: Algunos IDE's están comenzando a integrarse con Karma, tal como [WebStorm](http://www.jetbrains.com/webstorm/) y [Visual Studio](https://marketplace.visualstudio.com/items?itemName=DanielFisherlennybacon.KarmaVs). - *¿Por qué?*: Karma funciona bien con líderes de automatización de tareas tales como [Grunt](http://www.gruntjs.com) (con [grunt-karma](https://github.com/karma-runner/grunt-karma)) y [Gulp](http://www.gulpjs.com) (con [gulp-karma](https://github.com/lazd/gulp-karma)). + *¿Por qué?*: Karma funciona bien con líderes de automatización de tareas tales como [Grunt](https://gruntjs.com) (con [grunt-karma](https://github.com/karma-runner/grunt-karma)) y [Gulp](https://gulpjs.com) (con [gulp-karma](https://github.com/lazd/gulp-karma)). ### Stubear y Espíar ###### [Style [Y193](#style-y193)] - - Usa [Sinon](http://sinonjs.org/) para el stubeo y espíar. + - Usa [Sinon](https://sinonjs.org/) para el stubeo y espíar. *¿Por qué?*: Sinon funciona bien con ambos Jasmine y Mocha y extiende las características de stubeo y espío que ellos ofrecen. @@ -2488,7 +2488,7 @@ Las pruebas unitarias ayudan a mantener el código limpio, así que incluyo algu ### animate.css ###### [Style [Y212](#style-y212)] - - Usa [animate.css](http://daneden.github.io/animate.css/) para animaciones convencionales. + - Usa [animate.css](https://daneden.github.io/animate.css/) para animaciones convencionales. *¿Por qué?*: Las animaciones que animate.css provee son rápidas, fluidas, y fáciles de agregar en tu aplicación. @@ -2496,7 +2496,7 @@ Las pruebas unitarias ayudan a mantener el código limpio, así que incluyo algu *¿Por qué?*: animate.css está ampliamente usado y testeado. - Nota: Ve este [ excelente post de Matias Niemelä sobre animaciones AngularJS](http://www.yearofmoo.com/2013/08/remastered-animation-in-angularjs-1-2.html) + Nota: Ve este [ excelente post de Matias Niemelä sobre animaciones AngularJS](https://www.yearofmoo.com/2013/08/remastered-animation-in-angularjs-1-2.html) **[Volver arriba](#tabla-de-contenidos)** @@ -2557,7 +2557,7 @@ Las pruebas unitarias ayudan a mantener el código limpio, así que incluyo algu ### Usa un Archivo de Opciones ###### [Style [Y230](#style-y230)] - - Usa JS Hint para resaltar problemas en tu JavaScript y asegurate de personalizar el arhivo de opciones de JS Hint e incluirlo en el control de versiones. Ve los [JS Hint docs](http://www.jshint.com/docs/) para detalles sobre estas opciones. + - Usa JS Hint para resaltar problemas en tu JavaScript y asegurate de personalizar el arhivo de opciones de JS Hint e incluirlo en el control de versiones. Ve los [JS Hint docs](https://jshint.com/docs/) para detalles sobre estas opciones. *¿Por qué?*: Provee una primera alerta antes de hacer commit de cualquier código al control de versiones. @@ -2777,7 +2777,7 @@ Enrutamiento del lado del Cliente es importante para crear un flujo de navegaci **[Volver arriba](#tabla-de-contenidos)** ## Automatización de Tareas -Usa [Gulp](http://gulpjs.com) o [Grunt](http://gruntjs.com) para crear tareas automatizadas. Gulp deriva a código sobre configuración mientras que Grunt deriva a configuración sobre código. Personalmente yo prefiero Gulp ya que se siente más fácil de leer y escribir, pero ambos son excelentes. +Usa [Gulp](https://gulpjs.com) o [Grunt](https://gruntjs.com) para crear tareas automatizadas. Gulp deriva a código sobre configuración mientras que Grunt deriva a configuración sobre código. Personalmente yo prefiero Gulp ya que se siente más fácil de leer y escribir, pero ambos son excelentes. ###### [Style [Y400](#style-y400)] @@ -2819,7 +2819,7 @@ _tldr; Usa esta guía. Reconocimientos son apreciados._ ### (The MIT License) -Copyright (c) 2014 [John Papa](http://johnpapa.net) +Copyright (c) 2014 [John Papa](https://johnpapa.net) Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the diff --git a/a1/i18n/fr-FR.md b/a1/i18n/fr-FR.md index 637f7673..315c8bfa 100644 --- a/a1/i18n/fr-FR.md +++ b/a1/i18n/fr-FR.md @@ -2,7 +2,7 @@ *Guide de style subjectif pour Angular par [@john_papa](//twitter.com/john_papa)* -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. +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](https://app.pluralsight.com/profile/author/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. @@ -13,7 +13,7 @@ Le but de ce guide de style est de proposer des conseils sur le développement d ## 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. -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. +Beaucoup de mes styles proviennent des nombreuses séances de pair programming avec [Ward Bell](https://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). @@ -298,7 +298,7 @@ Bien que ce guide explique le *quoi*, le *pourquoi* et le *comment*, il m'est ut ### Syntaxe de la vue avec `controllerAs` ###### [Style [Y030](#style-y030)] - - 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`. + - Utilisez la syntaxe avec [`controllerAs`](https://johnpapa.net/do-you-like-your-angular-controllers-with-or-without-sugar/) au lieu de la syntaxe classique avec `$scope`. *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`. @@ -371,7 +371,7 @@ 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 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. + Note : Vous pouvez évitez n'importe quel avertissement [jshint](https://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 */ @@ -488,7 +488,7 @@ Bien que ce guide explique le *quoi*, le *pourquoi* et le *comment*, il m'est ut ### 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* 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). + - 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](https://johnpapa.net/angular-function-declarations-function-expressions-and-readable-code). *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. @@ -728,7 +728,7 @@ Bien que ce guide explique le *quoi*, le *pourquoi* et le *comment*, il m'est ut ### Responsabilité unique ###### [Style [Y050](#style-y050)] - - 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. + - Les *factories* ne devraient avoir qu'une [seule et unique responsabilité](https://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)] @@ -740,7 +740,7 @@ Bien que ce guide explique le *quoi*, le *pourquoi* et le *comment*, il m'est ut ### Membres accessibles au début ###### [Style [Y052](#style-y052)] - - 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). + - Placez les membres appelables du services (son interface) en haut, utilisant une technique dérivée du [*Revealing Module Pattern*](https://addyosmani.com/resources/essentialjsdesignpatterns/book/#revealingmodulepatternjavascript). *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*). @@ -797,7 +797,7 @@ Bien que ce guide explique le *quoi*, le *pourquoi* et le *comment*, il m'est ut ### Déclaration des fonctions pour cacher les détails d'implémentation ###### [Style [Y053](#style-y053)] - - 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). + - 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](https://johnpapa.net/angular-function-declarations-function-expressions-and-readable-code). *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. @@ -1127,7 +1127,7 @@ Bien que ce guide explique le *quoi*, le *pourquoi* et le *comment*, il m'est ut *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 : É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/). + 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](https://ionicframework.com/). ### Restreindre aux éléments et aux attributs ###### [Style [Y074](#style-y074)] @@ -1610,7 +1610,7 @@ Bien que ce guide explique le *quoi*, le *pourquoi* et le *comment*, il m'est ut ### ng-annotate ###### [Style [Y100](#style-y100)] - - 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 */`. + - Utilisez [ng-annotate](//github.com/olov/ng-annotate) pour [Gulp](https://gulpjs.com) ou [Grunt](https://gruntjs.com) et commentez les fonctions qui nécessitent l'injection de dépendances automatique en utilisant `/** @ngInject */`. *Pourquoi ?* : Cela prévient votre code d'erreur provenant de dépendances n'utilisant pas les bonnes pratiques au regard de la minification. @@ -1687,7 +1687,7 @@ Bien que ce guide explique le *quoi*, le *pourquoi* et le *comment*, il m'est ut ### 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 a des dépendances. + - Utilisez [gulp-ng-annotate](https://www.npmjs.com/package/gulp-ng-annotate) ou [grunt-ng-annotate](https://www.npmjs.com/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 l'ajout de `/* @ngInject */ˋ. @@ -2142,7 +2142,7 @@ Bien que ce guide explique le *quoi*, le *pourquoi* et le *comment*, il m'est ut - 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 de justifications concernant l'architecture 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](https://johnpapa.net/angular-app-structuring-guidelines/). ### Layout ###### [Style [Y151](#style-y151)] @@ -2420,11 +2420,11 @@ Les tests unitaires aident à maintenir un code source propre, ainsi j'ai inclus ### Librairie de test ###### [Style [Y191](#style-y191)] - - Utilisez [Jasmine](http://jasmine.github.io/) or [Mocha](http://mochajs.org) pour les tests unitaires. + - Utilisez [Jasmine](https://jasmine.github.io/) or [Mocha](https://mochajs.org) pour les tests unitaires. *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. + Note : Lorsque vous utilisez Mocha, utilisez aussi une librairie d'assertion telle que [Chai](https://www.chaijs.com). Je prefère Mocha. ### Lanceur de Test ###### [Style [Y192](#style-y192)] @@ -2435,9 +2435,9 @@ Les tests unitaires aident à maintenir un code source propre, ainsi j'ai inclus *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 ?* : Quelques EDI commencent à s'intégrer avec Karma, c'est le cas de [WebStorm](http://www.jetbrains.com/webstorm/) et [Visual Studio](https://marketplace.visualstudio.com/items?itemName=DanielFisherlennybacon.KarmaVs). - *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. + *Pourquoi ?* : Karma fonctionne bien avec les principaux outils d'automatisation de tâches tel que [Grunt](https://gruntjs.com) (avec [grunt-karma](https://github.com/karma-runner/grunt-karma)) ou [Gulp](https://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. ```javascript /* recommended */ @@ -2488,7 +2488,7 @@ Les tests unitaires aident à maintenir un code source propre, ainsi j'ai inclus ### `stub` et les `spy` ###### [Style [Y193](#style-y193)] - - Utilisez [Sinon](http://sinonjs.org/) pour les `stub` et les `spy`. + - Utilisez [Sinon](https://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. @@ -2581,7 +2581,7 @@ Les tests unitaires aident à maintenir un code source propre, ainsi j'ai inclus ### animate.css ###### [Style [Y212](#style-y212)] - - Utilisez [animate.css](http://daneden.github.io/animate.css/) pour les animations classiques. + - Utilisez [animate.css](https://daneden.github.io/animate.css/) pour les animations classiques. *Pourquoi ?* : Les animations que fournit animate.css sont rapides, fluides et faciles à ajouter à votre application. @@ -2589,7 +2589,7 @@ Les tests unitaires aident à maintenir un code source propre, ainsi j'ai inclus *Pourquoi ?* : animate.css est largement utilisée et testé. - 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) + Note : Lire ce [super post par Matias Niemelä sur les animations Angular](https://www.yearofmoo.com/2013/08/remastered-animation-in-angularjs-1-2.html) **[Retour en haut de page](#table-des-matières)** @@ -2650,7 +2650,7 @@ Les tests unitaires aident à maintenir un code source propre, ainsi j'ai inclus ### Utilisation d'un fichier d'options ###### [Style [Y230](#style-y230)] - - 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. + - 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](https://jshint.com/docs/) pour avoir les détails de chaque option. *Pourquoi ?* : Cela fournit une première alerte avant de *committer* son code dans le système de versioning. @@ -3106,7 +3106,7 @@ 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. À titre personnel je préfère Gulp car il me semble plus facile à lire et écrire, mais les deux sont excellents. +Utilisez [Gulp](https://gulpjs.com) ou [Grunt](https://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. > Apprenez-en plus sur Gulp et les *patterns* pour l'automatisation en allant voir [mon cours sur Pluralsight](http://jpapa.me/gulpps) @@ -3160,7 +3160,7 @@ en bref; Utilisez ce guide. Les attributions sont appréciées._ ### Copyright -Copyright (c) 2014-2015 [John Papa](http://johnpapa.net) +Copyright (c) 2014-2015 [John Papa](https://johnpapa.net) ### (The MIT License) Permission is hereby granted, free of charge, to any person obtaining diff --git a/a1/i18n/it-IT.md b/a1/i18n/it-IT.md index fa87b1b5..e6a858a1 100644 --- a/a1/i18n/it-IT.md +++ b/a1/i18n/it-IT.md @@ -6,7 +6,7 @@ Uno speciale ringraziamento a Igor Minar, a capo del Team di Angular, per la rev ## Scopo *Guida stilistica dogmatica ad Angular per i team di [@john_papa](//twitter.com/john_papa)* -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](https://app.pluralsight.com/profile/author/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. @@ -17,13 +17,13 @@ L'obbiettivo di questa guida stilistica è di fare da vademecum alla costruzione ## Eccezionalità della comunità e riconoscimenti Mai lavorare nel vuoto. Ritengo che la comunità intorno ad Angular sia un gruppo incredibile con la passione di condividere le esperienze. Perciò, Todd Motto, un amico ed un esperto di Angular, ed io abbiamo collaborato su molti stili e convenzioni. Su molto siamo d'accordo, su altro meno. Ti invito a controllare le [linee guida di Todd](https://github.com/toddmotto/angularjs-styleguide) per avere cognizione del suo approccio e di come paragonarle. -Molti dei mie stili sono frutto di parecchie sessioni di pair programming che [Ward Bell](http://twitter.com/wardbell) ed io abbiamo avuto. Il mio amico Ward ha di certo una influenza sull'evoluzione finale di questa guida. +Molti dei mie stili sono frutto di parecchie sessioni di pair programming che [Ward Bell](https://twitter.com/wardbell) ed io abbiamo avuto. Il mio amico Ward ha di certo una influenza sull'evoluzione finale di questa guida. ## 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 di questa guida stilistica ad Angular](https://github.com/johnpapa/angularjs-styleguide/tree/master/i18n) sono gestite dalla comunità e possono essere trovate qui. +[Traduzioni di questa guida stilistica ad Angular](https://github.com/johnpapa/angular-styleguide/tree/master/a1/i18n) sono gestite dalla comunità e possono essere trovate qui. ## Tavola dei contenuti @@ -302,7 +302,7 @@ 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`](https://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`. @@ -375,7 +375,7 @@ Invece usa la più semplice sintassi setter. } ``` - Nota: Puoi evitare ogni warning di [jshint](http://www.jshint.com/) ponendo il commento sotto riportato al di sopra della linea di codice. Comunque ciò non è richiesto quando la funzione è nominata ConUsoMaiuscole, dal momento che questa convenzione è intesa come funzione costruttore ovvero ciò che un controller è in Angular. + Nota: Puoi evitare ogni warning di [jshint](https://jshint.com/) ponendo il commento sotto riportato al di sopra della linea di codice. Comunque ciò non è richiesto quando la funzione è nominata ConUsoMaiuscole, dal momento che questa convenzione è intesa come funzione costruttore ovvero ciò che un controller è in Angular. ```javascript /* jshint validthis: true */ @@ -507,7 +507,7 @@ Invece usa la più semplice sintassi setter. ### Dichiarazioni di funzione per nascondere i dettagli di implementazione ###### [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). + - 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](https://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.) @@ -746,7 +746,7 @@ Invece usa la più semplice sintassi setter. ### 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. + - Le factory dovrebbero avere la [singola responsabilità](https://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. ### Singleton ###### [Stile [Y051](#stile-y051)] @@ -758,7 +758,7 @@ Invece usa la più semplice sintassi setter. ### 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](https://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). @@ -816,7 +816,7 @@ Invece usa la più semplice sintassi setter. ### Dichiarazioni di funzione per nascondere i dettagli di implementazione ###### [Stile [Y053](#stile-y053)] - - 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). + - 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](https://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. @@ -1148,7 +1148,7 @@ Invece usa la più semplice sintassi setter. *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/). + 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 ](https://ionicframework.com/). ### Restringi a Elementi and Attributi ###### [Stile [Y074](#stile-y074)] @@ -1631,7 +1631,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](https://gulpjs.com) o [Grunt](https://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 @@ -1708,7 +1708,7 @@ Invece usa la più semplice sintassi setter. ### Usa Gulp o Grunt per ng-annotate ###### [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. + - Usa [gulp-ng-annotate](https://www.npmjs.com/package/gulp-ng-annotate) o [grunt-ng-annotate](https://www.npmjs.com/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 */`. @@ -2163,7 +2163,7 @@ Invece usa la più semplice sintassi setter. - Abbi una visione a breve termine dell'implementazione e una a lunga scadenza. In altre parole, parti in piccolo ma tieni in mente su dove l'app è diretta lungo il percorso. Tutto il codice dell'app va nella cartella principale chiamata `app`. Tutto il contenuto rispetta 1 funzione per file. Ogni controller, service, module, view nel proprio file. Tutti gli script di terze parti sono poste in una altra cartella principale e non nella cartella `app`. Non le ho scritte e non voglio facciano disordine nella mia app (`bower_components`, `scripts`, `lib`). - Nota: Trovi più dettagli e le motivazioni di questa struttura nel [post originale sulla struttura delle applicazioni](http://www.johnpapa.net/angular-app-structuring-guidelines/) (in inglese). + Nota: Trovi più dettagli e le motivazioni di questa struttura nel [post originale sulla struttura delle applicazioni](https://johnpapa.net/angular-app-structuring-guidelines/) (in inglese). ### Layout ###### [Stile [Y151](#stile-y151)] @@ -2440,11 +2440,11 @@ Gli unit test aiutano a mantenere il codice più chiaro, perciò ho incluso alcu ### Librerie per i test ###### [Stile [Y191](#stile-y191)] - - Usa [Jasmine](http://jasmine.github.io/) oppure [Mocha](http://mochajs.org) per lo unit testing. + - Usa [Jasmine](https://jasmine.github.io/) oppure [Mocha](https://mochajs.org) per lo unit testing. *Perché?*: Sia Jasmine che Mocha sono largamente utilizzati nella comunità di Angular. Entrambi son stabili, ben manutenuti e forniscono funzionalità solide per i test. - Nota: Usando Mocha, tieni in considerazione di usare anche una libreria di asserzione come [Chai](http://chaijs.com). Io preferisco Mocha. + Nota: Usando Mocha, tieni in considerazione di usare anche una libreria di asserzione come [Chai](https://www.chaijs.com). Io preferisco Mocha. ### Esecutori di Test ###### [Stile [Y192](#stile-y192)] @@ -2455,9 +2455,9 @@ Gli unit test aiutano a mantenere il codice più chiaro, perciò ho incluso alcu *Perché?*: Karma si aggancia facilmente al tuo processo di Integrazione Continua da solo o attraverso Grunt o Gulp. - *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é?*: Alcuni IDE cominciano ad integrarsi con Karma, come [WebStorm](http://www.jetbrains.com/webstorm/) e [Visual Studio](https://marketplace.visualstudio.com/items?itemName=DanielFisherlennybacon.KarmaVs). - *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. + *Perché?*: Karma lavora bene con leader di automazione di processo quali [Grunt](https://gruntjs.com) (con [grunt-karma](https://github.com/karma-runner/grunt-karma)) e [Gulp](https://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 */ @@ -2508,7 +2508,7 @@ Gli unit test aiutano a mantenere il codice più chiaro, perciò ho incluso alcu ### Stubbing e Spying ###### [Stile [Y193](#stile-y193)] - - Usa [Sinon](http://sinonjs.org) per lo stubbing e spying. + - Usa [Sinon](https://sinonjs.org) per lo stubbing e spying. *Perché?*: Sinon lavora bene sia con Jasmine che Mocha ed estende le funzionalità di stubbing e spying che questi offrono. @@ -2599,7 +2599,7 @@ Gli unit test aiutano a mantenere il codice più chiaro, perciò ho incluso alcu ### animate.css ###### [Stile [Y212](#stile-y212)] - - Usa [animate.css](http://daneden.github.io/animate.css/) per animazioni convenzionali. + - Usa [animate.css](https://daneden.github.io/animate.css/) per animazioni convenzionali. *Perché?*: Le animazione che animate.css fornisce sono veloci, dolci e facili da aggiungere alla tua applicazione. @@ -2607,7 +2607,7 @@ Gli unit test aiutano a mantenere il codice più chiaro, perciò ho incluso alcu *Perché?*: animate.css è ampiamente usato e testato. - Nota: Leggi questo [ottimo post di Matias Niemelä sulle animazioni di Angular](http://www.yearofmoo.com/2013/08/remastered-animation-in-angularjs-1-2.html) + Nota: Leggi questo [ottimo post di Matias Niemelä sulle animazioni di Angular](https://www.yearofmoo.com/2013/08/remastered-animation-in-angularjs-1-2.html) **[Torna all'inizio](#tavola-dei-contenuti)** @@ -2668,7 +2668,7 @@ Gli unit test aiutano a mantenere il codice più chiaro, perciò ho incluso alcu ### Usa un file di opzioni ###### [Stile [Y230](#stile-y230)] - - Usa JS Hint per spazzolare il tuo JavaScript ed assicurati di ritagliare il file di opzioni di JS Hint e di includerlo nel source control. Vedi la [documentazione di JS Hint](http://www.jshint.com/docs/) per i dettagli sulle opzioni. + - Usa JS Hint per spazzolare il tuo JavaScript ed assicurati di ritagliare il file di opzioni di JS Hint e di includerlo nel source control. Vedi la [documentazione di JS Hint](https://jshint.com/docs/) per i dettagli sulle opzioni. *Perché?*: Da un allerta iniziale prima di fare il commit di qualunque codice al source control. @@ -2914,7 +2914,7 @@ Usa file template o snippet che ti aiutino a seguire stili e schemi consistentem - Live template per Angular che seguono queste linee guida. - Scarica [webstorm-angular-live-templates.xml](assets/webstorm-angular-live-templates/webstorm-angular-live-templates.xml?raw=true) - - Mettili nella tua Place it in your [cartella dei template](https://www.jetbrains.com/webstorm/help/project-and-ide-settings.html) + - Mettili nella tua Place it in your [cartella dei template](https://www.jetbrains.com/help/webstorm/project-and-ide-settings.html) - Riavvia WebStorm - In un file JavaScript digita questi comandi seguiti da `TAB` @@ -3019,7 +3019,7 @@ Usa file template o snippet che ti aiutino a seguire stili e schemi consistentem ###### [Stile [Y256](#stile-y256)] - - Snippet [Visual Studio Code](http://code.visualstudio.com) che seguono questi stili e linee guida. + - Snippet [Visual Studio Code](https://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. @@ -3154,7 +3154,7 @@ Il routing del lato client è importante al fine di creare in flusso di navigazi **[Torna all'inizio](#tavola-dei-contenuti)** ## Automazione dei processi -Usa [Gulp](http://gulpjs.com) o [Grunt](http://gruntjs.com) per la creazione di processi automatizzati. Gulp si basa su "codice sopra configurazione" mentre Grunt si basa su "configurazione sopra codice". Personalmente preferisco Gulp poiché lo percepisco come più facile da leggere e scrivere ma entrambi sono eccellenti. +Usa [Gulp](https://gulpjs.com) o [Grunt](https://gruntjs.com) per la creazione di processi automatizzati. Gulp si basa su "codice sopra configurazione" mentre Grunt si basa su "configurazione sopra codice". Personalmente preferisco Gulp poiché lo percepisco come più facile da leggere e scrivere ma entrambi sono eccellenti. > Impara di più su Gulp per l'automazione dei processi e pattern in mio [corso Pluralsight su Gulp](http://jpapa.me/gulpps) (in inglese) @@ -3209,7 +3209,7 @@ _tldr; Usa questa guida. I riferimenti sono apprezzati._ ### (The MIT License) -Copyright (c) 2014 [John Papa](http://johnpapa.net) +Copyright (c) 2014 [John Papa](https://johnpapa.net) Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the diff --git a/a1/i18n/ja-JP.md b/a1/i18n/ja-JP.md index 4b034ae4..c7c786d1 100644 --- a/a1/i18n/ja-JP.md +++ b/a1/i18n/ja-JP.md @@ -2,7 +2,7 @@ *[@john_papa](//twitter.com/john_papa)によるチームのための頑固なAngularスタイルガイド* -もしあなたがAngularのシンタックス、規約、そしてアプリケーション構成のための頑固なスタイルガイドを探しているなら、どうぞいらっしゃい！本スタイルは、[Angular](//angularjs.org)を用いた私の開発経験やプレゼンテーション、[Pluralsight training courses](http://pluralsight.com/training/Authors/Details/john-papa) 、そしてチームでの作業に基づいたものです。 +もしあなたがAngularのシンタックス、規約、そしてアプリケーション構成のための頑固なスタイルガイドを探しているなら、どうぞいらっしゃい！本スタイルは、[Angular](//angularjs.org)を用いた私の開発経験やプレゼンテーション、[Pluralsight training courses](https://app.pluralsight.com/profile/author/john-papa) 、そしてチームでの作業に基づいたものです。 このスタイルガイドの目的は、私が実践している規約だけでなく、私がそれを行う理由を示すことによって、Angularアプリケーションを構築する手引きとなることです。 @@ -13,13 +13,13 @@ ## Community Awesomeness and Credit あなたは決して1人でありません！Angularのコミュニティは、自身の経験を共有することに情熱的な素晴らしい集団です。実際、友人でありAngularのエキスパートでもある Todd Motto と私は、共同で多くのスタイルや規約をまとめました。一部意見が分かれましたが、概ね合意できるものでした。彼のアプローチと本スタイルとの比較のため、是非 [Todd's guidelines](https://github.com/toddmotto/angularjs-styleguide) をチェックすることをお勧めします。 -ここで紹介する多くのスタイルは、数多くのペアプログラミングのセッション [Ward Bell](http://twitter.com/wardbell) および私自身が既に持っていたアイデアによるものです。いつも意見が一致した訳ではないですが、友人のWardはこのガイドの最終的な発展に大きく貢献してくれました。 +ここで紹介する多くのスタイルは、数多くのペアプログラミングのセッション [Ward Bell](https://twitter.com/wardbell) および私自身が既に持っていたアイデアによるものです。いつも意見が一致した訳ではないですが、友人のWardはこのガイドの最終的な発展に大きく貢献してくれました。 ## See the Styles in a Sample App このガイドは"何を"、"なぜ"、"どのように"行えば良いかという説明をしますが、合わせて実践的に見ていくことが理解に役立つはずです。本ガイドは、スタイルやパターンに沿ったサンプルアプリケーションを [`modular`のディレクトリ](https://github.com/johnpapa/ng-demos) に用意しています。ここから自由に取得しcloneやforkをしてもらって構いません。また [readmeに実行のためのインストラクション](https://github.com/johnpapa/ng-demos/tree/master/modular) もあります。 ## Translations -[Translations of this Angular style guide](https://github.com/johnpapa/angular-styleguide/tree/master/i18n) がコミュニティによってメンテナンスされており、そこで翻訳を参照することができます。 +[Translations of this Angular style guide](https://github.com/johnpapa/angular-styleguide/tree/master/a1/i18n) がコミュニティによってメンテナンスされており、そこで翻訳を参照することができます。 ## Table of Contents @@ -291,7 +291,7 @@ ### controllerAs View Syntax ###### [Style [Y030](#style-y030)] - - `典型的な$scopeを使ったcontroller`のシンタックスよりも、[`controllerAs`](http://www.johnpapa.net/do-you-like-your-angular-controllers-with-or-without-sugar/) を用いて下さい。 + - `典型的な$scopeを使ったcontroller`のシンタックスよりも、[`controllerAs`](https://johnpapa.net/do-you-like-your-angular-controllers-with-or-without-sugar/) を用いて下さい。 *なぜ ?*: 全く新規にControllersが生成されると、 単一の新しいインスタンスが生成されます。`controllerAs` のシンタックスは、`典型的な$scopeを使ったcontroller`のシンタックスよりも、JavaScriptのコンストラクタにより近いものとなります。 @@ -364,7 +364,7 @@ } ``` - Note: コメントをコードの上部に入れることで [jshint](http://www.jshint.com/) のwarningsを避けることができます。 しかし関数がアッパーケースの場合には不要です。規約的にはそれはコンストラクタであり、Angularではコントローラに当たります。 + Note: コメントをコードの上部に入れることで [jshint](https://jshint.com/) のwarningsを避けることができます。 しかし関数がアッパーケースの場合には不要です。規約的にはそれはコンストラクタであり、Angularではコントローラに当たります。 ```javascript /* jshint validthis: true */ @@ -481,7 +481,7 @@ ### Function Declarations to Hide Implementation Details ###### [Style [Y034](#style-y034)] - - 実装の詳細を隠すために関数宣言を用いて下さい。またバインドされるメンバを先頭に置いて下さい。コントローラの中で関数をバインドするときは、その関数がファイルの後方に現れる関数宣言を指すようにします。これは、「Bindable Members Up Top」のセクションと直接対応しています。 詳細は[このポスト](http://www.johnpapa.net/angular-function-declarations-function-expressions-and-readable-code) を参照して下さい。 + - 実装の詳細を隠すために関数宣言を用いて下さい。またバインドされるメンバを先頭に置いて下さい。コントローラの中で関数をバインドするときは、その関数がファイルの後方に現れる関数宣言を指すようにします。これは、「Bindable Members Up Top」のセクションと直接対応しています。 詳細は[このポスト](https://johnpapa.net/angular-function-declarations-function-expressions-and-readable-code) を参照して下さい。 *なぜ ?*: バインドするメンバを先頭に書くことで可読性が上がり、コントローラのどのメンバがバインドされ、ビューの中で使われるのかが即座に特定できます(上記と同じ)。 @@ -721,7 +721,7 @@ ### Single Responsibility ###### [Style [Y050](#style-y050)] - - ファクトリは[単一責任](http://en.wikipedia.org/wiki/Single_responsibility_principle)であるべきであり、そのコンテキストに応じてカプセル化されます。ファクトリが一つの目的を超えて利用され始めた場合は、新しいファクトリが作成されるべきです。 + - ファクトリは[単一責任](https://en.wikipedia.org/wiki/Single_responsibility_principle)であるべきであり、そのコンテキストに応じてカプセル化されます。ファクトリが一つの目的を超えて利用され始めた場合は、新しいファクトリが作成されるべきです。 ### Singletons ###### [Style [Y051](#style-y051)] @@ -733,7 +733,7 @@ ### Accessible Members Up Top ###### [Style [Y052](#style-y052)] - - 呼び出し可能なサービスのメンバ(そのインターフェイス)を先頭に公開します。このテクニックは [Revealing Module Pattern](http://addyosmani.com/resources/essentialjsdesignpatterns/book/#revealingmodulepatternjavascript) に由来しています。 + - 呼び出し可能なサービスのメンバ(そのインターフェイス)を先頭に公開します。このテクニックは [Revealing Module Pattern](https://addyosmani.com/resources/essentialjsdesignpatterns/book/#revealingmodulepatternjavascript) に由来しています。 *なぜ ?*: 呼び出し可能なメンバを先頭に置くことは可読性に優れ、どのサービスのメンバが呼び出し可能で単体テストされる(モックされる)べきなのかを即座に特定するのに役立ちます。 @@ -783,12 +783,12 @@ ``` このバインディングの方法はホストオブジェクト全体で反映されます。このrevealing module パターンを使うことで単独でプリミティブの値を更新することは出来なくなります。 - ![Factories Using "Above the Fold"](https://raw.githubusercontent.com/johnpapa/angularjs-styleguide/master/assets/above-the-fold-2.png) + ![Factories Using "Above the Fold"](https://raw.githubusercontent.com/johnpapa/angularjs-styleguide/master/a1/assets/above-the-fold-2.png) ### Function Declarations to Hide Implementation Details ###### [Style [Y053](#style-y053)] - - 実装の詳細を隠すために関数宣言を用いて下さい。ファクトリのアクセス可能なメンバを先頭に置いて下さい。それらのメンバがファイルの後方に現れる関数宣言を指すようにします。詳細は[このポスト](http://www.johnpapa.net/angular-function-declarations-function-expressions-and-readable-code) を参照して下さい。 + - 実装の詳細を隠すために関数宣言を用いて下さい。ファクトリのアクセス可能なメンバを先頭に置いて下さい。それらのメンバがファイルの後方に現れる関数宣言を指すようにします。詳細は[このポスト](https://johnpapa.net/angular-function-declarations-function-expressions-and-readable-code) を参照して下さい。 *なぜ ?*: アクセス可能なメンバを先頭に書くことで可読性が上がり、ファクトリの中でどの関数が外部からアクセス可能なのか即座に特定できます。 @@ -1119,7 +1119,7 @@ *なぜ ?*: ユニークで簡潔なプリフィックスは、ディレクティブのコンテキストと由来を特定します。例えば、`cc-` というプリフィックスは、CodeCamperアプリを示し、`acme-` は Acme companyのためのディレクティブであることを示します。 - Note: `ng-` のようなAngularのdirectivesのためにリザーブされているものは避けて下さい。 名前の衝突を避けるため、[Ionic Framework](http://ionicframework.com/)の`ion-`のように、幅広く利用されているディレクティブを調査して下さい。 + Note: `ng-` のようなAngularのdirectivesのためにリザーブされているものは避けて下さい。 名前の衝突を避けるため、[Ionic Framework](https://ionicframework.com/)の`ion-`のように、幅広く利用されているディレクティブを調査して下さい。 ### Restrict to Elements and Attributes ###### [Style [Y074](#style-y074)] @@ -1602,7 +1602,7 @@ ### ng-annotate ###### [Style [Y100](#style-y100)] - - [Gulp](http://gulpjs.com)や[Grunt](http://gruntjs.com)のために[ng-annotate](//github.com/olov/ng-annotate)を使って下さい。自動の依存性の注入が必要となる関数に`/** @ngInject */`というコメントをいれて下さい。 + - [Gulp](https://gulpjs.com)や[Grunt](https://gruntjs.com)のために[ng-annotate](//github.com/olov/ng-annotate)を使って下さい。自動の依存性の注入が必要となる関数に`/** @ngInject */`というコメントをいれて下さい。 *なぜ ?*: このことはminificationセーフなプラクティスを利用していない依存性からコードを守ります。 @@ -1680,7 +1680,7 @@ ### Use Gulp or Grunt for 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) を使って下さい。依存性を持つどの関数よりも前に`/* @ngInject */` を注入して下さい。 + - 自動ビルドのタスクの中で[gulp-ng-annotate](https://www.npmjs.com/package/gulp-ng-annotate) もしくは [grunt-ng-annotate](https://www.npmjs.com/package/grunt-ng-annotate) を使って下さい。依存性を持つどの関数よりも前に`/* @ngInject */` を注入して下さい。 *なぜ ?*: ng-annotate は大半の依存性を捕捉しますが、`/* @ngInject */`のシンタックスを使ったヒントが時々必要となリます。 @@ -2111,7 +2111,7 @@ - 実装に関する短期的な視点と長期的なビジョンを持って下さい。言い換えると、小さく始めるが、アプリがどの方向に向かっているかををしっかりと把握することです。 全てのアプリケーションのコードは`app`という名前のルートのディレクトリ配下に置いて下さい。どのコンテンツもファイル毎に一機能として下さい。コントローラ、サービス、モジュール、ビューのそれぞれを独立したファイルにして下さい。全てのサードパーティのベンダーのスクリプトは別のルートのディレクトリの下に置き、`app`ディレクトリ配下には置かないで下さい。私はそのスクリプトを書いていないですし、それが自分のアプリを散らかしてしまうことも望んでいません(`bower_components`, `scripts`, `lib`)。 - Note: この構造の詳細や理由などは[this original post on application structure](http://www.johnpapa.net/angular-app-structuring-guidelines/)を参照して下さい。 + Note: この構造の詳細や理由などは[this original post on application structure](https://johnpapa.net/angular-app-structuring-guidelines/)を参照して下さい。 ### Layout ###### [Style [Y151](#style-y151)] @@ -2389,11 +2389,11 @@ ### Testing Library ###### [Style [Y191](#style-y191)] - - 単体テストには [Jasmine](http://jasmine.github.io/) もしくは [Mocha](http://mochajs.org) を使って下さい。 + - 単体テストには [Jasmine](https://jasmine.github.io/) もしくは [Mocha](https://mochajs.org) を使って下さい。 *なぜ ?*: Jasmine と Mocha はAngularのコミュニティで幅広く使われています。双方とも安定しており、十分メンテされており、ロバストなテスト機能が与えられます。 - Note: Mochaを用いるときは、合わせて[Chai](http://chaijs.com)といったアサートのライブラリを選ぶことを検討して下さい。私はMochaを好みます。 + Note: Mochaを用いるときは、合わせて[Chai](https://www.chaijs.com)といったアサートのライブラリを選ぶことを検討して下さい。私はMochaを好みます。 ### Test Runner ###### [Style [Y192](#style-y192)] @@ -2404,14 +2404,14 @@ *なぜ ?*: Karmaは自前のテストランナーもしくはGruntやGulpを用いた継続的なインテグレーションのプロセスに容易に接続することができます。 - *なぜ ?*: [WebStorm](http://www.jetbrains.com/webstorm/) や [Visual Studio](http://visualstudiogallery.msdn.microsoft.com/02f47876-0e7a-4f6c-93f8-1af5d5189225)などのいくつかのIDEはKarmaを統合し始めています。 + *なぜ ?*: [WebStorm](http://www.jetbrains.com/webstorm/) や [Visual Studio](https://marketplace.visualstudio.com/items?itemName=DanielFisherlennybacon.KarmaVs)などのいくつかのIDEはKarmaを統合し始めています。 - *なぜ ?*: Karmaは[Grunt](http://www.gruntjs.com) (と [grunt-karma](https://github.com/karma-runner/grunt-karma)) and [Gulp](http://www.gulpjs.com) (と [gulp-karma](https://github.com/lazd/gulp-karma))といった自動化のタスク上で正しく動作します。 + *なぜ ?*: Karmaは[Grunt](https://gruntjs.com) (と [grunt-karma](https://github.com/karma-runner/grunt-karma)) and [Gulp](https://gulpjs.com) (と [gulp-karma](https://github.com/lazd/gulp-karma))といった自動化のタスク上で正しく動作します。 ### Stubbing and Spying ###### [Style [Y193](#style-y193)] - - スタブやスパイのために [Sinon](http://sinonjs.org/) を使って下さい。 + - スタブやスパイのために [Sinon](https://sinonjs.org/) を使って下さい。 *なぜ ?*: SinonはJasminとMochaと一緒に正しく動作し、スタブやスパイの機能を拡張します。 @@ -2504,7 +2504,7 @@ ### animate.css ###### [Style [Y212](#style-y212)] - - 慣習的なアニメーションには[animate.css](http://daneden.github.io/animate.css/)を使って下さい。 + - 慣習的なアニメーションには[animate.css](https://daneden.github.io/animate.css/)を使って下さい。 *なぜ ?*: animation.cssが提供するアニメーションは速く、スムーズで、アプリケーションへの追加が容易です。 @@ -2512,7 +2512,7 @@ *なぜ ?*: animate.cssは広く利用されておりテストされています。 - Note: この[Matias NiemeläによるAngularのアニメーションの素晴らしいポスト](http://www.yearofmoo.com/2013/08/remastered-animation-in-angularjs-1-2.html)を見て下さい。 + Note: この[Matias NiemeläによるAngularのアニメーションの素晴らしいポスト](https://www.yearofmoo.com/2013/08/remastered-animation-in-angularjs-1-2.html)を見て下さい。 **[Back to top](#table-of-contents)** @@ -2573,7 +2573,7 @@ ### Use an Options File ###### [Style [Y230](#style-y230)] - - JavaScriptのコードにlintをかけるためにJS Hintを使って下さい。JS Hintのオプションを必ずカスタマイズしてソースコード管理に含めて下さい。詳細なオプションは[JS Hint docs](http://www.jshint.com/docs/)を参照して下さい。 + - JavaScriptのコードにlintをかけるためにJS Hintを使って下さい。JS Hintのオプションを必ずカスタマイズしてソースコード管理に含めて下さい。詳細なオプションは[JS Hint docs](https://jshint.com/docs/)を参照して下さい。 *なぜ ?*: ソース管理にコードをコミットする前に最初にアラートが上がります。 @@ -3025,7 +3025,7 @@ ## Task Automation -自動タスクの生成に[Gulp](http://gulpjs.com)または[Grunt](http://gruntjs.com)を使って下さい。Gulpはコンフィグレーションをコーディングでリーンに行えます。一方で、Gruntはコードをコンフィグレーションでリーンに行うことができます。個人的には読みやすくまた書きやすいGulpを好みますが両者とも素晴らしいです。 +自動タスクの生成に[Gulp](https://gulpjs.com)または[Grunt](https://gruntjs.com)を使って下さい。Gulpはコンフィグレーションをコーディングでリーンに行えます。一方で、Gruntはコードをコンフィグレーションでリーンに行うことができます。個人的には読みやすくまた書きやすいGulpを好みますが両者とも素晴らしいです。 > 私の[Gulp Pluralsight course](http://jpapa.me/gulpps)でGulpについてやタスクの自動化についてより学ぶことができます。 @@ -3079,7 +3079,7 @@ _tldr; Use this guide. Attributions are appreciated._ ### Copyright -Copyright (c) 2014-2015 [John Papa](http://johnpapa.net) +Copyright (c) 2014-2015 [John Papa](https://johnpapa.net) ### (The MIT License) Permission is hereby granted, free of charge, to any person obtaining diff --git a/a1/i18n/ko-KR.md b/a1/i18n/ko-KR.md index 7d2a1d65..7c58c2df 100644 --- a/a1/i18n/ko-KR.md +++ b/a1/i18n/ko-KR.md @@ -6,7 +6,7 @@ Angular 팀의 리더인 Igor Minar 에게 특별히 감사합니다. 이 스타 ## Purpose *팀환경을 위한 방향을 제시하는 Angular 스타일 가이드 by [@john_papa](//twitter.com/john_papa)* -만약 [Angular](//angularjs.org) 어플리케이션의 문법, 컨벤션, 구조화를 위한 스타일 가이드를 찾고 있다면 제대로 오셨습니다. 여기 제시된 스타일들은 제 팀 단위 개발 경험, 프레젠테이션, [Pluralsight training courses](http://pluralsight.com/training/Authors/Details/john-papa)를 토대로 만들어졌습니다. +만약 [Angular](//angularjs.org) 어플리케이션의 문법, 컨벤션, 구조화를 위한 스타일 가이드를 찾고 있다면 제대로 오셨습니다. 여기 제시된 스타일들은 제 팀 단위 개발 경험, 프레젠테이션, [Pluralsight training courses](https://app.pluralsight.com/profile/author/john-papa)를 토대로 만들어졌습니다. 이 스타일 가이드의 목적은 Angular 어플리케이션을 만드는 길잡이 역할을 하기 위함이며 더 나아가 왜 내가 이런 것들을 선택했는지 보여주기 위함입니다. >만약 이 가이드가 마음에 든다면 Pluralsight 에 올려놓은 저의 강의를 참고하시기 바랍니다. [Angular Patterns: Clean Code](http://jpapa.me/ngclean) @@ -16,14 +16,14 @@ Angular 팀의 리더인 Igor Minar 에게 특별히 감사합니다. 이 스타 ## Community Awesomeness and Credit 저는 Angular 커뮤니티의 대단함을 알게 되었습니다. 그들은 자신들의 경험을 공유하는데 열정적이기 때문입니다. 나의 친구이자 Angular 전문가인 Todd Motto 와 나는 많은 스타일과 컨벤션을 위해 공동작업을 하였습니다. 대부분 우리는 서로 동의하였지만 어떤 부분에서는 의견이 갈렸습니다. Todd의 접근방법이 궁금하고 이를 비교해보고 싶으신 분들은 다음 링크에 가서 확인해보시면 좋을 것 같습니다 [Todd's guidelines](https://github.com/toddmotto/angularjs-styleguide). -제 스타일의 많은 부분은 [Ward Bell](http://twitter.com/wardbell) 과 함께했던 2인 1조의 개발 세션을 통해서 많이 가져왔습니다. 저의 친구 Ward는 이 가이드의 원초적인 전개에 많은 도움을 주었습니다. +제 스타일의 많은 부분은 [Ward Bell](https://twitter.com/wardbell) 과 함께했던 2인 1조의 개발 세션을 통해서 많이 가져왔습니다. 저의 친구 Ward는 이 가이드의 원초적인 전개에 많은 도움을 주었습니다. ## See the Styles in a Sample App 예제 앱에 적용된 스타일을 참고하세요. 이 가이드가 무엇을, 왜, 어떻게 하는지 다 설명을 하겠지만, 실제로 적용된 것을 보는 게 더 도움이 될 거라고 봅니다. 이 가이드에 제시된 스타일과 양식을 따르는 예제 앱이 함께 제공되고 있습니다. 여기에 가시면 modular 라는 해당 [예제 앱을 modular](https://github.com/johnpapa/ng-demos) 라는 폴더 안에서 보실 수 있습니다. 가서 코드를 확인하시고, 복제하시고, 개입도 해보시기 바랍니다. [실행하는 방법은 readme 에 작성되어 있습니다.](https://github.com/johnpapa/ng-demos/tree/master/modular) ##Translations -커뮤니티를 통해 유지보수가 되는 [Angular 스타일 가이드의 번역문](https://github.com/johnpapa/angular-styleguide/tree/master/i18n)들은 여기에서 보실 수 있습니다. +커뮤니티를 통해 유지보수가 되는 [Angular 스타일 가이드의 번역문](https://github.com/johnpapa/angular-styleguide/tree/master/a1/i18n)들은 여기에서 보실 수 있습니다. ## Table of Contents @@ -319,7 +319,7 @@ Angular 팀의 리더인 Igor Minar 에게 특별히 감사합니다. 이 스타 ### controllerAs View Syntax ###### [Style [Y030](#style-y030)] - - '전형적인 $scope 을 사용한 콘트롤러' 대신 [`controllerAs`](http://www.johnpapa.net/do-you-like-your-angular-controllers-with-or-without-sugar/) 구문을 사용하세요. + - '전형적인 $scope 을 사용한 콘트롤러' 대신 [`controllerAs`](https://johnpapa.net/do-you-like-your-angular-controllers-with-or-without-sugar/) 구문을 사용하세요. *이유*: 컨트롤러는 새로이 만들어진 하나의 객채 생성하여 리턴합니다. 그리고 `controllerAs` 구문은 `전형적인 $scope 구문` 보다 더 자바스크립트의 생성자와 흡사하게 작동합니다. @@ -396,7 +396,7 @@ Angular 팀의 리더인 Igor Minar 에게 특별히 감사합니다. 이 스타 } ``` - 주의: 특정 코드의 바로 윗줄에 특정 코맨트를 추가함으로서 [jshint](http://www.jshint.com/) 경고를 무시하게 할 수 있습니다. 하지만 함수의 이름이 대문자일 경우에는 불필요합니다. 이 경우 함수는 생성자로 여겨지고 그 자체가 Angular에서 컨트롤러이기 때문입니다. + 주의: 특정 코드의 바로 윗줄에 특정 코맨트를 추가함으로서 [jshint](https://jshint.com/) 경고를 무시하게 할 수 있습니다. 하지만 함수의 이름이 대문자일 경우에는 불필요합니다. 이 경우 함수는 생성자로 여겨지고 그 자체가 Angular에서 컨트롤러이기 때문입니다. ```javascript @@ -530,7 +530,7 @@ Angular 팀의 리더인 Igor Minar 에게 특별히 감사합니다. 이 스타 ### Function Declarations to Hide Implementation Details ###### [Style [Y034](#style-y034)] - - 함수 선언문을 사용하여 구체적인 구현내용을 숨기세요. 바인딩 맴버들은 위쪽에 두세요. 컨트롤러 안에서 함수를 바인딩 하려면 파일 아래쪽에 위치한 함수 선언문을 참조하도록 하세요. 이렇게 하면 바인더블 섹션에 직접적으로 묶여지게 됩니다. 좀 더 구체적인 정보는 여기를 참고하세요 [this post](http://www.johnpapa.net/angular-function-declarations-function-expressions-and-readable-code). + - 함수 선언문을 사용하여 구체적인 구현내용을 숨기세요. 바인딩 맴버들은 위쪽에 두세요. 컨트롤러 안에서 함수를 바인딩 하려면 파일 아래쪽에 위치한 함수 선언문을 참조하도록 하세요. 이렇게 하면 바인더블 섹션에 직접적으로 묶여지게 됩니다. 좀 더 구체적인 정보는 여기를 참고하세요 [this post](https://johnpapa.net/angular-function-declarations-function-expressions-and-readable-code). *이유*: 바인딩할 맴버를 위쪽에 올려두면 뷰에서 어떤 맴버를 사용하는지 즉각적으로 구분하는데 도움이 되고 코드 읽기가 쉬워집니다. @@ -770,7 +770,7 @@ Angular 팀의 리더인 Igor Minar 에게 특별히 감사합니다. 이 스타 ### Single Responsibility ###### [Style [Y050](#style-y050)] - - 팩토리는 캡슐화 되어 단 [하나의 책임](http://en.wikipedia.org/wiki/Single_responsibility_principle)만 가져야 합니다. 팩토리가 단일 목적을 넘어 사용되게 된다면 다른 팩토리를 만들어야 합니다. + - 팩토리는 캡슐화 되어 단 [하나의 책임](https://en.wikipedia.org/wiki/Single_responsibility_principle)만 가져야 합니다. 팩토리가 단일 목적을 넘어 사용되게 된다면 다른 팩토리를 만들어야 합니다. ### Singletons ###### [Style [Y051](#style-y051)] @@ -782,7 +782,7 @@ Angular 팀의 리더인 Igor Minar 에게 특별히 감사합니다. 이 스타 ### Accessible Members Up Top ###### [Style [Y052](#style-y052)] - - 노출하고 싶은 호출 가능한 맴버(인터페이스)들은 서비스의 위쪽에 위치시키세요. 여기 링크에서 제시하는 방식을 사용하세요. [모듈 패턴 파해치기](http://addyosmani.com/resources/essentialjsdesignpatterns/book/#revealingmodulepatternjavascript). + - 노출하고 싶은 호출 가능한 맴버(인터페이스)들은 서비스의 위쪽에 위치시키세요. 여기 링크에서 제시하는 방식을 사용하세요. [모듈 패턴 파해치기](https://addyosmani.com/resources/essentialjsdesignpatterns/book/#revealingmodulepatternjavascript). *이유*: 호출 가능한 맴버들을 상단에 배치하는 것은 가독성을 높여주고 어떤 맴버들이 외부로 노출되고 호출 될 수 있는지 그리고 단위 테스트를 해야하는지 순식간에 파악가능하도록 해줍니다. @@ -839,7 +839,7 @@ Angular 팀의 리더인 Igor Minar 에게 특별히 감사합니다. 이 스타 ### Function Declarations to Hide Implementation Details ###### [Style [Y053](#style-y053)] - - 함수 정의를 사용하여 구체적 구현내용을 숨기세요. 노출시키고 싶은 맴버들을 상단에 배치하세요. 상단의 맴버에서 아래쪽에 정의된 함수들을 할당하세요. 더 자세한 정보는 여기를 보세요. [this post](http://www.johnpapa.net/angular-function-declarations-function-expressions-and-readable-code). + - 함수 정의를 사용하여 구체적 구현내용을 숨기세요. 노출시키고 싶은 맴버들을 상단에 배치하세요. 상단의 맴버에서 아래쪽에 정의된 함수들을 할당하세요. 더 자세한 정보는 여기를 보세요. [this post](https://johnpapa.net/angular-function-declarations-function-expressions-and-readable-code). *이유*: 상단에 접근 가능한 맴버들을 배치함으로서 읽기 쉬운 코드를 만들어주고 외부에서 접근 가능한 팩토리 함수를 즉각적으로 알아볼 수 있도록 도와줍니다. @@ -1169,7 +1169,7 @@ Angular 팀의 리더인 Igor Minar 에게 특별히 감사합니다. 이 스타 *이유*: 유일하고 짧은 접두어는 디렉티브의 문맥과 출신을 파악하게 해줍니다. 예를 들어 `cc-`는 아마 CodeCamper 앱을 지칭하려고 사용되었을 수 있습니다. 또한 `acme-`는 Acme company에서 사용된 디렉티브를 지칭할 수 있습니다. - 주의: `ng-`는 Angular 디렉티브로 예약되어 있기 때문에 사용하지 마세요. 넓게 검색한 후에 충돌이 없는지 확인하고 사용하세요. `ion-` 같은 경우 [Ionic Framework](http://ionicframework.com/) 프로젝트의 접두어로 사용되고 있으니까요. + 주의: `ng-`는 Angular 디렉티브로 예약되어 있기 때문에 사용하지 마세요. 넓게 검색한 후에 충돌이 없는지 확인하고 사용하세요. `ion-` 같은 경우 [Ionic Framework](https://ionicframework.com/) 프로젝트의 접두어로 사용되고 있으니까요. ### Restrict to Elements and Attributes ###### [Style [Y074](#style-y074)] @@ -1656,7 +1656,7 @@ Angular 팀의 리더인 Igor Minar 에게 특별히 감사합니다. 이 스타 ### ng-annotate ###### [Style [Y100](#style-y100)] - - [Gulp](http://gulpjs.com) or [Grunt](http://gruntjs.com)를 사용할 때 [ng-annotate](//github.com/olov/ng-annotate)를 사용하세요. 그리고 `/* @ngInject */`이 코맨트 함수를 사용하여 자동화된 의존성 인젝션을 사용하세요. + - [Gulp](https://gulpjs.com) or [Grunt](https://gruntjs.com)를 사용할 때 [ng-annotate](//github.com/olov/ng-annotate)를 사용하세요. 그리고 `/* @ngInject */`이 코맨트 함수를 사용하여 자동화된 의존성 인젝션을 사용하세요. *이유*: 최소화-안전 방식을 사용하지 않는 의존성 정의를 지켜줍니다. @@ -1733,7 +1733,7 @@ Angular 팀의 리더인 Igor Minar 에게 특별히 감사합니다. 이 스타 ### Use Gulp or Grunt for ng-annotate ###### [Style [Y101](#style-y101)] - - [gulp-ng-annotate](https://www.npmjs.org/package/gulp-ng-annotate) or [grunt-ng-annotate](https://www.npmjs.org/package/grunt-ng-annotate)를 사용하여 자동화 코드생성을 하세요. 의존성을 가지고 있는 모든 함수의 앞부분에 `/* @ngInject */`를 넣으세요. + - [gulp-ng-annotate](https://www.npmjs.com/package/gulp-ng-annotate) or [grunt-ng-annotate](https://www.npmjs.com/package/grunt-ng-annotate)를 사용하여 자동화 코드생성을 하세요. 의존성을 가지고 있는 모든 함수의 앞부분에 `/* @ngInject */`를 넣으세요. *이유*: ng-annotate는 대부분의 의존성을 잡아냅니다. 하지만 가끔 `/* @ngInject */`를 이용한 힌트가 필요할 수 있습니다. @@ -2188,7 +2188,7 @@ Angular 팀의 리더인 Igor Minar 에게 특별히 감사합니다. 이 스타 ###### [Style [Y150](#style-y150)] - 구현을 위한 생각을 가지되, 멀리 보고 고려하세요. 달리 말하자면, 작게 시작하지만 앞으로 얼마나 커질 수 있을지 항상 기억하세요. 모든 앱 코드는 `app`이라는 최상위 폴더에 들어갈 겁니다. 한 파일 안에는 한 가지 기능만 들어갑니다. 컨트롤러, 서비스, 모듈, 뷰는 각각의 파일을 가지고 그안에 넣습니다. 제 3의 외부 코드들은 `app`폴더가 아닌 다른 상위 폴더를 가지게 하세요. 내가 작성한 코드가 아니니 그 것들이 제 앱을 어지럽히기 원치 않으니까요 (`bower_components`, `scripts`, `lib`). - 주의: 구조를 만드는 것에 좀 더 구체적인 이유를 알고 싶으면 여기를 참고하세요. [this original post on application structure](http://www.johnpapa.net/angular-app-structuring-guidelines/). + 주의: 구조를 만드는 것에 좀 더 구체적인 이유를 알고 싶으면 여기를 참고하세요. [this original post on application structure](https://johnpapa.net/angular-app-structuring-guidelines/). ### Layout ###### [Style [Y151](#style-y151)] @@ -2467,11 +2467,11 @@ Angular 팀의 리더인 Igor Minar 에게 특별히 감사합니다. 이 스타 ### Testing Library ###### [Style [Y191](#style-y191)] - - [Jasmine](http://jasmine.github.io/) 또는 [Mocha](http://mochajs.org)를 사용하여 단위 테스트를 하세요. + - [Jasmine](https://jasmine.github.io/) 또는 [Mocha](https://mochajs.org)를 사용하여 단위 테스트를 하세요. *이유*: Jasmine과 Mocha 모두 Angular 커뮤니티에서 두루 사용되고 있습니다. 둘다 안정적이고 잘 유지보수 되고 있으며 확실하게 기능 테스트를 할 수 있습니다. - 주의: 모카를 사용할 경우 [Chai](http://chaijs.com)와 같은 assert 라이브러리를 선택하세요. 저는 개인적으로 Mocha를 선호합니다. + 주의: 모카를 사용할 경우 [Chai](https://www.chaijs.com)와 같은 assert 라이브러리를 선택하세요. 저는 개인적으로 Mocha를 선호합니다. ### Test Runner ###### [Style [Y192](#style-y192)] @@ -2482,9 +2482,9 @@ Angular 팀의 리더인 Igor Minar 에게 특별히 감사합니다. 이 스타 *이유*: Karma는 그 자체로 또는 Grunt나 Gulp를 이용하여 지속적인 통합을 연결해 진행하기 쉽도록 해줍니다. - *이유*: 어떤 IDE들은 Karma와 통합하기 시작했습니다. [WebStorm](http://www.jetbrains.com/webstorm/), [Visual Studio](http://visualstudiogallery.msdn.microsoft.com/02f47876-0e7a-4f6c-93f8-1af5d5189225) + *이유*: 어떤 IDE들은 Karma와 통합하기 시작했습니다. [WebStorm](http://www.jetbrains.com/webstorm/), [Visual Studio](https://marketplace.visualstudio.com/items?itemName=DanielFisherlennybacon.KarmaVs) - *이유*: [Grunt](http://www.gruntjs.com) (with [grunt-karma](https://github.com/karma-runner/grunt-karma)) and [Gulp](http://www.gulpjs.com)와 같은 자동화 선두주자들과 협업이 아주 좋습니다. Gulp를 사용한다면 [Karma](https://github.com/karma-runner/karma)를 플러그인을 사용하지 않고 직접적으로 API를 호출할 수 있습니다. + *이유*: [Grunt](https://gruntjs.com) (with [grunt-karma](https://github.com/karma-runner/grunt-karma)) and [Gulp](https://gulpjs.com)와 같은 자동화 선두주자들과 협업이 아주 좋습니다. Gulp를 사용한다면 [Karma](https://github.com/karma-runner/karma)를 플러그인을 사용하지 않고 직접적으로 API를 호출할 수 있습니다. ```javascript /* recommended */ @@ -2535,7 +2535,7 @@ Angular 팀의 리더인 Igor Minar 에게 특별히 감사합니다. 이 스타 ### Stubbing and Spying ###### [Style [Y193](#style-y193)] - - 스터빙이나 스파잉을 위해서는 [Sinon](http://sinonjs.org/)를 사용하세요. + - 스터빙이나 스파잉을 위해서는 [Sinon](https://sinonjs.org/)를 사용하세요. *이유*: Sinon은 Jasmine과 Mocha 둘다와 잘 작동하고 스터빙과 스파잉 기능을 이용해 확장할 수 있습니다. @@ -2629,7 +2629,7 @@ Angular 팀의 리더인 Igor Minar 에게 특별히 감사합니다. 이 스타 ### animate.css ###### [Style [Y212](#style-y212)] - - 평범한 애니메이션을 위해서는 [animate.css](http://daneden.github.io/animate.css/)를 사용하세요. + - 평범한 애니메이션을 위해서는 [animate.css](https://daneden.github.io/animate.css/)를 사용하세요. *이유*: animate.css이 제공하는 애니메이션들은 빠르고 부드럽고 쉽게 사용할 수 있습니다. @@ -2637,7 +2637,7 @@ Angular 팀의 리더인 Igor Minar 에게 특별히 감사합니다. 이 스타 *이유*: animate.css 널리 사용되고 있고 테스트 되었습니다. - 주의: [Angular 애니메이션에 대한 좋은 포스팅 by Matias Niemelä](http://www.yearofmoo.com/2013/08/remastered-animation-in-angularjs-1-2.html) 여기를 참고하세요. + 주의: [Angular 애니메이션에 대한 좋은 포스팅 by Matias Niemelä](https://www.yearofmoo.com/2013/08/remastered-animation-in-angularjs-1-2.html) 여기를 참고하세요. **[Back to top](#table-of-contents)** @@ -2698,7 +2698,7 @@ Angular 팀의 리더인 Igor Minar 에게 특별히 감사합니다. 이 스타 ### Use an Options File ###### [Style [Y230](#style-y230)] - - JS Hint를 사용하여 JavaScript 코드를 청소하세요. JS Hint 옵션 파일을 수정하고 소스 컨트롤에 추가하세요. 구체적인 옵션은 여기를 참고하세요 [JS Hint docs](http://www.jshint.com/docs/). + - JS Hint를 사용하여 JavaScript 코드를 청소하세요. JS Hint 옵션 파일을 수정하고 소스 컨트롤에 추가하세요. 구체적인 옵션은 여기를 참고하세요 [JS Hint docs](https://jshint.com/docs/). *이유*: 소스 컨트롤에 코드를 전송하기 전에 경고를 받을 수 있습니다. @@ -2947,7 +2947,7 @@ Angular 팀의 리더인 Igor Minar 에게 특별히 감사합니다. 이 스타 - Angular 라이브 템플릿들은 이 스타일과 가이드라인을 따릅니다. - 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) + - Place it in your [templates folder](https://www.jetbrains.com/help/webstorm/project-and-ide-settings.html) - Restart WebStorm - In a JavaScript file type these commands followed by a `TAB`: @@ -3054,7 +3054,7 @@ Angular 팀의 리더인 Igor Minar 에게 특별히 감사합니다. 이 스타 ###### [Style [Y256](#style-y256)] - - [Visual Studio Code](http://code.visualstudio.com) 스니팻은 이 스타일과 가이드라인을 따릅니다. + - [Visual Studio Code](https://code.visualstudio.com/) 스니팻은 이 스타일과 가이드라인을 따릅니다. - 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 @@ -3189,7 +3189,7 @@ Angular 팀의 리더인 Igor Minar 에게 특별히 감사합니다. 이 스타 **[Back to top](#table-of-contents)** ## Task Automation -[Gulp](http://gulpjs.com) 또는 [Grunt](http://gruntjs.com)를 사용하여 자동화 처리를 사용하세요. Gulp는 설정보다는 코드 자체에 무게를 더 주는 반면 Grunt는 설정을 더 중요하게 생각합니다. 개인적으로는 읽고 작성하기가 쉬워서 Gulp를 선호합니다. 하지만 둘다 정말 멋집니다. +[Gulp](https://gulpjs.com) 또는 [Grunt](https://gruntjs.com)를 사용하여 자동화 처리를 사용하세요. Gulp는 설정보다는 코드 자체에 무게를 더 주는 반면 Grunt는 설정을 더 중요하게 생각합니다. 개인적으로는 읽고 작성하기가 쉬워서 Gulp를 선호합니다. 하지만 둘다 정말 멋집니다. > 여기를 참고하여 gulp 자동화 업무 패턴을 배우세요 [Gulp Pluralsight course](http://jpapa.me/gulpps). @@ -3243,7 +3243,7 @@ _tldr; Use this guide. Attributions are appreciated._ ### Copyright -Copyright (c) 2014-2015 [John Papa](http://johnpapa.net) +Copyright (c) 2014-2015 [John Papa](https://johnpapa.net) ### (The MIT License) Permission is hereby granted, free of charge, to any person obtaining diff --git a/a1/i18n/mk-MK.md b/a1/i18n/mk-MK.md index 3ad49ea8..76e5fafc 100644 --- a/a1/i18n/mk-MK.md +++ b/a1/i18n/mk-MK.md @@ -2,7 +2,7 @@ *Своеволен Angular водич на кодирање за тимови од [@john_papa](//twitter.com/john_papa)* -Доколку барате своеволен стил на кодирање за синтакса, конвенции и структурирање на Angular апликации, тогаш сте на правилното место. Овие стилови се базирани на моето искуство во развој на [Angular](//angular.org), презентации, [Pluralsight тренинг курсеви](http://pluralsight.com/training/Authors/Details/john-papa) и работа во тимови. +Доколку барате своеволен стил на кодирање за синтакса, конвенции и структурирање на Angular апликации, тогаш сте на правилното место. Овие стилови се базирани на моето искуство во развој на [Angular](//angular.org), презентации, [Pluralsight тренинг курсеви](https://app.pluralsight.com/profile/author/john-papa) и работа во тимови. Целта на овој водич на кодирање е да овозможи насока во развој на Angular апликации преку конвенциите што јас ги користам, и уште поважно, зошто ги користам. @@ -11,15 +11,15 @@ [![Angular Шаблон: Чист Код](https://raw.githubusercontent.com/johnpapa/angular-styleguide/master/a1/assets/ng-clean-code-banner.png)](http://jpapa.me/ngclean) ## Величествена заедница и заслуга -Никогаш не работи во вакуум. Јас сметам дека Angular заедницата е неверојатна група кои се страсни за споделување искуство. Како резултат, јас и мојот пријател кој е Angular експерт, Todd Motto соработувавме со многу стилови и конвенции. Се согласуваме на повеќето, додека на останатите се разликуваме. Ве охрабрувам да ги погледнете на [Todd's guidelines](https://github.com/toddmotto/angular-styleguide) со цел да добиете осет за неговиот пристап и како се споредува. +Никогаш не работи во вакуум. Јас сметам дека Angular заедницата е неверојатна група кои се страсни за споделување искуство. Како резултат, јас и мојот пријател кој е Angular експерт, Todd Motto соработувавме со многу стилови и конвенции. Се согласуваме на повеќето, додека на останатите се разликуваме. Ве охрабрувам да ги погледнете на [Todd's guidelines](https://github.com/toddmotto/angularjs-styleguide) со цел да добиете осет за неговиот пристап и како се споредува. -Многу од моите водичи произлегоа од многу сесии во програмирање во пар со [Ward Bell](http://twitter.com/wardbell). Mојот пријател Ward секако влијаеше во последната еволуција на овој водич. +Многу од моите водичи произлегоа од многу сесии во програмирање во пар со [Ward Bell](https://twitter.com/wardbell). Mојот пријател Ward секако влијаеше во последната еволуција на овој водич. ## Погледнете ги водичите во пробната апликација Иако овој водич ги објаснува "што", "зошто" и "како", јас сметам дека е полезно да ги запазиме во практика. Овој водич е придружен од пробна апликација која ги следи овие стилови и модели. Можете да ја најдете [пробната апликација (наречена 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) се одржувани од заедницата и можете да ги најдете тука. +[Преводи од овој Angular водич на кодирање](https://github.com/johnpapa/angular-styleguide/tree/master/a1/i18n) се одржувани од заедницата и можете да ги најдете тука. ## Table of contents @@ -285,7 +285,7 @@ ### controllerAs синтакса во Изглед ###### [Style [Y030](#style-Y030)] - - Употреби ја [`controllerAs`](http://www.johnpapa.net/do-you-like-your-angular-controllers-with-or-without-sugar/) синтаксата наместо `класичниот контролер со $scope` синтакса. + - Употреби ја [`controllerAs`](https://johnpapa.net/do-you-like-your-angular-controllers-with-or-without-sugar/) синтаксата наместо `класичниот контролер со $scope` синтакса. *Зошто?*: Контролерите се создаваат, се ажурираат и потоа се пристапуваат преку единствена нова инстанца. `controllerAs` синтаксата е поблиску до JavaScript конструктор наспроти `класичната $scope синтакса`. @@ -315,7 +315,7 @@ *Зошто?*: `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) подобро е да ги преместите во фабрика и да ја повикате неа во контролерот. + *Зошто?*: Ви помага да избегнете употреба на `$scope` методи во контролерот кога е подобро да ги избегнете или преместите во фабрика. `$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) подобро е да ги преместите во фабрика и да ја повикате неа во контролерот. ```javascript /* избегнувајте */ @@ -355,7 +355,7 @@ vm.sendMessage = function() { }; } ``` - Забелешка: Можете да ги избегнете предупредувањата од [jshint](http://www.jshint.com/) со поставување коментар над таа линија код. Но, немате потреба доколку функцијата е именувана со ГолемиБукви, што значи дека е конструктор функција т.е. контролер во Ангулар. + Забелешка: Можете да ги избегнете предупредувањата од [jshint](https://jshint.com/) со поставување коментар над таа линија код. Но, немате потреба доколку функцијата е именувана со ГолемиБукви, што значи дека е конструктор функција т.е. контролер во Ангулар. ```javascript /* jshint validthis: true */ @@ -461,7 +461,7 @@ ### Декларација на функции за да ја скрие имплементацијата ###### [Style [Y034](#style-Y034)] - - Употребу декларации на функции за да ги скриеш нивните имплементации. Нека членовите за поврзување останат горе. Кога треба да поврзеш функција во контролерот, посочи ја кон декларацијата на таа функција која се појавува подоле во датотеката. Ова е директно поврзано со секцијата Поврзување на членови на почеток. За повеќе детали, проверете го [овој пост](http://www.johnpapa.net/angular-function-declarations-function-expressions-and-readable-code). + - Употребу декларации на функции за да ги скриеш нивните имплементации. Нека членовите за поврзување останат горе. Кога треба да поврзеш функција во контролерот, посочи ја кон декларацијата на таа функција која се појавува подоле во датотеката. Ова е директно поврзано со секцијата Поврзување на членови на почеток. За повеќе детали, проверете го [овој пост](https://johnpapa.net/angular-function-declarations-function-expressions-and-readable-code). *Зошто?*: Поставување членови за поврзување на почеток го прави кодот полесен за читање и лесно да забележиме кој член од контролерот може да биде повзан и искористен во Прегледот. (Исто како погоре.) @@ -602,7 +602,7 @@ Забелешка: Доколку Прегледот е вчитан преку други начини наместо рути, тогаш искористете ја `ng-controller="Avengers as vm"` синтаксата. - *Зошто?*: Преку поставување на контролерот во пар во рутата се овозможува други рути да започнат други парови од контролери и прегледи. Кога контролерите се назначени со прегледот со [`ng-controller`](https://docs.angular.org/api/ng/directive/ngController), тогаш тој преглед е секогаш поврзан со истиот контролер. + *Зошто?*: Преку поставување на контролерот во пар во рутата се овозможува други рути да започнат други парови од контролери и прегледи. Кога контролерите се назначени со прегледот со [`ng-controller`](https://docs.angularjs.org/api/ng/directive/ngController), тогаш тој преглед е секогаш поврзан со истиот контролер. ```javascript /* избегнувајте - кога потребна е употреба на рути и динамички пар*/ @@ -658,7 +658,7 @@ ###### [Style [Y040](#style-Y040)] - Сервиси се инстанцирани со `new` зборот, и се употребуваат со `this` за јавни методи и променливи. Бидејќи се слични со фабрики, користете фабрика за конзистентност. - Забелешка: [Сите Angular сервиси се singletons](https://docs.angular.org/guide/services). Тоа значи дека има само една инстанца од сервис за injector. + Забелешка: [Сите Angular сервиси се singletons](https://docs.angularjs.org/guide/services). Тоа значи дека има само една инстанца од сервис за injector. ```javascript // сервис @@ -694,17 +694,17 @@ ### Единствена одговорност ###### [Style [Y050](#style-Y050)] - - Фабрики треба да имаат [единствена одговорност](http://en.wikipedia.org/wiki/Single_responsibility_principle), што е обопштена од својот контекст. Чим фабриката ја надмине единствената цел, тогаш нова фабрика треба да биде создадена. + - Фабрики треба да имаат [единствена одговорност](https://en.wikipedia.org/wiki/Single_responsibility_principle), што е обопштена од својот контекст. Чим фабриката ја надмине единствената цел, тогаш нова фабрика треба да биде создадена. ### Singletons ###### [Style [Y051](#style-Y051)] - Фабрики се singletons и враќаат објект што ги содржини членовите од тој сервис. - Забелешка: [Сите Angular сервиси се singletons](https://docs.angular.org/guide/services). + Забелешка: [Сите Angular сервиси се singletons](https://docs.angularjs.org/guide/services). ### Членовите за пристап на почеток ###### [Style [Y052](#style-Y052)] - - Изложи ги членовите на сервисот кои треба да се повикаат (неговиот интерфејс) на почетокот, користејќи ја техниката [Revealing Module Pattern](http://addyosmani.com/resources/essentialjsdesignpatterns/book/#revealingmodulepatternjavascript). + - Изложи ги членовите на сервисот кои треба да се повикаат (неговиот интерфејс) на почетокот, користејќи ја техниката [Revealing Module Pattern](https://addyosmani.com/resources/essentialjsdesignpatterns/book/#revealingmodulepatternjavascript). *Зошто?*: Поставување на повикувачките членови на почетокот го прави кодот полесен за читање и помага при лесно забележување на кои членови можат да се повикаат и мораат да бидат тестирани (и/или излажани при тестирање). @@ -760,7 +760,7 @@ ### Декларации на функции ја кријат имплементацијата ###### [Style [Y053](#style-Y053)] - - Употребете декларации на функции за да ја сокриете имплементацијата. Нека пристапните членови на фабриката бидат поставени на почеток. Додека имплементацијата на декларациите на функциите биде поставена подоле во датотеката. За повеќе детали, посочете со до [овој пост](http://www.johnpapa.net/angular-function-declarations-function-expressions-and-readable-code). + - Употребете декларации на функции за да ја сокриете имплементацијата. Нека пристапните членови на фабриката бидат поставени на почеток. Додека имплементацијата на декларациите на функциите биде поставена подоле во датотеката. За повеќе детали, посочете со до [овој пост](https://johnpapa.net/angular-function-declarations-function-expressions-and-readable-code). *Зошто?*: Поставување на пристапните членови на почеток е лесно за читање и помага при лесно забележување на кои функции на фабриката можат да се пристапат од надвор. @@ -1074,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.angularjs.org/api/ngAnimate), Angular темплејти, [`ngShow`](https://docs.angularjs.org/api/ng/directive/ngShow) или [`ngHide`](https://docs.angularjs.org/api/ng/directive/ngHide), тогаш употребете ги тие. На пример, ако директивата само се појавува/исчезнува, тогаш употребете ngHide/ngShow. *Зошто?*: Манипулација на DOM е тешка да се тестира, дебагира и притоа постојат подобри начини. (на пример CSS, анимации, темплејти) @@ -1084,7 +1084,7 @@ *Зошто?*: Уникатниот краток префикс ја идентификува смислата на директивата и нејзиното потекло. На пример, префиксот `cc-` може да укажува дека директивата дел од CodeCamper апликацијата додека `acme-` може да укажува дека директивата е за компанијата Acme. - Забелешка: Избегнувајте `ng-` бидејќи тие се резервирани за директивите на Angular. Проучете најчесто употребувани директиви со цел да избегнувате судири со имињата, како `ion-` за [Ionic Framework](http://ionicframework.com/). + Забелешка: Избегнувајте `ng-` бидејќи тие се резервирани за директивите на Angular. Проучете најчесто употребувани директиви со цел да избегнувате судири со имињата, како `ion-` за [Ionic Framework](https://ionicframework.com/). ### Ограничете се на Елементи и Атрибути ###### [Style [Y074](#style-Y074)] @@ -1326,7 +1326,7 @@ - Употребете решавање на патеката кога сакате да ја прекинете патеката пред да преминете на Прегледот. - *Зошто?*: Контролерот може да зависи од податоци пред да се изврши. Овој податок може да дојде преку promise од сопствена фабрика или [$http](https://docs.angular.org/api/ng/service/$http). Со употреба на [route resolve](https://docs.angular.org/api/ngRoute/provider/$routeProvider) ќе овозможиме promise да се реши пред логиката на контролерот да биде извршена, така што може да зависи од акција во податокот. + *Зошто?*: Контролерот може да зависи од податоци пред да се изврши. Овој податок може да дојде преку promise од сопствена фабрика или [$http](https://docs.angularjs.org/api/ng/service/$http). Со употреба на [route resolve](https://docs.angularjs.org/api/ngRoute/provider/$routeProvider) ќе овозможиме promise да се реши пред логиката на контролерот да биде извршена, така што може да зависи од акција во податокот. *Зошто?*: Кодот се извршува после патеката и во activate функцијата во контролерот. Прегледот започнува одма да се вчитува. Поврзување со податоците се вклучува кога ќе се реши promise-от во activate функцијата. "Зафатена" анимација ќе се појави додека преминувате на Прегледот. (со `ng-view` или `ui-view`) @@ -1561,7 +1561,7 @@ ### 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-annotate](//github.com/olov/ng-annotate) за [Gulp](https://gulpjs.com) или [Grunt](https://gruntjs.com) и поставете го коментарот `/** @ngInject */` над функциите кои им се потребни автоматизиран dependency injection. *Зошто?*: Го заштитува вашиот код од загуба на зависности при минификација. @@ -1632,12 +1632,12 @@ } ``` - > Забелешка: Со почеток на Angular 1.3 можете да го употребете параметарот `ngStrictDi` на [`ngApp`](https://docs.angular.org/api/ng/directive/ngApp) директивата да детектирате потенцијални недостатоци при минификација на зависностите. Доколку е достапен, injector-от ќе биде создаден во "strict-di" мод оневозможувајќи ја апликацијата да започне и да ги повика функциите кои не користат експлицитна анотација. (овие не се безбедни од минификација). Со логирање на информациите во конзола од дебагирање ќе ви помогне да ги најдете тие функции. Преферирам да го употребуваме `ng-strict-di` само за дебагирање. + > Забелешка: Со почеток на Angular 1.3 можете да го употребете параметарот `ngStrictDi` на [`ngApp`](https://docs.angularjs.org/api/ng/directive/ngApp) директивата да детектирате потенцијални недостатоци при минификација на зависностите. Доколку е достапен, injector-от ќе биде создаден во "strict-di" мод оневозможувајќи ја апликацијата да започне и да ги повика функциите кои не користат експлицитна анотација. (овие не се безбедни од минификација). Со логирање на информациите во конзола од дебагирање ќе ви помогне да ги најдете тие функции. Преферирам да го употребуваме `ng-strict-di` само за дебагирање. `` ### Употребете 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 */` пред функцијата која има зависности. + - Употребете [gulp-ng-annotate](https://www.npmjs.com/package/gulp-ng-annotate) или [grunt-ng-annotate](https://www.npmjs.com/package/grunt-ng-annotate) во автоматизиран build task. Внесете `/* @ngInject */` пред функцијата која има зависности. *Зошто?*: ng-annotate ќе ги фати повеќето зависности, но понекогаш потребни се навестувања во својата `/* @ngInject */` синтакса. @@ -1670,7 +1670,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) сервисот за да извршите лични акции кога ќе се случи исклучок. + - Употребете [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 не може да ги фати во development-time или run-time. @@ -1740,7 +1740,7 @@ ### Грешки при рутирање ###### [Style [Y112](#style-Y112)] - - Справете се и логирајте сите рутирачки грешки со употреба на [`$routeChangeError`](https://docs.angular.org/api/ngRoute/service/$route#$routeChangeError). + - Справете се и логирајте сите рутирачки грешки со употреба на [`$routeChangeError`](https://docs.angularjs.org/api/ngRoute/service/$route#$routeChangeError). *Зошто?*: Обезбедува постојан начин да се справи со сите рутирачки грешки. @@ -2046,7 +2046,7 @@ ###### [Style [Y150](#style-Y150)] - Имајте блиска и широка визија на вашата имплементација. Со други зборови, започнете со мали компоненти и запазете каде се насочува апликацијата во иднината. Целокупниот код на апликацијата е во корен-папката наречена `app`. Целата содржина е 1 датотека по функција. Секој контролер, сервис, модул, преглед е во своја датотека. Сите 3rd party скрипти поставете ги во друга папка, не во `app` папката. Јас ги немам напишано нив и не би сакал да имам неред во мојата апликација (`bower_components`, `scripts`, `lib`). - Забелешка: Најдете повеќе детали и расудувања за структурата во [овој оригинален пост за структура на апликација](http://www.johnpapa.net/angular-app-structuring-guidelines/). + Забелешка: Најдете повеќе детали и расудувања за структурата во [овој оригинален пост за структура на апликација](https://johnpapa.net/angular-app-structuring-guidelines/). ### Изглед ###### [Style [Y151](#style-Y151)] @@ -2212,7 +2212,7 @@ ### Конфигурација ###### [Style [Y170](#style-Y170)] - - Внесете го кодот во [конфигурацијата на модулот](https://docs.angular.org/guide/module#module-loading-dependencies) што мора да биде извршен пред почетокот на апликацијата. Идеални кандидати се провајдери и константи. + - Внесете го кодот во [конфигурацијата на модулот](https://docs.angularjs.org/guide/module#module-loading-dependencies) што мора да биде извршен пред почетокот на апликацијата. Идеални кандидати се провајдери и константи. *Зошто?*: Имаме помалку места за конфигурација на апликацијата. @@ -2243,7 +2243,7 @@ ### Извршувачки блокови ###### [Style [Y171](#style-Y171)] - - Било каков код што треба да се изврши кога ќе започне апликацијата треба да биде поставен во фабрика, изложен преку функција или вгнезден во [извршувачки блок](https://docs.angular.org/guide/module#module-loading-dependencies). + - Било каков код што треба да се изврши кога ќе започне апликацијата треба да биде поставен во фабрика, изложен преку функција или вгнезден во [извршувачки блок](https://docs.angularjs.org/guide/module#module-loading-dependencies). *Зошто?*: Код во извршувачки блок е тежок за тестирање. Поставување на истиот во фабрика е полесен за абстракција и лажење во тестирање. @@ -2266,13 +2266,13 @@ ### $document и $window ###### [Style [Y180](#style-Y180)] - - Употребете [`$document`](https://docs.angular.org/api/ng/service/$document) и [`$window`](https://docs.angular.org/api/ng/service/$window) наместо `document` и `window`. + - Употребете [`$document`](https://docs.angularjs.org/api/ng/service/$document) и [`$window`](https://docs.angularjs.org/api/ng/service/$window) наместо `document` и `window`. *Зошто?*: Овие сервиси се завиткани од Angular и полесни за тестирање него со употреба на document и window во тестовите. Ова помага да се излажат document и window во самите тестови. ### $timeout и $interval ###### [Style [Y181](#style-Y181)] - - Употребете [`$timeout`](https://docs.angular.org/api/ng/service/$timeout) и [`$interval`](https://docs.angular.org/api/ng/service/$interval) наместо `setTimeout` и `setInterval` . + - Употребете [`$timeout`](https://docs.angularjs.org/api/ng/service/$timeout) и [`$interval`](https://docs.angularjs.org/api/ng/service/$interval) наместо `setTimeout` и `setInterval` . *Зошто?*: Овие сервиси се завиткани од Angular и полесни се за тестирање. Исто така се ракува со Angular digest циклусот што овозможува полесно ажурирање на поврзаните податоци. @@ -2309,11 +2309,11 @@ ### Библиотеки за тестирање ###### [Style [Y191](#style-Y191)] - - Употребете [Jasmine](http://jasmine.github.io/) или [Mocha](http://mochajs.org) за тестирање на единки. + - Употребете [Jasmine](https://jasmine.github.io/) или [Mocha](https://mochajs.org) за тестирање на единки. *Зошто?*: И Jasmine и Mocha се широко употребувани во Angular заедницата. И двете се стабилни, добро одржувани и овозможуваат робустни функции за тестирање. - Забелешка: Кога користите Mocha, исто така не заборавајте да употребите assert библиотека како што е [Chai](http://chaijs.com). Јас преферирам Mocha. + Забелешка: Кога користите Mocha, исто така не заборавајте да употребите assert библиотека како што е [Chai](https://www.chaijs.com). Јас преферирам Mocha. ### Извршувач на тестови ###### [Style [Y192](#style-Y192)] @@ -2323,13 +2323,13 @@ *Зошто?*: 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). + *Зошто?*: Некои IDE почнуваат да го вградуваат Karma во нив, како [WebStorm](http://www.jetbrains.com/webstorm/) и [Visual Studio](https://marketplace.visualstudio.com/items?itemName=DanielFisherlennybacon.KarmaVs). - *Зошто?*: Karma работи добро со автоматизација на задачите кои водечки алатки се [Grunt](http://www.gruntjs.com) (with [grunt-karma](https://github.com/karma-runner/grunt-karma)) или [Gulp](http://www.gulpjs.com) (со [gulp-karma](https://github.com/lazd/gulp-karma)). + *Зошто?*: Karma работи добро со автоматизација на задачите кои водечки алатки се [Grunt](https://gruntjs.com) (with [grunt-karma](https://github.com/karma-runner/grunt-karma)) или [Gulp](https://gulpjs.com) (со [gulp-karma](https://github.com/lazd/gulp-karma)). ### Stubbing и Spying ###### [Style [Y193](#style-Y193)] - - Употребете [Sinon](http://sinonjs.org/) за stubbing и spying. + - Употребете [Sinon](https://sinonjs.org/) за stubbing и spying. *Зошто?*: Sinon работи добро со Jasmine и Mocha и ги проширува нивните stubbing и spying функционалности. @@ -2400,7 +2400,7 @@ ### Употреба ###### [Style [Y210](#style-Y210)] - - Употребете суптилни [анимации со Angular](https://docs.angular.org/guide/animations) да преминете низ состојбите на прегледите и главните визуелни елементи. Вклучете го [ngAnimate модулот](https://docs.angular.org/api/ngAnimate). Трите главни точки се суптилност, глаткост и беспрекорност. + - Употребете суптилни [анимации со Angular](https://docs.angularjs.org/guide/animations) да преминете низ состојбите на прегледите и главните визуелни елементи. Вклучете го [ngAnimate модулот](https://docs.angularjs.org/api/ngAnimate). Трите главни точки се суптилност, глаткост и беспрекорност. *Зошто?*: Суптилни анимации го подобруваат искуството на корисникот кога се употребуваат правилно. @@ -2414,7 +2414,7 @@ ### animate.css ###### [Style [Y212](#style-Y212)] - - Употребете [animate.css](http://daneden.github.io/animate.css/) за конвенционални анимации. + - Употребете [animate.css](https://daneden.github.io/animate.css/) за конвенционални анимации. *Зошто?*: Анимациите на animate.css се први, глатки и лесни да се додадат во вашата апликација. @@ -2422,7 +2422,7 @@ *Зошто?*: animate.css се широко употребувани и тестирани. - Забелешка: Проверете те го [овој одличчен пост од Matias Niemelä за Angular анимации](http://www.yearofmoo.com/2013/08/remastered-animation-in-angular-1-2.html) + Забелешка: Проверете те го [овој одличчен пост од Matias Niemelä за Angular анимации](https://www.yearofmoo.com/2013/08/remastered-animation-in-angularjs-1-2.html) **[Назад кон содржината](#table-of-contents)** @@ -2481,7 +2481,7 @@ ### Употребете датотека на можните опции ###### [Style [Y230](#style-Y230)] - - Употребете JS Hint за проверување на вашиот JavaScript код и не заборавајте да ја измените JS Hint датотеката на можни опции која мора да биде вклучена во вашиот управувач на изворниот код. Погледнете ја [JS Hint документација](http://www.jshint.com/docs/) за детали на можните опции. + - Употребете JS Hint за проверување на вашиот JavaScript код и не заборавајте да ја измените JS Hint датотеката на можни опции која мора да биде вклучена во вашиот управувач на изворниот код. Погледнете ја [JS Hint документација](https://jshint.com/docs/) за детали на можните опции. *Зошто?*: Обезбедува прво предупредување пред да го пратите кодот до управувачот на изворниот код. @@ -2849,7 +2849,7 @@ angular **[Назад кон содржината](#table-of-contents)** ## Task Automation -Употребете [Gulp](http://gulpjs.com) or [Grunt](http://gruntjs.com) за создавање автоматизирани задачи. +Употребете [Gulp](https://gulpjs.com) or [Grunt](https://gruntjs.com) за создавање автоматизирани задачи. > Gulp се потпира на код наместо конфигурација додека Grunt се потпира на конфигурација наместо код. Јас лично преферирам Gulp бидејќи чувствувам е полесно да се пишува и чита, но и двата се одлични. @@ -2905,7 +2905,7 @@ _tldr; Use this guide. Attributions are appreciated._ ### Copyright -Copyright (c) 2014-2015 [John Papa](http://johnpapa.net) +Copyright (c) 2014-2015 [John Papa](https://johnpapa.net) Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the diff --git a/a1/i18n/pt-BR.md b/a1/i18n/pt-BR.md index 2c5d8fb5..246a8500 100644 --- a/a1/i18n/pt-BR.md +++ b/a1/i18n/pt-BR.md @@ -2,7 +2,7 @@ *Guia de Estilo opinativo de Angular para desenvolvedores. Por [@john_papa](//twitter.com/john_papa)* -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 na Pluralsight](https://app.pluralsight.com/profile/author/john-papa) e trabalhando em equipe. @@ -14,7 +14,7 @@ A proposta deste guia de estilo é fornecer uma direção na construção de apl Nunca trabalhe sozinho. Acho que a comunidade Angular é um grupo incrível, apaixonado em compartilhar experiências. Dessa forma, Todd Motto, um amigo e expert em Angular e eu temos colaborado com vários estilos e convenções. Nós concordamos na maioria deles, e discordamos em alguns. Eu encorajo você a conferir o [guia do Todd](https://github.com/toddmotto/angularjs-styleguide) para ter uma noção sobre sua abordagem e como ela se compara a esta. -Vários de meus estilos vieram de várias sessões de pair-programming (programação pareada) que [Ward Bell](http://twitter.com/wardbell) e eu tivemos. Embora não concordemos sempre, meu amigo Ward certamente me ajudou influenciando na última evolução deste guia. +Vários de meus estilos vieram de várias sessões de pair-programming (programação pareada) que [Ward Bell](https://twitter.com/wardbell) e eu tivemos. Embora não concordemos sempre, meu amigo Ward certamente me ajudou influenciando na última evolução deste guia. ## Veja os estilos em um aplicativo de exemplo @@ -291,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`](https://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`. @@ -362,7 +362,7 @@ 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](https://jshint.com/) warnings colocando o comentário abaixo acima da linha de código. ```javascript /* jshint validthis: true */ @@ -430,7 +430,7 @@ ou *Controladores* } ``` - ![Controller Using "Above the Fold"](https://raw.githubusercontent.com/johnpapa/angularjs-styleguide/master/assets/above-the-fold-1.png) + ![Controller Using "Above the Fold"](https://raw.githubusercontent.com/johnpapa/angularjs-styleguide/master/a1/assets/above-the-fold-1.png) Nota: Se a função possuir apenas 1 linha considere mantê-la no topo, desde que a legibilidade não seja afetada. @@ -469,7 +469,7 @@ 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). + - 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](https://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.) @@ -547,7 +547,7 @@ ou *Controladores* **Por que?** A lógica pode ser reutilizada em múltiplos controllers quando colocada em um service e exposta através de uma função. - **Por que?** A lógica em um serviço pode ser mais facilmente isolada em um teste unitário, enquanto a lógica feita no controlador pode ser facilmente [mockada](http://www.thoughtworks.com/pt/insights/blog/mockists-are-dead-long-live-classicists). + **Por que?** A lógica em um serviço pode ser mais facilmente isolada em um teste unitário, enquanto a lógica feita no controlador pode ser facilmente [mockada](https://www.thoughtworks.com/pt/insights/blog/mockists-are-dead-long-live-classicists). **Por que?** Remove as dependências e esconde os detalhes de implementação do controlador. @@ -688,7 +688,7 @@ ou *Fábricas* ### Single Responsibility ou *Responsabilidade Única* - - Factories devem ter [responsabilidade única](http://en.wikipedia.org/wiki/Single_responsibility_principle), que é encapsulado pelo seu contexto. Assim que uma factory começa a exceder a proposta de singularidade, uma nova factory deve ser criada. + - Factories devem ter [responsabilidade única](https://en.wikipedia.org/wiki/Single_responsibility_principle), que é encapsulado pelo seu contexto. Assim que uma factory começa a exceder a proposta de singularidade, uma nova factory deve ser criada. ### Singletons @@ -699,7 +699,7 @@ ou *Responsabilidade Única* ### 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](https://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). @@ -751,12 +751,12 @@ ou *Membros acessíveis no topo* Dessa forma, os bindings são espelhados através do objeto da interface da factory e os valores primitivos não podem ser atualizados sozinhos utilizando o revealing module pattern - ![Factories Using "Above the Fold"](https://raw.githubusercontent.com/johnpapa/angularjs-styleguide/master/assets/above-the-fold-2.png) + ![Factories Using "Above the Fold"](https://raw.githubusercontent.com/johnpapa/angularjs-styleguide/master/a1/assets/above-the-fold-2.png) ### Function Declarations to Hide Implementation Details ou *Declarações de função para esconder detalhes de implementação* - - Use function declarations (declarações de função) para esconder detalhes de implementação. Mantenha os membros acessíveis da factory no topo. Aponte as function declarations que aparecem posteriormente no arquivo. Para mais detalhes leia [esse post](http://www.johnpapa.net/angular-function-declarations-function-expressions-and-readable-code). + - Use function declarations (declarações de função) para esconder detalhes de implementação. Mantenha os membros acessíveis da factory no topo. Aponte as function declarations que aparecem posteriormente no arquivo. Para mais detalhes leia [esse post](https://johnpapa.net/angular-function-declarations-function-expressions-and-readable-code). **Por que?** Colocando os membros acessíveis no topo, a leitura torna-se mais fácil e ajuda a identificar imediatamente quais membros da factory podem ser acessados externamente. @@ -1088,7 +1088,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. 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](https://ionicframework.com/). ### Restrict to Elements and Attributes ou *Restringir para elementos e atributos* @@ -1459,7 +1459,7 @@ 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 */` + - Use [ng-annotate](//github.com/olov/ng-annotate) para [Gulp](https://gulpjs.com) ou [Grunt](https://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. @@ -1535,7 +1535,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. + - Utilize [gulp-ng-annotate](https://www.npmjs.com/package/gulp-ng-annotate) ou [grunt-ng-annotate](https://www.npmjs.com/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 */` . @@ -1967,7 +1967,7 @@ ou *Orientações gerais* - 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. Todo o código do aplicativo vai 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 fui eu quem escreveu esses scripts, então eu não quero que eles baguncem meu aplicativo (`bower_components`,` scripts`, `lib`). - 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/). + Nota: Encontre mais detalhes sobre essa estrutura em [esse post original sobre a estrutura da aplicação](https://johnpapa.net/angular-app-structuring-guidelines/). ### Layout @@ -2026,7 +2026,7 @@ ou *Estrutura de Pastas-por-Recurso* session-detail.controller.js ``` - ![Exemplo de estrutura na aplicação](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/a1/assets/modularity-2.png) 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. @@ -2183,11 +2183,11 @@ Testes unitários ajudam a manter o código limpo, tal como, eu inclui algumas r ### Frameworks para Testes - - Para teste unitários use [Jasmine](http://jasmine.github.io/) ou [Mocha](http://visionmedia.github.io/mocha/). + - Para teste unitários use [Jasmine](https://jasmine.github.io/) ou [Mocha](https://mochajs.org/). **Por que?** Ambos, Jasmine e Mocha são amplamente utilizados na comunidade AngularJS. Ambos são estáveis, são mantidos e provém features de teste robustas. - Nota: Se escolher Mocha, também considere a escolha de uma Assert Library como [Chai](http://chaijs.com). + Nota: Se escolher Mocha, também considere a escolha de uma Assert Library como [Chai](https://www.chaijs.com). ### Test Runner @@ -2197,9 +2197,9 @@ Testes unitários ajudam a manter o código limpo, tal como, eu inclui algumas r **Por que?** Karma se integra facilmente com seu processo de Integração Contínua ou através do Grunt ou Gulp. - **Por que?** Algumas IDE's estão começando a se integrar com o Karma, como [WebStorm](http://www.jetbrains.com/webstorm/) e [Visual Studio](http://visualstudiogallery.msdn.microsoft.com/02f47876-0e7a-4f6c-93f8-1af5d5189225). + **Por que?** Algumas IDE's estão começando a se integrar com o Karma, como [WebStorm](http://www.jetbrains.com/webstorm/) e [Visual Studio](https://marketplace.visualstudio.com/items?itemName=DanielFisherlennybacon.KarmaVs). - **Por que?** Karma funciona muito bem com os líderes de automação de tarefas, como [Grunt](http://www.gruntjs.com) (com [grunt-karma](https://github.com/karma-runner/grunt-karma)) e [Gulp](http://www.gulpjs.com) (com [gulp-karma](https://github.com/lazd/gulp-karma)). + **Por que?** Karma funciona muito bem com os líderes de automação de tarefas, como [Grunt](https://gruntjs.com) (com [grunt-karma](https://github.com/karma-runner/grunt-karma)) e [Gulp](https://gulpjs.com) (com [gulp-karma](https://github.com/lazd/gulp-karma)). ### Stubbing e Spying @@ -2233,7 +2233,7 @@ Testes unitários ajudam a manter o código limpo, tal como, eu inclui algumas r /* global sinon, describe, it, afterEach, beforeEach, expect, inject */ ``` - ![Testing Tools](https://raw.githubusercontent.com/johnpapa/angularjs-styleguide/master/assets/testing-tools.png) + ![Testing Tools](https://raw.githubusercontent.com/johnpapa/angularjs-styleguide/master/a1/assets/testing-tools.png) **[De volta ao topo](#tabela-de-conte%C3%BAdo)** @@ -2256,7 +2256,7 @@ ou *Animações* ### animate.css - - Use [animate.css](http://daneden.github.io/animate.css/) para animações convencionais. + - Use [animate.css](https://daneden.github.io/animate.css/) para animações convencionais. **Por que?** As animações fornecidas por animate.css são rápidas, suaves e fáceis de adicionar à sua aplicação. @@ -2264,7 +2264,7 @@ ou *Animações* **Por que?** animate.css amplamente utilizado e testado. - Nota: Leia este [excelente post do Matias Niemelä sobre Angular Animations](http://www.yearofmoo.com/2013/08/remastered-animation-in-angularjs-1-2.html) + Nota: Leia este [excelente post do Matias Niemelä sobre Angular Animations](https://www.yearofmoo.com/2013/08/remastered-animation-in-angularjs-1-2.html) **[De volta ao topo](#tabela-de-conte%C3%BAdo)** @@ -2324,7 +2324,7 @@ ou *Comentários* ### Use um arquivo de Options - - Use JS Hint para inspecionar seu JavaScript e não se esqueça de customizar o arquivo de configurações e versioná-lo no controle de versão. Veja [JS Hint docs](http://www.jshint.com/docs/) para detalhes a respeito das opções. + - Use JS Hint para inspecionar seu JavaScript e não se esqueça de customizar o arquivo de configurações e versioná-lo no controle de versão. Veja [JS Hint docs](https://jshint.com/docs/) para detalhes a respeito das opções. **Por que?** Fornece um primeiro alerta antes de commitar qualquer código ao controle de versão. @@ -2491,7 +2491,7 @@ _tldr; Use este guia. Atribuições(menções) são apreciadas._ ### (The MIT License) -Copyright (c) 2014 [John Papa](http://johnpapa.net) +Copyright (c) 2014 [John Papa](https://johnpapa.net) Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the diff --git a/a1/i18n/ro-RO.md b/a1/i18n/ro-RO.md index 1d6518d5..15e07544 100644 --- a/a1/i18n/ro-RO.md +++ b/a1/i18n/ro-RO.md @@ -6,7 +6,7 @@ Mulțumiri speciale lui Igor Minar, liderul echipei Angular, pentru revizuire, d ## Scop *Ghid stilistic dogmatic de Angular pentru echipe de [@john_papa](//twitter.com/john_papa)* -Dacă cauți un ghid stilistic dogmatic pentru sintaxă, convenții și structurarea aplicațiilor Angular, pornește de aici. Aceste stiluri sunt bazate pe experiența mea de dezvoltare cu [Angular](//angularjs.org), prezentări, [cursuri de training Pluralsight](http://app.pluralsight.com/author/john-papa) și lucrul în echipe. +Dacă cauți un ghid stilistic dogmatic pentru sintaxă, convenții și structurarea aplicațiilor Angular, pornește de aici. Aceste stiluri sunt bazate pe experiența mea de dezvoltare cu [Angular](//angularjs.org), prezentări, [cursuri de training Pluralsight](https://app.pluralsight.com/profile/author/john-papa) și lucrul în echipe. Scopul acestui ghid stilistic este acela de a oferi îndrumare pentru creerea de aplicații Angular prin expunereea convențiilor pe care le folosesc și, mai important, motivelor pentru care le-am ales. @@ -15,7 +15,7 @@ Scopul acestui ghid stilistic este acela de a oferi îndrumare pentru creerea de [![Angular Patterns: Clean Code](https://raw.githubusercontent.com/johnpapa/angular-styleguide/master/a1/assets/ng-clean-code-banner.png)](http://jpapa.me/ngclean) ## Minunăția Comunității și Acreditare -Nu lucra niciodată într-un vid. Observ că comunitatea Angular este un grup incredibil care este pasionat de împărtășirea experiențelor. Din motivul acesta, expertul Angular Todd Motto și eu am colaborat la multe stiluri și convenții. Suntem de-acord la multe dintre ele, iar la unele nu. Te încurajez să vezi [Ghidurile lui Todd](https://github.com/toddmotto/angular-styleguide) ca să-ți faci o părere despre abordarea lui și cum diferă de acesta. +Nu lucra niciodată într-un vid. Observ că comunitatea Angular este un grup incredibil care este pasionat de împărtășirea experiențelor. Din motivul acesta, expertul Angular Todd Motto și eu am colaborat la multe stiluri și convenții. Suntem de-acord la multe dintre ele, iar la unele nu. Te încurajez să vezi [Ghidurile lui Todd](https://github.com/toddmotto/angularjs-styleguide) ca să-ți faci o părere despre abordarea lui și cum diferă de acesta. Multe dintre stilurile mele sunt din multitudinea de sesiuni de pair programming pe care eu și [Ward Bell](https://twitter.com/wardbell) le-am făcut. Prietenul meu Ward a influențat cu siguranță evoluția finală a acestui ghid. @@ -326,7 +326,7 @@ Chiar dacă acest ghid explică *ce*, *de ce* și *cum*, mi se pare folositor ca ### Sintaxa pentru View 'controllerAs' ###### [Style [Y030](#style-y030)] - - Folosește sintaxa [`controllerAs`](http://www.johnpapa.net/do-you-like-your-angular-controllers-with-or-without-sugar/) în locul `classicei sintaxe pentru controller cu $scope`. + - Folosește sintaxa [`controllerAs`](https://johnpapa.net/do-you-like-your-angular-controllers-with-or-without-sugar/) în locul `classicei sintaxe pentru controller cu $scope`. *De ce?*: Controllerele sunt construite, "reînnoite" și oferă o singură nouă instanță, iar sintaxa `controllerAs` e mult mai aproape de cea a unui constructor de JavaScript decât cea a `clasicei sintaxe cu $scope`. @@ -398,7 +398,7 @@ Chiar dacă acest ghid explică *ce*, *de ce* și *cum*, mi se pare folositor ca } ``` - Notă: Poți evita avertizările [jshint](http://jshint.com/) prin lăsarea unui comentariu deasupra liniei de cod. Totuși, acest lucru nu e necesar atunci când funcția e denumită folosind UpperCasing, deoarece această convenție înseamnă că este o funcție-constructor, ceea ce și este un controller în Angular. + Notă: Poți evita avertizările [jshint](https://jshint.com/) prin lăsarea unui comentariu deasupra liniei de cod. Totuși, acest lucru nu e necesar atunci când funcția e denumită folosind UpperCasing, deoarece această convenție înseamnă că este o funcție-constructor, ceea ce și este un controller în Angular. ```javascript /* jshint validthis: true */ @@ -531,7 +531,7 @@ Chiar dacă acest ghid explică *ce*, *de ce* și *cum*, mi se pare folositor ca ### Declarări de funcții pentru ascunderea detaliilor de implementare ###### [Style [Y034](#style-y034)] - - Folosește declarări de funcții pentru a ascunde detaliile implementării. Păstrează-ți membrii bindabili sus. Când ai nevoie de o funcție într-un controller, pointeaz-o la o declarație de funcție ce apare mai târziu în fișier. Acest lucru e direct legat de secțiunea "Membrii Bindabili Sus". Pentru mai multe detalii vezi [acest articol](http://www.johnpapa.net/angular-function-declarations-function-expressions-and-readable-code/). + - Folosește declarări de funcții pentru a ascunde detaliile implementării. Păstrează-ți membrii bindabili sus. Când ai nevoie de o funcție într-un controller, pointeaz-o la o declarație de funcție ce apare mai târziu în fișier. Acest lucru e direct legat de secțiunea "Membrii Bindabili Sus". Pentru mai multe detalii vezi [acest articol](https://johnpapa.net/angular-function-declarations-function-expressions-and-readable-code/). *De ce?*: Punerea membriilor bindabili sus face mai ușoară citirea și ajută să identifici instant ce membri ai controllerului pot fi folosiți în View. (La fel ca mai sus.) @@ -840,7 +840,7 @@ Chiar dacă acest ghid explică *ce*, *de ce* și *cum*, mi se pare folositor ca ### Declarații de funcții pentru ascunderea detaliilor de implementare ###### [Style [Y053](#style-y053)] - - Folosește declarații de funcții pentru ascunderea detaliilor de implementare. Păstrează membrii accesibili ai factory-ului sus. Pointează-i spre declarații de funcții care apar mai târziu în fișier. Pentru mai multe detalii vezi [acest articol](http://www.johnpapa.net/angular-function-declarations-function-expressions-and-readable-code). + - Folosește declarații de funcții pentru ascunderea detaliilor de implementare. Păstrează membrii accesibili ai factory-ului sus. Pointează-i spre declarații de funcții care apar mai târziu în fișier. Pentru mai multe detalii vezi [acest articol](https://johnpapa.net/angular-function-declarations-function-expressions-and-readable-code). *De ce?*: Plasarea membriilor accesibili sus face mai totul mai lizibil și te-ajută să identifici instant ce funcții ale factory-ului se pot accesa în exterior. @@ -1170,7 +1170,7 @@ Chiar dacă acest ghid explică *ce*, *de ce* și *cum*, mi se pare folositor ca *De ce?*: Prefixul scurt și unic identifică contextul și originea directivei. De exemplu, un prefix ca `cc-` ar putea indica că directiva face parte dintr-o aplicație CodeCamper, iar `acme-` ar putea indica o directivă pentru compania Acme. - Notă: Evită `ng-`, deoarece acestea sunt rezervate pentru directivele Angular. Află mai multe despre directivele populare pentru a evita conflictele de nume, precum `ion-` pentru [Framework-ul Ionic](http://ionicframework.com/). + Notă: Evită `ng-`, deoarece acestea sunt rezervate pentru directivele Angular. Află mai multe despre directivele populare pentru a evita conflictele de nume, precum `ion-` pentru [Framework-ul Ionic](https://ionicframework.com/). ### Rămâi la Elemente și Atribute ###### [Style [Y074](#style-y074)] @@ -1717,7 +1717,7 @@ Chiar dacă acest ghid explică *ce*, *de ce* și *cum*, mi se pare folositor ca ### ng-annotate ###### [Style [Y100](#style-y100)] - - Folosește [ng-annotate](//github.com/olov/ng-annotate) pentru [Gulp](http://gulpjs.com) sau [Grunt](http://gruntjs.com) și comentează funcțiile ce au nevoie de injectare automată de dependințe folosind `/* @ngInject */` + - Folosește [ng-annotate](//github.com/olov/ng-annotate) pentru [Gulp](https://gulpjs.com) sau [Grunt](https://gruntjs.com) și comentează funcțiile ce au nevoie de injectare automată de dependințe folosind `/* @ngInject */` *De ce?*: Acest lucru îți asigură codul împotriva dependințelor ce ar putea să nu folosească metode sigure pentru minificare. *De ce?*: [`ng-min`](https://github.com/btford/ngmin) e depreciat. @@ -2249,7 +2249,7 @@ Chiar dacă acest ghid explică *ce*, *de ce* și *cum*, mi se pare folositor ca - Să ai o viziune rapidă de implementare și o viziune largă, de lungă durată. Cu alte cuvinte, începe mic dar ține minte încotro se îndreaptă aplicația. Tot codul aplicației merge într-un folder-rădăcină numit `app`. Tot conținutul e o funcționalitate per fișier. Fiecare controller, serviciu, modul, view e în fișierul său separat. Toate scripturile 3rd party sunt stocate în alt folder și nu în folder-ul `app`. Nu le-am scris eu și nu vreau ca ele să-mi aglomereze aplicația (`bower_components`, `scripts`, `lib`). - Notă: Găsește mai multe detalii și raționarea din spatele structuri în [acest articol original despre structura aplicației](http://www.johnpapa.net/angular-app-structuring-guidelines/). + Notă: Găsește mai multe detalii și raționarea din spatele structuri în [acest articol original despre structura aplicației](https://johnpapa.net/angular-app-structuring-guidelines/). ### Plan General ###### [Style [Y151](#style-y151)] @@ -2526,11 +2526,11 @@ Unit testurile ajută la menținerea curățeniei codului, iar din acest motiv a ### Biblioteca de Testare ###### [Style [Y191](#style-y191)] - - Folosește [Jasmine](http://jasmine.github.io/) sau [Mocha](http://mochajs.org) pentru unit testing. + - Folosește [Jasmine](https://jasmine.github.io/) sau [Mocha](https://mochajs.org) pentru unit testing. *De ce?*: Atât Jasmine cât și Mocha sunt frecvent folosite de către comunitatea Angular. Ambele sunt stabile, întreținute bine, și furnizează funcționalități robuste de testare. - Notă: Când folosești Mocha, ia în calcul de asemenea folosirea unei biblioteci de assert precum [Chai](http://chaijs.com). Eu prefer Mocha. + Notă: Când folosești Mocha, ia în calcul de asemenea folosirea unei biblioteci de assert precum [Chai](https://www.chaijs.com). Eu prefer Mocha. ### Rularea Testelor ###### [Style [Y192](#style-y192)] @@ -2541,9 +2541,9 @@ Unit testurile ajută la menținerea curățeniei codului, iar din acest motiv a *De ce?*: Karma se leagă de procesul tău de Continuous Integration ușor pe cont propriu sau prin intermediul Grunt sau Gulp. - *De ce?*: unele IDE-uri încep să se integreze cu Karma, precum [WebStorm](http://www.jetbrains.com/webstorm/) și [Visual Studio](https://visualstudiogallery.msdn.microsoft.com/02f47876-0e7a-4f6c-93f8-1af5d5189225). + *De ce?*: unele IDE-uri încep să se integreze cu Karma, precum [WebStorm](http://www.jetbrains.com/webstorm/) și [Visual Studio](https://marketplace.visualstudio.com/items?itemName=DanielFisherlennybacon.KarmaVs). - *De ce?*: Karma funcționează bine cu leaderii de automatizare de taskuri precum [Grunt](http://gruntjs.com/) (cu [grunt-karma](https://github.com/karma-runner/grunt-karma)) și [Gulp](http://gulpjs.com/). Când folosești Gulp, folosește [Karma](https://github.com/karma-runner/karma) direct și nu un API, de vreme ce API-ul poate fi apelat direct. + *De ce?*: Karma funcționează bine cu leaderii de automatizare de taskuri precum [Grunt](https://gruntjs.com/) (cu [grunt-karma](https://github.com/karma-runner/grunt-karma)) și [Gulp](https://gulpjs.com/). Când folosești Gulp, folosește [Karma](https://github.com/karma-runner/karma) direct și nu un API, de vreme ce API-ul poate fi apelat direct. ```javascript /* recomandat */ @@ -2597,7 +2597,7 @@ Unit testurile ajută la menținerea curățeniei codului, iar din acest motiv a ### Stubbing-ul și Spionarea ###### [Style [Y193](#style-y193)] - - Folosește [Sinon](http://sinonjs.org/) pentru stubbing și spionare. + - Folosește [Sinon](https://sinonjs.org/) pentru stubbing și spionare. *De ce?*: Sinon funcționează bine atât cu Jasmine cât și cu Mocha și extinde caracteristicile de stubbing și spionare pe care acestea le oferă. @@ -2690,7 +2690,7 @@ Unit testurile ajută la menținerea curățeniei codului, iar din acest motiv a ### animate.css ###### [Style [Y212](#style-y212)] - - Folosește [animate.css](http://daneden.github.io/animate.css/) pentru animații convenționale. + - Folosește [animate.css](https://daneden.github.io/animate.css/) pentru animații convenționale. *De ce?*: Animațiile pe care animate.css le oferă sunt rapide, fluide și foarte ușoare de adăugat în aplicație. @@ -2698,7 +2698,7 @@ Unit testurile ajută la menținerea curățeniei codului, iar din acest motiv a *De ce?*: animate.css e folosit și testat în mod larg. - Notă: Vezi [acest articol foarte bun al lui Matias Niemelä despre animațiile Angular](http://www.yearofmoo.com/2013/08/remastered-animation-in-angularjs-1-2.html) + Notă: Vezi [acest articol foarte bun al lui Matias Niemelä despre animațiile Angular](https://www.yearofmoo.com/2013/08/remastered-animation-in-angularjs-1-2.html) **[Înapoi sus](#table-of-contents)** @@ -2759,7 +2759,7 @@ Unit testurile ajută la menținerea curățeniei codului, iar din acest motiv a ### Folosește un fișier de opțiuni ###### [Style [Y230](#style-y230)] - - Folosește JS Hint pentru linting-ul codului tău JavaScript și asigură-te că personalizezi fișierul JS hint de opțiuni și îl incluzi în source control. Vezi [documentația JS Hint](http://jshint.com/docs/) pentru detalii despre opțiuni. + - Folosește JS Hint pentru linting-ul codului tău JavaScript și asigură-te că personalizezi fișierul JS hint de opțiuni și îl incluzi în source control. Vezi [documentația JS Hint](https://jshint.com/docs/) pentru detalii despre opțiuni. *De ce?*: Furnizează o primă alertă înaintea comiterii codului în source control. @@ -3008,7 +3008,7 @@ Folosește șabloane de fișier sau snippeturi pentru a ajuta urmarea de stiluri - Live Template-uri Angular ce urmează aceste stiluri și ghiduri. - Descarcă [webstorm-angular-live-templates.xml](assets/webstorm-angular-live-templates/webstorm-angular-live-templates.xml?raw=true) - - Pune-l în fișierul tău de [template-uri](https://www.jetbrains.com/webstorm/help/project-and-ide-settings.html) + - Pune-l în fișierul tău de [template-uri](https://www.jetbrains.com/help/webstorm/project-and-ide-settings.html) - Restartează WebStorm - Într-un fișier JavaScript scrie aceste comenzi urmate de un `TAB`: @@ -3138,7 +3138,7 @@ Folosește șabloane de fișier sau snippeturi pentru a ajuta urmarea de stiluri Yyasnippet categorizează snippet-urile prin mod-ul major, și sunt mai multe moduri major pentru Emacs pentru editarea codului JavaScript. Snippet-urile sunt în `js2-mode`, și celelalte directoare conțin doar un dotfile ce le referențiază de acolo. - - Instalează [yasnippet](https://github.com/capitaomorte/yasnippet) (`M-x package-install RET yasnippet RET`) + - Instalează [yasnippet](https://github.com/joaotavora/yasnippet) (`M-x package-install RET yasnippet RET`) - Copiază snippet-urile în folder-ul de snippeturi, sau modifică init-ul Emacs init ca să adaugi directorul de snippeturi la `yas-snippet-dirs` ```javascript @@ -3272,7 +3272,7 @@ Rutarea pe partea de client e importantă pentru creerea unui flow de navigație **[Înapoi sus](#table-of-contents)** ## Automatizarea Task-urilor -Folosește [Gulp](http://gulpjs.com) sau [Grunt](http://gruntjs.com) pentru creerea de task-uri automate. Gulp tinde spre cod în locul configurării, în timp ce Grunt tinde spre configurare în locul codului. Eu personal prefer Gulp, fiindcă consider că e mai ușor de scris și citit, dar amândouă sunt excelente. +Folosește [Gulp](https://gulpjs.com) sau [Grunt](https://gruntjs.com) pentru creerea de task-uri automate. Gulp tinde spre cod în locul configurării, în timp ce Grunt tinde spre configurare în locul codului. Eu personal prefer Gulp, fiindcă consider că e mai ușor de scris și citit, dar amândouă sunt excelente. > Află mai multe despre gulp și șabloane pentru automatizarea task-urilor în [cursul meu Gulp de pe Pluralsight](http://jpapa.me/gulpps) diff --git a/a1/i18n/ru-RU.md b/a1/i18n/ru-RU.md index f007a796..e268b422 100644 --- a/a1/i18n/ru-RU.md +++ b/a1/i18n/ru-RU.md @@ -2,7 +2,7 @@ *Angular соглашения по стилям для команд разработчиков, предложенные [@john_papa](//twitter.com/john_papa)* -Если вам нужны стандарты написания кода, соглашения и руководства структурирования приложений AngularJS, то вы находитесь в правильном месте. Эти соглашения основаны на моем опыте программирования на [AngularJS](//angularjs.org), на моих презентациях [Pluralsight training courses](http://pluralsight.com/training/Authors/Details/john-papa), а также на совместной работе в командах разработчиков. +Если вам нужны стандарты написания кода, соглашения и руководства структурирования приложений AngularJS, то вы находитесь в правильном месте. Эти соглашения основаны на моем опыте программирования на [AngularJS](//angularjs.org), на моих презентациях [Pluralsight training courses](https://app.pluralsight.com/profile/author/john-papa), а также на совместной работе в командах разработчиков. Главной целью этого документа является желание предоставить вам наиболее полные инструкции для построения приложений AngularJS. Рекомендуя данные соглашения, я стараюсь акцентировать ваше внимание на цели и причины, зачем их нужно придерживаться. @@ -13,13 +13,13 @@ ## Признательность сообществу и коллегам Никогда не работайте в вакууме. Я считаю AngularJS-сообщество невероятно открытым, которое активно обменивается опытом и заботится об этом. Также как и мой друг Todd Motto (отличный Angular эксперт), я работал со многими стилями и соглашениями. Мы с ним сходимся во многом, но иногда и противоречим друг другу. Я предлагаю вам ознакомиться с курсом [Todd's guidelines](https://github.com/toddmotto/angularjs-styleguide) дабы почувствовать разницу подходов. -Многие из моих стилей взяты в ходе моих программистских сессий с [Ward Bell](http://twitter.com/wardbell). А так как мы не всегда были согласны друг с другом, то мой друг Ward оказал очень сильное влияние на эволюцию и окончательную редакцию этого документа. +Многие из моих стилей взяты в ходе моих программистских сессий с [Ward Bell](https://twitter.com/wardbell). А так как мы не всегда были согласны друг с другом, то мой друг Ward оказал очень сильное влияние на эволюцию и окончательную редакцию этого документа. ## Смотрите стили и шаблоны в приложении-примере Пока данное руководство объясняет *что*, *почему* и *как*, я сразу же показываю, как это работает на практике. Все, что я предлагаю и описываю сопровождается примером-приложения, которое соблюдает и демонстрирует приведенные стили и шаблоны. Вы можете найти [пример приложения (имя 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) поддерживаются соообществом разработчиков и могут быть найдены здесь. +[Переводы данного руководства по Angular-стилям](https://github.com/johnpapa/angular-styleguide/tree/master/a1/i18n) поддерживаются соообществом разработчиков и могут быть найдены здесь. ## Table of Contents @@ -289,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`](https://johnpapa.net/do-you-like-your-angular-controllers-with-or-without-sugar/), который работает поверх синтаксиса `классический контроллер со $scope`. *Почему?*: Контроллер создается, как JavaScript-объект с ключевым словом "new" и затем предоставляется этот единственный экземпляр объекта. То есть синтаксис `controllerAs` намного ближе и похоже на конструктор языка JavaScript, чем `классический синтаксис $scope`. @@ -362,7 +362,7 @@ } ``` - Замечание: Вы можете избежать любые [jshint](http://www.jshint.com/) предупреждения, если разместите над строкой кода комментарий, как в приведенном ниже примере. Это не требуется, если функция названа с помощью ВерхнегоРегистра(UpperCasing), так как согласно этой конвенциии, это означает, что функция является конструктором контроллера Angular. + Замечание: Вы можете избежать любые [jshint](https://jshint.com/) предупреждения, если разместите над строкой кода комментарий, как в приведенном ниже примере. Это не требуется, если функция названа с помощью ВерхнегоРегистра(UpperCasing), так как согласно этой конвенциии, это означает, что функция является конструктором контроллера Angular. ```javascript /* jshint validthis: true */ @@ -479,7 +479,7 @@ ### Определения Функций Для Скрытия Деталей Реализации ###### [Style [Y034](#style-y034)] - - Используйте определения функций для скрытия деталей реализации. Держите свои привязываемые члены наверху. Если нужно в контроллере сделать функцию привязываемой, укажите это в группе привязываемых членов и ссылайтесь на данную функцию, которая реализована ниже. Это подробно описано в секции Привязываемые Члены Сверху. Подробнее смотрите [здесь](http://www.johnpapa.net/angular-function-declarations-function-expressions-and-readable-code). + - Используйте определения функций для скрытия деталей реализации. Держите свои привязываемые члены наверху. Если нужно в контроллере сделать функцию привязываемой, укажите это в группе привязываемых членов и ссылайтесь на данную функцию, которая реализована ниже. Это подробно описано в секции Привязываемые Члены Сверху. Подробнее смотрите [здесь](https://johnpapa.net/angular-function-declarations-function-expressions-and-readable-code). *Почему?*: Размещение привязываемых членов наверху делает код читабельнее, и позволяет мгновенно определить, какие члены привязаны и используются в представлении. (Выше описано тоже самое.) @@ -717,7 +717,7 @@ ### Единственная Обязанность (Single Responsibility) ###### [Style [Y050](#style-y050)] - - Фабрики должны иметь [единственную обязанность](http://en.wikipedia.org/wiki/Single_responsibility_principle), это следует из их контекста. Если фабрика начинает превышать ту цель для которой она создана, то нужно создать другую фабрику. + - Фабрики должны иметь [единственную обязанность](https://en.wikipedia.org/wiki/Single_responsibility_principle), это следует из их контекста. Если фабрика начинает превышать ту цель для которой она создана, то нужно создать другую фабрику. ### Синглтон ###### [Style [Y051](#style-y051)] @@ -729,7 +729,7 @@ ### Доступные Члены Наверх ###### [Style [Y052](#style-y052)] - - Помещайте вызываемые члены сервиса (интерфейс) наверху, используя технику [Revealing Module Pattern](http://addyosmani.com/resources/essentialjsdesignpatterns/book/#revealingmodulepatternjavascript). + - Помещайте вызываемые члены сервиса (интерфейс) наверху, используя технику [Revealing Module Pattern](https://addyosmani.com/resources/essentialjsdesignpatterns/book/#revealingmodulepatternjavascript). *Почему?*: Размещение вызываемых членов в верхней части улучшает читабельность и дает вам возможность быстро определить, какие члены сервиса могут быть вызваны и должны быть модульно оттестированы (либо фиктивно имплементированы - mocked). @@ -786,7 +786,7 @@ ### Определения Функций для Скрытия Деталей Реализации ###### [Style [Y053](#style-y053)] - - Используйте определения функций, чтобы скрыть детали реализации. Держите вызываемые члены фабрики в верхней части. Свяжите их с определениями функций, которые расположены ниже в файле. Подробную информацию смотрите [здесь](http://www.johnpapa.net/angular-function-declarations-function-expressions-and-readable-code). + - Используйте определения функций, чтобы скрыть детали реализации. Держите вызываемые члены фабрики в верхней части. Свяжите их с определениями функций, которые расположены ниже в файле. Подробную информацию смотрите [здесь](https://johnpapa.net/angular-function-declarations-function-expressions-and-readable-code). *Почему?*: Размещение вызываемых членов в верхней части улучшает читабельность и помогает быстро определить, какие функции фабрики могут быть вызваны извне. @@ -1114,7 +1114,7 @@ *Почему?*: Уникальный короткий префикс говорит о контексте и происхождении директивы. Например, префикс `cc-` может рассказать нам, что директива является частью приложения CodeCamper, а `acme-` это директива для компании Acme. - Замечание: Не используйте префикс `ng-` для своих директив, так как он зарезервирован для директив AngularJS. Также исследуйте префиксы широко используемых директив для избежания конфликтов имен, например, префикс `ion-` используется для директив [Ionic Framework](http://ionicframework.com/). + Замечание: Не используйте префикс `ng-` для своих директив, так как он зарезервирован для директив AngularJS. Также исследуйте префиксы широко используемых директив для избежания конфликтов имен, например, префикс `ion-` используется для директив [Ionic Framework](https://ionicframework.com/). ### Ограничивайте Элементы и Атрибуты ###### [Style [Y074](#style-y074)] @@ -1532,7 +1532,7 @@ ### ng-annotate ###### [Style [Y100](#style-y100)] - - Используйте [ng-annotate](//github.com/olov/ng-annotate) для [Gulp](http://gulpjs.com) или [Grunt](http://gruntjs.com) и комментируйте функции, которые нуждаются в автоматической вставке зависимостей, используйте `/** @ngInject */`. + - Используйте [ng-annotate](//github.com/olov/ng-annotate) для [Gulp](https://gulpjs.com) или [Grunt](https://gruntjs.com) и комментируйте функции, которые нуждаются в автоматической вставке зависимостей, используйте `/** @ngInject */`. *Почему?*: Это гарантирует, что в вашем коде нет зависимостей, которые не используют защиту для повреждений от минификации. @@ -1609,7 +1609,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) для автоматических билдов. Вставляйте `/* @ngInject */` перед любой функцией, которая имеет зависимости. + - Используйте [gulp-ng-annotate](https://www.npmjs.com/package/gulp-ng-annotate) или [grunt-ng-annotate](https://www.npmjs.com/package/grunt-ng-annotate) для автоматических билдов. Вставляйте `/* @ngInject */` перед любой функцией, которая имеет зависимости. *Почему?*: ng-annotate будет отлавливать большинство зависимостей, но иногда требуется вставлять подсказки в виде синтаксиса `/* @ngInject */`. @@ -2039,7 +2039,7 @@ - Имейте короткую перспективу реализации и долгосрочное видение проекта. Другими словами, начинайте с малого, но держите всегда в голове, куда развивается ваше приложение. Весь код приложения идет в корневую папку `app`. Все содержимое распределяется, как один компонент на один файл. Каждый контроллер, сервис, модуль, представление - каждый в своем файле. Все скрипты сторонних производителей помещаются в другую корневую папку, а не в папку `app`. Я их не писал и я не хочу, чтобы они загромождали мое приложение (`bower_components`, `scripts`, `lib`). - Замечание: Найти более подробную информацию и объяснение структуры: [тут оригинальная статья о структуре приложения](http://www.johnpapa.net/angular-app-structuring-guidelines/). + Замечание: Найти более подробную информацию и объяснение структуры: [тут оригинальная статья о структуре приложения](https://johnpapa.net/angular-app-structuring-guidelines/). ### Общие элементы ###### [Style [Y151](#style-y151)] @@ -2315,11 +2315,11 @@ ### Библиотеки для тестирования ###### [Style [Y191](#style-y191)] - - Используйте [Jasmine](http://jasmine.github.io/) или [Mocha](http://mochajs.org) для модульного тестирования. + - Используйте [Jasmine](https://jasmine.github.io/) или [Mocha](https://mochajs.org) для модульного тестирования. *Почему?*: И Jasmine и Mocha широко распространены в сообществе AngularJS. Обе они стабильны, хорошо поддерживаются, и предоставляют отличные возможности для тестирования. - Замечание: Если используется Mocha, то дополнительно нужно использовать assert-библиотеку, например [Chai](http://chaijs.com). + Замечание: Если используется Mocha, то дополнительно нужно использовать assert-библиотеку, например [Chai](https://www.chaijs.com). ### Движок Запуска Тестов ###### [Style [Y192](#style-y192)] @@ -2330,14 +2330,14 @@ *Почему?*: 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). + *Почему?*: Некоторые средства разработки (IDE) начали интегрировать в себя библиотеку Karma, это - [WebStorm](http://www.jetbrains.com/webstorm/) и [Visual Studio](https://marketplace.visualstudio.com/items?itemName=DanielFisherlennybacon.KarmaVs). - *Почему?*: Karma очень хорошо работает с такими лидерами автоматизации как [Grunt](http://www.gruntjs.com) (вместе [grunt-karma](https://github.com/karma-runner/grunt-karma)) и [Gulp](http://www.gulpjs.com) (вместе [gulp-karma](https://github.com/lazd/gulp-karma)). + *Почему?*: Karma очень хорошо работает с такими лидерами автоматизации как [Grunt](https://gruntjs.com) (вместе [grunt-karma](https://github.com/karma-runner/grunt-karma)) и [Gulp](https://gulpjs.com) (вместе [gulp-karma](https://github.com/lazd/gulp-karma)). ### Stubbing и Spying ###### [Style [Y193](#style-y193)] - - Используйте [Sinon](http://sinonjs.org/) для stubbing и spying. + - Используйте [Sinon](https://sinonjs.org/) для stubbing и spying. *Почему?*: Sinon хорошо работает и с Jasmine и с Mocha. Он расширяет возможности stubbing и spying, которые предлагают Jasmine и Mocha. @@ -2419,7 +2419,7 @@ ### animate.css ###### [Style [Y212](#style-y212)] - - Используйте [animate.css](http://daneden.github.io/animate.css/) для обычных анимаций. + - Используйте [animate.css](https://daneden.github.io/animate.css/) для обычных анимаций. *Почему?*: Анимации, предоставляемые animate.css, быстрые, плавные и их легко добавить в приложение. @@ -2427,7 +2427,7 @@ *Почему?*: animate.css широко используем и оттестирован. - Замечание: Посмотрите эту [замечательную статью от Matias Niemelä об анимациях AngularJS](http://www.yearofmoo.com/2013/08/remastered-animation-in-angularjs-1-2.html) + Замечание: Посмотрите эту [замечательную статью от Matias Niemelä об анимациях AngularJS](https://www.yearofmoo.com/2013/08/remastered-animation-in-angularjs-1-2.html) **[К Содержанию](#table-of-contents)** @@ -2488,7 +2488,7 @@ ### Используйте Файл Настроек ###### [Style [Y230](#style-y230)] - - Используйте JS Hint для проверки вашего кода JavaScript и проверьте файл настроек самого JS Hint, а также включите этот файл с систему управления исходным кодом (source control). Смотрите [JS Hint docs](http://www.jshint.com/docs/) для точного описания настроек. + - Используйте JS Hint для проверки вашего кода JavaScript и проверьте файл настроек самого JS Hint, а также включите этот файл с систему управления исходным кодом (source control). Смотрите [JS Hint docs](https://jshint.com/docs/) для точного описания настроек. *Почему?*: Если код некорректен, то получаем предупреждения, перед тем, как отправить изменения в систему управления исходным кодом. @@ -2710,7 +2710,7 @@ **[К Содержанию](#table-of-contents)** ## Task Automation -Используйте [Gulp](http://gulpjs.com) или [Grunt](http://gruntjs.com) для создания автоматизированных процессов. Gulp работает по принципу код главнее конфигурации, а Grunt наоборот конфигурация главнее кода. Я лично предпочитаю Gulp, так как мне кажется его проще читать и писать, но на самом деле они оба отличные инструменты автоматизации. +Используйте [Gulp](https://gulpjs.com) или [Grunt](https://gruntjs.com) для создания автоматизированных процессов. Gulp работает по принципу код главнее конфигурации, а Grunt наоборот конфигурация главнее кода. Я лично предпочитаю Gulp, так как мне кажется его проще читать и писать, но на самом деле они оба отличные инструменты автоматизации. ###### [Style [Y400](#style-y400)] @@ -2752,7 +2752,7 @@ _tldr; Use this guide. Attributions are appreciated._ ### (The MIT License) -Copyright (c) 2014 [John Papa](http://johnpapa.net) +Copyright (c) 2014 [John Papa](https://johnpapa.net) Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the diff --git a/a1/i18n/tr-TR.md b/a1/i18n/tr-TR.md index 7d2b973c..827d37d2 100644 --- a/a1/i18n/tr-TR.md +++ b/a1/i18n/tr-TR.md @@ -6,7 +6,7 @@ Angular takım lideri Igor Minar'a, rehberimi incelediği, geri bildirimde bulun ##Amaç *[@john_papa](//twitter.com/john_papa)'dan Takımlar için seçeneklendirilmiş stil rehberi* -Eğer Angular projeleriniz için seçeneklendirilmiş bir sintaks, yöntem ve yapılandırma rehberi arıyorsanız, buyrun gelin. Bu stiller benim [Angular](//angularjs.org) sunumlarım, [Pluralsight eğitim kurslarım](http://pluralsight.com/training/Authors/Details/john-papa) ve takım çalışmalarımdan edindiğim deneyimlerle oluşturulmuştur. +Eğer Angular projeleriniz için seçeneklendirilmiş bir sintaks, yöntem ve yapılandırma rehberi arıyorsanız, buyrun gelin. Bu stiller benim [Angular](//angularjs.org) sunumlarım, [Pluralsight eğitim kurslarım](https://app.pluralsight.com/profile/author/john-papa) ve takım çalışmalarımdan edindiğim deneyimlerle oluşturulmuştur. Bu rehberin amacı, kullandığım yöntemleri göstererek, hatta daha önemlisi neden bu yöntemleri seçtiğimi açıklayarak, Angular uygulamalarınızı geliştirirken size yol göstermektir. @@ -17,13 +17,13 @@ Bu rehberin amacı, kullandığım yöntemleri göstererek, hatta daha önemlisi ## Topluluğun Aşmışlığı ve Referanslar Asla izole olarak çalışmayın. Angular topluluğunu, deneyimlerini paylaşma konusunda tutkulu buluyorum. Örneğin, arkadaşım ve bir Angular uzmanı Todd Motto ile birçok stil ve yöntem üzerinde işbirliği yaptık. Birçoğunda hemfikir olduk, birkaçında farklı yollar izledik. [Todd'un rehberi'ni](https://github.com/toddmotto/angularjs-styleguide) de onun yaklaşımını anlamak ve karşılaştırma yapmak için incelemenizi öneririm -Bir çok yöntem [Ward Bell](http://twitter.com/wardbell) ile yaptığımız eşli programlama seanslarında ortaya çıktı. Arkadaşım Ward bu rehberin nihai evrimine büyük katkılarda bulundu. +Bir çok yöntem [Ward Bell](https://twitter.com/wardbell) ile yaptığımız eşli programlama seanslarında ortaya çıktı. Arkadaşım Ward bu rehberin nihai evrimine büyük katkılarda bulundu. ## Örnek uygulama üzerinde yöntemler Bu rehber *ne*, *neden* ve *nasıl* sorularına odaklanırken, yöntemleri deneyimlemenin yardımcı olacaığını düşünüyorum. Bu rehbere, bu rehberdeki yöntemleri ve tasarım desenlerini kullanan örnek bir uygulama eşlik ediyor. Bu uygulamayı [burada](https://github.com/johnpapa/ng-demos), `modular` klasörünün altında bulabilirsiniz. Üzerinde denemeler yapmaktan çekinmeyin. [Çalıştırma talimatları readme dosyasındadır](https://github.com/johnpapa/ng-demos/tree/master/modular). ##Çeviriler -[Bu Angular rehberinin çevirileri](https://github.com/johnpapa/angular-styleguide/tree/master/i18n) gönüllü yardımcılar tarafından sağlanmaktadır +[Bu Angular rehberinin çevirileri](https://github.com/johnpapa/angular-styleguide/tree/master/a1/i18n) gönüllü yardımcılar tarafından sağlanmaktadır ## İçerik Listesi @@ -301,7 +301,7 @@ Bu rehber *ne*, *neden* ve *nasıl* sorularına odaklanırken, yöntemleri deney ### controllerAs View Sintaksı ###### [Stil [Y030](#style-y030)] - - [`controllerAs`](http://www.johnpapa.net/do-you-like-your-angular-controllers-with-or-without-sugar/) sintaksını klasik $scope'lu controller sintaksına tercih edin. + - [`controllerAs`](https://johnpapa.net/do-you-like-your-angular-controllers-with-or-without-sugar/) sintaksını klasik $scope'lu controller sintaksına tercih edin. *Neden?*: Controller'lar `new` kelimesi ile yaratılır ve uygulamanız içerisinde sadece bir örneği bulunur. `controllerAs` yöntemi JavaScript'in constructor yapısına daha yakındır. @@ -374,7 +374,7 @@ Bu rehber *ne*, *neden* ve *nasıl* sorularına odaklanırken, yöntemleri deney } ``` - Not: [jshint](http://www.jshint.com/) uyarılarını kodun üstüne yorum ekleyerek engelleyebilirsiniz. Eğer fonksiyonunu UpperCasing yöntemi ile isimlendirdiyse buna ihtiyaç olmaz. Çünkü bu yöntem bu fonksiyonun bir constructor fonksiyonu olduğunu belirtir, ki Angular controller'ları de bir constructor fonksiyonudur. + Not: [jshint](https://jshint.com/) uyarılarını kodun üstüne yorum ekleyerek engelleyebilirsiniz. Eğer fonksiyonunu UpperCasing yöntemi ile isimlendirdiyse buna ihtiyaç olmaz. Çünkü bu yöntem bu fonksiyonun bir constructor fonksiyonu olduğunu belirtir, ki Angular controller'ları de bir constructor fonksiyonudur. ```javascript /* jshint validthis: true */ @@ -491,7 +491,7 @@ Bu rehber *ne*, *neden* ve *nasıl* sorularına odaklanırken, yöntemleri deney ### Fonksiyon Tanımlamaları ve İmplementasyon Detaylarının Saklanması ###### [Stil [Y034](#style-y034)] - - Fonksiyon tanımlamalarınızı implementasyon detaylarını saklamak için kullanın. View'a bağlanacak öğeleri yukarıda tanımlayın. Controller'ınızda bir fonksiyonu bağlama ihtiyacı hissettiğinizde, bu öğeyi bir fonksiyon tanımlamasına eşitleyin. Fonksiyonun implementasyon detaylarını kodun ileriki satırlarında yapın. Bu direk olarak "Bağlanacaklar Yukarı" başlığı ile ilintili. Daha fazla detay için bu [makaleme](http://www.johnpapa.net/angular-function-declarations-function-expressions-and-readable-code) bakabilirsiniz. + - Fonksiyon tanımlamalarınızı implementasyon detaylarını saklamak için kullanın. View'a bağlanacak öğeleri yukarıda tanımlayın. Controller'ınızda bir fonksiyonu bağlama ihtiyacı hissettiğinizde, bu öğeyi bir fonksiyon tanımlamasına eşitleyin. Fonksiyonun implementasyon detaylarını kodun ileriki satırlarında yapın. Bu direk olarak "Bağlanacaklar Yukarı" başlığı ile ilintili. Daha fazla detay için bu [makaleme](https://johnpapa.net/angular-function-declarations-function-expressions-and-readable-code) bakabilirsiniz. *Neden?*: Bağlanacak öğeleri yukarı taşımak okumayı kolaylaştırır ve controlller içerisinde hangi öğelerin View'a bağlandığını anında görmemizi sağlar. @@ -730,7 +730,7 @@ Bu rehber *ne*, *neden* ve *nasıl* sorularına odaklanırken, yöntemleri deney ### Tek Sorumluluk ###### [Stil [Y050](#style-y050)] - - Factory'lerin tek sorumluluğu olmalıdır [single responsibility](http://en.wikipedia.org/wiki/Single_responsibility_principle), ve kendi içeriğini kapsamalıdır. Factory sorumluluğunun dışına taşmaya başlarsa, bu yeni sorumluluk için ayrı bir factory yaratılmalıdır. + - Factory'lerin tek sorumluluğu olmalıdır [single responsibility](https://en.wikipedia.org/wiki/Single_responsibility_principle), ve kendi içeriğini kapsamalıdır. Factory sorumluluğunun dışına taşmaya başlarsa, bu yeni sorumluluk için ayrı bir factory yaratılmalıdır. ### Singleton ###### [Stil [Y051](#style-y051)] @@ -742,7 +742,7 @@ Bu rehber *ne*, *neden* ve *nasıl* sorularına odaklanırken, yöntemleri deney ### Ulaşılabilirler Yukarı! ###### [Style [Y052](#style-y052)] - - Servisin çağrılabilen metodlarını [Revealing Module Pattern](http://addyosmani.com/resources/essentialjsdesignpatterns/book/#revealingmodulepatternjavascript) yapısını kullanarak kodun tepesinde tanımlayın. + - Servisin çağrılabilen metodlarını [Revealing Module Pattern](https://addyosmani.com/resources/essentialjsdesignpatterns/book/#revealingmodulepatternjavascript) yapısını kullanarak kodun tepesinde tanımlayın. *Neden?*: Çağrılabilen metodları kodun tepesinde tanımlamak okunabilirliği arttırır ve bir bakışta bu servisin hangi metodlarının dışarıdan çağırılabileceğini anlamamıza yardımcı olur. Ayrıca hangi metodların unit testlerinin yazılması gerektiği hakkında fikir verir. @@ -799,7 +799,7 @@ Bu rehber *ne*, *neden* ve *nasıl* sorularına odaklanırken, yöntemleri deney ### Fonksiyon Tanımlamaları ve İmplementasyon Detaylarının Saklanması ###### [Stil [Y053](#style-y053)] - - Fonksiyon tanımlamalarınızı implementasyon detaylarını saklamak için kullanın. View'a bağlanacak öğeleri yukarıda tanımlayın. Controller'ınızda bir fonksiyonu bağlama ihtiyacı hissettiğinizde, bu öğeyi bir fonksiyon tanımlamasına eşitleyin. Fonksiyonun implementasyon detaylarını kodun ileriki satırlarında yapın. Bu direk olarak "Bağlanacaklar Yukarı" başlığı ile ilintili. Daha fazla detay için bu [makaleme](http://www.johnpapa.net/angular-function-declarations-function-expressions-and-readable-code) bakabilirsiniz. + - Fonksiyon tanımlamalarınızı implementasyon detaylarını saklamak için kullanın. View'a bağlanacak öğeleri yukarıda tanımlayın. Controller'ınızda bir fonksiyonu bağlama ihtiyacı hissettiğinizde, bu öğeyi bir fonksiyon tanımlamasına eşitleyin. Fonksiyonun implementasyon detaylarını kodun ileriki satırlarında yapın. Bu direk olarak "Bağlanacaklar Yukarı" başlığı ile ilintili. Daha fazla detay için bu [makaleme](https://johnpapa.net/angular-function-declarations-function-expressions-and-readable-code) bakabilirsiniz. *Neden?*: Bağlanacak öğeleri yukarı taşımak okumayı kolaylaştırır ve controller içerisinde hangi öğelerin View'a bağlandığını anında görmemizi sağlar. @@ -1133,9 +1133,9 @@ Bu rehber *ne*, *neden* ve *nasıl* sorularına odaklanırken, yöntemleri deney *Neden?*: Eşsiz ön ek directive'in kapsamını ve orijinini ifade eder. Örneğin `cc-` directive'in CodeCamper uygulamasına ait olduğunu ifade ederken, `acme-` bu directive'in Acme firmasına ait olduğunu ifade edevilir - Note: Avoid `ng-` as these are reserved for Angular directives. Research widely used directives to avoid naming conflicts, such as `ion-` for the [Ionic Framework](http://ionicframework.com/). + Note: Avoid `ng-` as these are reserved for Angular directives. Research widely used directives to avoid naming conflicts, such as `ion-` for the [Ionic Framework](https://ionicframework.com/). - Not: `ng-` Angular tafafından kullanıldığı için bu ön eki kullanmaktan kaçının. Ön ekinizi belirlemeden önce çakışmaların önüne geçmek için iyice araştırın. Örneğin `ion-` ön eki [Ionic Framework](http://ionicframework.com/) tarafından kullanılmaktadır. + Not: `ng-` Angular tafafından kullanıldığı için bu ön eki kullanmaktan kaçının. Ön ekinizi belirlemeden önce çakışmaların önüne geçmek için iyice araştırın. Örneğin `ion-` ön eki [Ionic Framework](https://ionicframework.com/) tarafından kullanılmaktadır. ### Directive'inizin Yazım Türünü Element ve Attribute Olarak Sınırlayın ###### [Stil [Y074](#style-y074)] @@ -1620,7 +1620,7 @@ Bu rehber *ne*, *neden* ve *nasıl* sorularına odaklanırken, yöntemleri deney ### ng-annotate ###### [Stil [Y100](#style-y100)] - - [Gulp](http://gulpjs.com) ya da [Grunt](http://gruntjs.com) ile birlikte [ng-annotate](//github.com/olov/ng-annotate) kullanın ve otomatik dependency injection'a ihtiyacı olan fonksiyonları `/* @ngInject */` ile yorumlayın + - [Gulp](https://gulpjs.com) ya da [Grunt](https://gruntjs.com) ile birlikte [ng-annotate](//github.com/olov/ng-annotate) kullanın ve otomatik dependency injection'a ihtiyacı olan fonksiyonları `/* @ngInject */` ile yorumlayın *Neden?*: Bu kodunuzu minification uyumlu yazılması unutulmuş bağımlılıklara karşı korur. @@ -1697,7 +1697,7 @@ Bu rehber *ne*, *neden* ve *nasıl* sorularına odaklanırken, yöntemleri deney ### ng-annotate için Gulp ya da Grunt Kullanın ###### [Stil [Y101](#style-y101)] - - Otomatik derleme görevleriniz için [gulp-ng-annotate](https://www.npmjs.org/package/gulp-ng-annotate) ya da [grunt-ng-annotate](https://www.npmjs.org/package/grunt-ng-annotate) kullanın. Bağımlılığı olan fonksiyonların başına `/* @ngInject */` satırını koyun. + - Otomatik derleme görevleriniz için [gulp-ng-annotate](https://www.npmjs.com/package/gulp-ng-annotate) ya da [grunt-ng-annotate](https://www.npmjs.com/package/grunt-ng-annotate) kullanın. Bağımlılığı olan fonksiyonların başına `/* @ngInject */` satırını koyun. *Neden?*: ng-annotate çoğu bağımlılığı yakalayacaktır, ama bazen `/* @ngInject */` sintaksı ile done vermenizi bekler. @@ -2159,7 +2159,7 @@ Bu rehber *ne*, *neden* ve *nasıl* sorularına odaklanırken, yöntemleri deney - Kısa vadeli düşünerek implementasyon yapın ama vizyonunuzu uzun vadeli tutun. Diğer bir deyişle, küçük parçalarla başlayın ama uygulamanın nereye doğru gittiğini aklınızda tutun. Uygulamanın bütün kodu `app` adlı bir klasör altında duracak. Bütün içerik bir dosyaya bir özellik şeklinde olacak. Her controller, servis, modül ve view kendi dosyalarında olacaklar. Bütün 3. parti kütüphaneler başka bir klasör altında toplanmalı, `app` klasörü altında değil. O kodları ben yazmadım ve benim uygulamamı karmaşıklaştırmasını istemiyorum (ör. `bower_components`, `scripts`, `lib`). - Not: Bu yapının hakkında daha fazla bilgi istiyorsanız: [uygulama yapısı hakkındaki orjinal makalem](http://www.johnpapa.net/angular-app-structuring-guidelines/). + Not: Bu yapının hakkında daha fazla bilgi istiyorsanız: [uygulama yapısı hakkındaki orjinal makalem](https://johnpapa.net/angular-app-structuring-guidelines/). ### Layout (yerleşim) ###### [Stil [Y151](#style-y151)] @@ -2439,11 +2439,11 @@ Unit Test yapmak temiz kodu yönetmeye yardımcı olur, bu yüzden benim unit te ### Test Kütüphanesi ###### [Stil [Y191](#style-y191)] - - Unit testleriniz için [Jasmine](http://jasmine.github.io/) ya da [Mocha](http://mochajs.org) kullanın. + - Unit testleriniz için [Jasmine](https://jasmine.github.io/) ya da [Mocha](https://mochajs.org) kullanın. *Neden?*: Jasmine ve Mocha, ikisi de Angular topluluğu tarafından yaygınca kullanılmaktadır. İkisi de istikrarlı, iyi yönetilir, ve sağlam test özellikleri sunuyorlar. - Not: Mocha kullanırken ayrıca [Chai](http://chaijs.com) gibi bir assert kütüphanesi kullanmayı gözönünde bulundurun. Ben Mocha'yı tercih ediyorum. + Not: Mocha kullanırken ayrıca [Chai](https://www.chaijs.com) gibi bir assert kütüphanesi kullanmayı gözönünde bulundurun. Ben Mocha'yı tercih ediyorum. ### Test Çalıştırıcı ###### [Stil [Y192](#style-y192)] @@ -2454,9 +2454,9 @@ Unit Test yapmak temiz kodu yönetmeye yardımcı olur, bu yüzden benim unit te *Neden?*: Karma kendi başına ya da Grunt veya Gulp aracılığı ile Continuous Integration sisteminize kolaylıkla dahil olabilir. - *Neden?*: [WebStorm](http://www.jetbrains.com/webstorm/) ve [Visual Studio](http://visualstudiogallery.msdn.microsoft.com/02f47876-0e7a-4f6c-93f8-1af5d5189225) gibi bazı IDE'ler Karma ile entegre olmaya başladılar. + *Neden?*: [WebStorm](http://www.jetbrains.com/webstorm/) ve [Visual Studio](https://marketplace.visualstudio.com/items?itemName=DanielFisherlennybacon.KarmaVs) gibi bazı IDE'ler Karma ile entegre olmaya başladılar. - *Neden?*: Karma, [Grunt](http://www.gruntjs.com) ([grunt-karma](https://github.com/karma-runner/grunt-karma) ile) ve [Gulp](http://www.gulpjs.com) gibi otomatik görev yönetici devleri ile uyumlu çalışır. Gulp kullanırken [Karma](https://github.com/karma-runner/karma)'yı direk olarak API'si ile kullanabilirsiniz. + *Neden?*: Karma, [Grunt](https://gruntjs.com) ([grunt-karma](https://github.com/karma-runner/grunt-karma) ile) ve [Gulp](https://gulpjs.com) gibi otomatik görev yönetici devleri ile uyumlu çalışır. Gulp kullanırken [Karma](https://github.com/karma-runner/karma)'yı direk olarak API'si ile kullanabilirsiniz. ```javascript /* önerilen stil */ @@ -2507,7 +2507,7 @@ Unit Test yapmak temiz kodu yönetmeye yardımcı olur, bu yüzden benim unit te ### Stubbing ve Spying ###### [Stil [Y193](#style-y193)] - - Stubbing ve spying [Sinon](http://sinonjs.org/) kullanın. + - Stubbing ve spying [Sinon](https://sinonjs.org/) kullanın. *Neden?*: Sinon, Jasmine ve Mocha ile uyumlu çalışır ve sundukları stubbing ve spying özelliklerini genişletir. @@ -2602,7 +2602,7 @@ Unit Test yapmak temiz kodu yönetmeye yardımcı olur, bu yüzden benim unit te ### animate.css ###### [Stil [Y212](#style-y212)] - - Geleneksel animasyonlar için [animate.css](http://daneden.github.io/animate.css/) kullanın. + - Geleneksel animasyonlar için [animate.css](https://daneden.github.io/animate.css/) kullanın. *Neden?*: animate.css'in sunduğı animasyonlar hızlı, akıcı ve uygulamanıza kolay eklenebilir. @@ -2610,7 +2610,7 @@ Unit Test yapmak temiz kodu yönetmeye yardımcı olur, bu yüzden benim unit te *Neden?*: animate.css yaygınca kullanılıyor ve test edilmiş. - Not: Bu müthiş makaleye göz gezdirin: [Matias Niemelä Angular animations anlatıyor](http://www.yearofmoo.com/2013/08/remastered-animation-in-angularjs-1-2.html) + Not: Bu müthiş makaleye göz gezdirin: [Matias Niemelä Angular animations anlatıyor](https://www.yearofmoo.com/2013/08/remastered-animation-in-angularjs-1-2.html) **[İçerik Listesi to top](#icerik-listesi)** @@ -2671,7 +2671,7 @@ Unit Test yapmak temiz kodu yönetmeye yardımcı olur, bu yüzden benim unit te ### Bir Seçenek Dosyası Kullanın ###### [Stil [Y230](#style-y230)] - - JavaScript Kod denetleyicisi olarak JS Hint kullanın ve JS Hint seçeneklerini kendinize göre ayarlamayı unutmayın. Seçeneklerin detayları için [JS Hint dökümantasyonuna](http://www.jshint.com/docs/) bakın. + - JavaScript Kod denetleyicisi olarak JS Hint kullanın ve JS Hint seçeneklerini kendinize göre ayarlamayı unutmayın. Seçeneklerin detayları için [JS Hint dökümantasyonuna](https://jshint.com/docs/) bakın. *Neden?*: Kodunuzu versiyon kontrol sistemine göndermeden önce size bir ilk uyarı verir. @@ -3016,7 +3016,7 @@ Tutarlı pattern'ler ve stiller için dosya şablonları ve snippet'ler kullanı ###### [Stil [Y256](#style-y256)] - - [Visual Studio Code](http://code.visualstudio.com) stil ve rehberleri izleyen Angular vim snippet'leri + - [Visual Studio Code](https://code.visualstudio.com/) stil ve rehberleri izleyen Angular vim snippet'leri - [VS Code Angular snippet'leri](assets/vscode-snippets/javascript.json?raw=true)'ni indirin - copy snippets to snippet directory, or alternatively copy and paste the snippets into your existing ones @@ -3153,7 +3153,7 @@ Kullanıcı tarafında, küçük şablonlar ve directive'lerden oluşan view ge **[İçerik Listesi](#icerik-listesi)** ## Görev Otomasyonu -Otomatik görevler yaratmak için [Gulp](http://gulpjs.com) ya da [Grunt](http://gruntjs.com) kullanın. Gulp convention over configuration paradigmasını benimserken, Grunt configuration over code prensibini benimser. Ben şahsen Gulp'ı tercih ediyorum. Yazması ve okuması daha kolay geliyor, ama ikisi de çok başarılılar. +Otomatik görevler yaratmak için [Gulp](https://gulpjs.com) ya da [Grunt](https://gruntjs.com) kullanın. Gulp convention over configuration paradigmasını benimserken, Grunt configuration over code prensibini benimser. Ben şahsen Gulp'ı tercih ediyorum. Yazması ve okuması daha kolay geliyor, ama ikisi de çok başarılılar. > [Gulp Pluralsight kursu](http://jpapa.me/gulpps)mda gulp ve otomatik görevler hakkında daha çok şey öğrenebilirsiniz. @@ -3208,7 +3208,7 @@ _uzun lafın kısası; Bu rehberi kullanın. Katkılarınız makbule geçecektir ### Copyright -Copyright (c) 2014-2015 [John Papa](http://johnpapa.net) +Copyright (c) 2014-2015 [John Papa](https://johnpapa.net) ### (The MIT License) Permission is hereby granted, free of charge, to any person obtaining diff --git a/a1/i18n/zh-CN.md b/a1/i18n/zh-CN.md index e3de9a82..04adb392 100644 --- a/a1/i18n/zh-CN.md +++ b/a1/i18n/zh-CN.md @@ -6,7 +6,7 @@ ## 目的 *Angular规范[@john_papa](//twitter.com/john_papa)* -如果你正在寻找一些关于语法、约定和结构化的Angular应用的一个有建设性的规范，那么你来对地方了。这里所包含的内容是基于我在团队中使用[Angular](//angularjs.org)的一些经验、一些演讲和[Pluralsight培训课程](http://pluralsight.com/training/Authors/Details/john-papa)。 +如果你正在寻找一些关于语法、约定和结构化的Angular应用的一个有建设性的规范，那么你来对地方了。这里所包含的内容是基于我在团队中使用[Angular](//angularjs.org)的一些经验、一些演讲和[Pluralsight培训课程](https://app.pluralsight.com/profile/author/john-papa)。 这个规范的目的是为构建Angular应用提供指导，当然更加重要的是让大家知道我为什么要选择它们。 @@ -17,7 +17,7 @@ ## Community Awesomeness and Credit Angular社区是一个热衷于分享经验的令人难以置信的社区，尽管Todd Motto（他是我的一个朋友，也是Angular专家）和我合作了多种规范和惯例，但是我们也存在着一些分歧。我鼓励你去看看[Todd的指南](https://github.com/toddmotto/angularjs-styleguide)，在那里你能看到我们之间的区别。 -我的许多规范都是从大量的程序会话[Ward Bell](http://twitter.com/wardbell)和我所拥有的而来的，我的好友Ward也影响了本规范的最终演变。 +我的许多规范都是从大量的程序会话[Ward Bell](https://twitter.com/wardbell)和我所拥有的而来的，我的好友Ward也影响了本规范的最终演变。 ## 在示例App中了解这些规范 看示例代码有助于你更好地理解，你可以在`modular`文件夹下找到[命名为modular的示例应用程序](https://github.com/johnpapa/ng-demos)，随便克隆。 @@ -291,7 +291,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`](https://johnpapa.net/do-you-like-your-angular-controllers-with-or-without-sugar/) 语法代替直接用经典的$scope定义的controller的方式。 *为什么？*：controller被构建的时候，就会有一个新的实例，`controllerAs` 的语法比`经典的$scope语法`更接近JavaScript构造函数。 @@ -365,7 +365,7 @@ Angular社区是一个热衷于分享经验的令人难以置信的社区，尽 } ``` - - 注：你可以参照下面的做法来避免 [jshint](http://www.jshint.com/)的警告。但是构造函数（函数名首字母大写）是不需要这个的. + - 注：你可以参照下面的做法来避免 [jshint](https://jshint.com/)的警告。但是构造函数（函数名首字母大写）是不需要这个的. ```javascript /* jshint validthis: true */ @@ -480,7 +480,7 @@ Angular社区是一个热衷于分享经验的令人难以置信的社区，尽 ### 函数声明隐藏实现细节 ###### [Style [Y034](#style-y034)] - - 使用函数声明来隐藏实现细节，置顶绑定成员，当你需要在controller中绑定一个函数时，把它指向一个在文件的后面会出现函数声明。更多详情请看[这里](http://www.johnpapa.net/angular-function-declarations-function-expressions-and-readable-code)。 + - 使用函数声明来隐藏实现细节，置顶绑定成员，当你需要在controller中绑定一个函数时，把它指向一个在文件的后面会出现函数声明。更多详情请看[这里](https://johnpapa.net/angular-function-declarations-function-expressions-and-readable-code)。 *为什么？*：易读，易识别哪些成员可以在View中绑定和使用。 @@ -720,7 +720,7 @@ Angular社区是一个热衷于分享经验的令人难以置信的社区，尽 ### 单一职责 ###### [Style [Y051](#style-y051)] - - factory应该是[单一职责](http://en.wikipedia.org/wiki/Single_responsibility_principle)，这是由其上下文进行封装的。一旦一个factory将要处理超过单一的目的时，就应该创建一个新的factory。 + - factory应该是[单一职责](https://en.wikipedia.org/wiki/Single_responsibility_principle)，这是由其上下文进行封装的。一旦一个factory将要处理超过单一的目的时，就应该创建一个新的factory。 ### 单例 ###### [Style [Y051](#style-y051)] @@ -732,7 +732,7 @@ Angular社区是一个热衷于分享经验的令人难以置信的社区，尽 ### 可访问的成员置顶 ###### [Style [Y052](#style-y052)] - - 使用从[显露模块模式](http://addyosmani.com/resources/essentialjsdesignpatterns/book/#revealingmodulepatternjavascript)派生出来的技术把service（它的接口）中可调用的成员暴露到顶部， + - 使用从[显露模块模式](https://addyosmani.com/resources/essentialjsdesignpatterns/book/#revealingmodulepatternjavascript)派生出来的技术把service（它的接口）中可调用的成员暴露到顶部， *为什么？*：易读，并且让你可以立即识别service中的哪些成员可以被调用，哪些成员必须进行单元测试（或者被别人嘲笑）。 @@ -1119,7 +1119,7 @@ Angular社区是一个热衷于分享经验的令人难以置信的社区，尽 *为什么？*：方便快速识别directive的内容和起源，例如`acme-`可能预示着这个directive是服务于Acme company。 - 注：避免使用`ng-`为前缀，研究一下其它广泛使用的directive避免命名冲突，例如[Ionic Framework](http://ionicframework.com/)的`ion-`。 + 注：避免使用`ng-`为前缀，研究一下其它广泛使用的directive避免命名冲突，例如[Ionic Framework](https://ionicframework.com/)的`ion-`。 ### 限制元素和属性 ###### [Style [Y074](#style-y074)] @@ -1602,7 +1602,7 @@ Angular社区是一个热衷于分享经验的令人难以置信的社区，尽 ### ng-annotate ###### [Style [Y100](#style-y100)] - - 在[Gulp](http://gulpjs.com)或[Grunt](http://gruntjs.com)中使用[ng-annotate](//github.com/olov/ng-annotate)，用`/** @ngInject */`对需要自动依赖注入的function进行注释。 + - 在[Gulp](https://gulpjs.com)或[Grunt](https://gruntjs.com)中使用[ng-annotate](//github.com/olov/ng-annotate)，用`/** @ngInject */`对需要自动依赖注入的function进行注释。 *为什么？*：可以避免代码中的依赖使用到任何不安全的写法。 @@ -1679,7 +1679,7 @@ Angular社区是一个热衷于分享经验的令人难以置信的社区，尽 ### 使用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)，把`/* @ngInject */`注入到任何有依赖关系函数的前面。 + - 在自动化任务中使用[gulp-ng-annotate](https://www.npmjs.com/package/gulp-ng-annotate)或[grunt-ng-annotate](https://www.npmjs.com/package/grunt-ng-annotate)，把`/* @ngInject */`注入到任何有依赖关系函数的前面。 *为什么？*：ng-annotate会捕获大部分的依赖关系，但是有时候需要借助于`/* @ngInject */`语法提示。 @@ -2109,7 +2109,7 @@ Angular社区是一个热衷于分享经验的令人难以置信的社区，尽 - 有实施的短期看法和长远的目标，换句话说，从小处入手，但是要记住app的走向。app的所有代码都在一个叫做`app`的根目录下，所有的内容都遵循一个功能一个文件，每一个controller、service、module、view都是独立的文件。第三方脚本存放在另外的根文件夹中（`bower_components`、`scripts`、`lib`）。 - 注：了解实例结构的具体信息看[Angular应用结构](http://www.johnpapa.net/angular-app-structuring-guidelines/)。 + 注：了解实例结构的具体信息看[Angular应用结构](https://johnpapa.net/angular-app-structuring-guidelines/)。 ### Layout ###### [Style [Y151](#style-y151)] @@ -2387,11 +2387,11 @@ Angular社区是一个热衷于分享经验的令人难以置信的社区，尽 ### 测试库 ###### [Style [Y191](#style-y191)] - - 用[Jasmine](http://jasmine.github.io/)或者[Mocha](http://mochajs.org)进行单元测试。 + - 用[Jasmine](https://jasmine.github.io/)或者[Mocha](https://mochajs.org)进行单元测试。 *为什么？*：Angular社区中Jasmine和Mocha都用的很广，两者都很稳定，可维护性好，提供强大的测试功能。 - 注意：使用Mocha时你可以考虑选择一个类似[Chai](http://chaijs.com)的提示库。 + 注意：使用Mocha时你可以考虑选择一个类似[Chai](https://www.chaijs.com)的提示库。 ### 测试运行器 ###### [Style [Y192](#style-y192)] @@ -2402,14 +2402,14 @@ Angular社区是一个热衷于分享经验的令人难以置信的社区，尽 *为什么？*：可以通过自身或是Grunt、Gulp方便地钩入持续集成的进程。 - *为什么？*：一些IDE已经开始集成Karma了，如[WebStorm](http://www.jetbrains.com/webstorm/)和[Visual Studio](http://visualstudiogallery.msdn.microsoft.com/02f47876-0e7a-4f6c-93f8-1af5d5189225)。 + *为什么？*：一些IDE已经开始集成Karma了，如[WebStorm](http://www.jetbrains.com/webstorm/)和[Visual Studio](https://marketplace.visualstudio.com/items?itemName=DanielFisherlennybacon.KarmaVs)。 - *为什么？*：Karma可以很好的和自动化任务工具如[Grunt](http://www.gruntjs.com)（带有[grunt-karma](https://github.com/karma-runner/grunt-karma)）和[Gulp](http://www.gulpjs.com)（带有[gulp-karma](https://github.com/lazd/gulp-karma)）合作。 + *为什么？*：Karma可以很好的和自动化任务工具如[Grunt](https://gruntjs.com)（带有[grunt-karma](https://github.com/karma-runner/grunt-karma)）和[Gulp](https://gulpjs.com)（带有[gulp-karma](https://github.com/lazd/gulp-karma)）合作。 ### Stubbing和Spying ###### [Style [Y193](#style-y193)] - - 用[Sinon](http://sinonjs.org/)。 + - 用[Sinon](https://sinonjs.org/)。 *为什么？*：Sinon可以和Jasmine和Mocha合作良好，并且可以扩展它们提供的stubbing和spying。 @@ -2502,7 +2502,7 @@ Angular社区是一个热衷于分享经验的令人难以置信的社区，尽 ### animate.css ###### [Style [Y212](#style-y212)] - - 传统动画使用[animate.css](http://daneden.github.io/animate.css/)。 + - 传统动画使用[animate.css](https://daneden.github.io/animate.css/)。 *为什么？*：css提供的动画是快速的、流畅的、易于添加到应用程序中的。 @@ -2510,7 +2510,7 @@ Angular社区是一个热衷于分享经验的令人难以置信的社区，尽 *为什么？*：animate.css被广泛使用和测试。 - 注意：参阅[Matias Niemelä的关于Angular动画的文章](http://www.yearofmoo.com/2013/08/remastered-animation-in-angularjs-1-2.html) + 注意：参阅[Matias Niemelä的关于Angular动画的文章](https://www.yearofmoo.com/2013/08/remastered-animation-in-angularjs-1-2.html) **[返回顶部](#目录)** @@ -2571,7 +2571,7 @@ Angular社区是一个热衷于分享经验的令人难以置信的社区，尽 ### 使用一个Options文件 ###### [Style [Y230](#style-y230)] - - 用JS Hint来分析你的JavaScript代码，确保你自定义了JS Hint选项文件并且包含在源控制里。详细信息：[JS Hint文档](http://www.jshint.com/docs/)。 + - 用JS Hint来分析你的JavaScript代码，确保你自定义了JS Hint选项文件并且包含在源控制里。详细信息：[JS Hint文档](https://jshint.com/docs/)。 *为什么？*：提交代码到原版本之前先发出警告。 @@ -2817,7 +2817,7 @@ 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](../assets/webstorm-angular-file-template.settings.jar?raw=true) - 打开WebStorm点击`File`菜单 - 选择`Import Settings`菜单选项 - 选择文件点击`OK` @@ -3023,7 +3023,7 @@ Angular社区是一个热衷于分享经验的令人难以置信的社区，尽 **[返回顶部](#目录)** ## 任务自动化 -用[Gulp](http://gulpjs.com)或者[Grunt](http://gruntjs.com)来创建自动化任务。Gulp偏向于代码优先原则(code over configuration)而Grunt更倾向于配置优先原则(configuration over code)。我更倾向于使用gulp，因为gulp写起来比较简单。 +用[Gulp](https://gulpjs.com)或者[Grunt](https://gruntjs.com)来创建自动化任务。Gulp偏向于代码优先原则(code over configuration)而Grunt更倾向于配置优先原则(configuration over code)。我更倾向于使用gulp，因为gulp写起来比较简单。 > 可以在我的[Gulp Pluralsight course](http://jpapa.me/gulpps)了解更多gulp和自动化任务的信息 @@ -3077,7 +3077,7 @@ Angular社区是一个热衷于分享经验的令人难以置信的社区，尽 ### Copyright -Copyright (c) 2014-2015 [John Papa](http://johnpapa.net) +Copyright (c) 2014-2015 [John Papa](https://johnpapa.net) ### (The MIT License) Permission is hereby granted, free of charge, to any person obtaining diff --git a/a2/README.md b/a2/README.md index dbda1e90..5ec685a1 100644 --- a/a2/README.md +++ b/a2/README.md @@ -9,7 +9,7 @@ Special thanks to Igor Minar, lead on the Angular team, for reviewing, contribut ## Purpose *Opinionated Angular style guide for teams by [@john_papa](//twitter.com/john_papa)* -If you are looking for an opinionated style guide for syntax, conventions, and structuring Angular applications, then step right in. These styles are based on development experience with [Angular](//angularjs.org), presentations, [Pluralsight training courses](http://app.pluralsight.com/author/john-papa) and working in teams. +If you are looking for an opinionated style guide for syntax, conventions, and structuring Angular applications, then step right in. These styles are based on development experience with [Angular](//angularjs.org), presentations, [Pluralsight training courses](https://app.pluralsight.com/profile/author/john-papa) and working in teams. The purpose of this style guide is to provide guidance on building Angular applications by showing the conventions I use and, more importantly, why I choose them. diff --git a/a2/notes.md b/a2/notes.md index 393606b5..713da007 100644 --- a/a2/notes.md +++ b/a2/notes.md @@ -9,7 +9,7 @@ Special thanks to Igor Minar, lead on the Angular team, for reviewing, contribut ## Purpose *Opinionated Angular style guide for teams by [@john_papa](//twitter.com/john_papa)* -If you are looking for an opinionated style guide for syntax, conventions, and structuring Angular applications, then step right in. These styles are based on my development experience with [Angular](//angularjs.org), presentations, [Pluralsight training courses](http://app.pluralsight.com/author/john-papa) and working in teams. +If you are looking for an opinionated style guide for syntax, conventions, and structuring Angular applications, then step right in. These styles are based on my development experience with [Angular](//angularjs.org), presentations, [Pluralsight training courses](https://app.pluralsight.com/profile/author/john-papa) and working in teams. The purpose of this style guide is to provide guidance on building Angular applications by showing the conventions I use and, more importantly, why I choose them. @@ -239,7 +239,7 @@ Translations of this Angular 2 style guide are maintained by the community. Due *Why?*: The unique short prefix identifies the directive's context and origin. For example a prefix of `cc-` may indicate that the directive is part of a CodeCamper app while `acme-` may indicate a directive for the Acme company. - Note: Avoid `ng-` as these are reserved for Angular directives. Research widely used directives to avoid naming conflicts, such as `ion-` for the [Ionic Framework](http://ionicframework.com/). + Note: Avoid `ng-` as these are reserved for Angular directives. Research widely used directives to avoid naming conflicts, such as `ion-` for the [Ionic Framework](https://ionicframework.com/). **example coming soon** @@ -566,7 +566,7 @@ Unit testing helps maintain clean code, as such I included some of my recommenda ### Testing Library ###### [Style [A2-191](#style-a2-191)] - - Use [Jasmine](http://jasmine.github.io/) or [Mocha](http://mochajs.org) for unit testing. + - Use [Jasmine](https://jasmine.github.io/) or [Mocha](https://mochajs.org) for unit testing. *Why?*: Both Jasmine and Mocha are widely used in the Angular community. Both are stable, well maintained, and provide robust testing features. diff --git a/azure-pipelines.yml b/azure-pipelines.yml new file mode 100644 index 00000000..f47bf872 --- /dev/null +++ b/azure-pipelines.yml @@ -0,0 +1,14 @@ +pool: + vmImage: 'Ubuntu-16.04' + +steps: +- task: UseRubyVersion@0 + inputs: + versionSpec: '>= 2.5' + +- script: | + gem install awesome_bot + whitelist=dev.azure.com,jpapa.me,johnpapa.net + awesome_bot --skip-save-results --allow-dupe --white-list $whitelist `find . -name "*.md"` + failOnStderr: true + displayName: 'Validate links'