You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardexpand all lines: README.md
+15-15
Original file line number
Diff line number
Diff line change
@@ -1,6 +1,6 @@
1
-
# Angular 1.x styleguide (ES2015)
1
+
# AngularJS styleguide (ES2015)
2
2
3
-
### Up-to-date with Angular 1.6 best practices. Architecture, file structure, components, one-way dataflow, lifecycle hooks.
3
+
### Up-to-date with AngularJS 1.6 best practices. Architecture, file structure, components, one-way dataflow, lifecycle hooks.
4
4
5
5
---
6
6
@@ -10,11 +10,11 @@
10
10
11
11
*A sensible styleguide for teams by [@toddmotto](//twitter.com/toddmotto)*
12
12
13
-
This architecture and styleguide has been rewritten from the ground up for ES2015, the changes in Angular 1.5+ for future-upgrading your application to Angular 2. This guide includes new best practices for one-way dataflow, event delegation, component architecture and component routing.
13
+
This architecture and styleguide has been rewritten from the ground up for ES2015, the changes in AngularJS 1.5+ for future-upgrading your application to Angular. This guide includes new best practices for one-way dataflow, event delegation, component architecture and component routing.
14
14
15
15
You can find the old styleguide [here](https://github.com/toddmotto/angular-styleguide/tree/angular-old-es5), and the reasoning behind the new one [here](https://toddmotto.com/rewriting-angular-styleguide-angular-2).
16
16
17
-
> Join the Ultimate AngularJS learning experience to fully master beginner and advanced Angular features to build real-world apps that are fast, and scale.
17
+
> Join the Ultimate AngularJS learning experience to fully master beginner and advanced AngularJS features to build real-world apps that are fast, and scale.
Keep it simple and lowercase, use the component name, e.g. `calendar.*.js*`, `calendar-grid.*.js` - with the name of the type of file in the middle. Use `*.module.js` for the module definition file, as it keeps it verbose and consistent with Angular 2.
176
+
Keep it simple and lowercase, use the component name, e.g. `calendar.*.js*`, `calendar-grid.*.js` - with the name of the type of file in the middle. Use `*.module.js` for the module definition file, as it keeps it verbose and consistent with Angular.
177
177
178
178
```
179
179
calendar.module.js
@@ -256,7 +256,7 @@ The high level folder structure simply contains `index.html` and `app/`, a direc
256
256
257
257
### Component theory
258
258
259
-
Components are essentially templates with a controller. They are _not_ Directives, nor should you replace Directives with Components, unless you are upgrading "template Directives" with controllers, which are best suited as a component. Components also contain bindings that define inputs and outputs for data and events, lifecycle hooks and the ability to use one-way data flow and event Objects to get data back up to a parent component. These are the new defacto standard in Angular 1.5 and above. Everything template and controller driven that we create will likely be a component, which may be a stateful, stateless or routed component. You can think of a "component" as a complete piece of code, not just the `.component()` definition Object. Let's explore some best practices and advisories for components, then dive into how you should be structuring them via stateful, stateless and routed component concepts.
259
+
Components are essentially templates with a controller. They are _not_ Directives, nor should you replace Directives with Components, unless you are upgrading "template Directives" with controllers, which are best suited as a component. Components also contain bindings that define inputs and outputs for data and events, lifecycle hooks and the ability to use one-way data flow and event Objects to get data back up to a parent component. These are the new defacto standard in AngularJS 1.5 and above. Everything template and controller driven that we create will likely be a component, which may be a stateful, stateless or routed component. You can think of a "component" as a complete piece of code, not just the `.component()` definition Object. Let's explore some best practices and advisories for components, then dive into how you should be structuring them via stateful, stateless and routed component concepts.
260
260
261
261
**[Back to top](#table-of-contents)**
262
262
@@ -282,7 +282,7 @@ Controllers should only be used alongside components, never anywhere else. If yo
282
282
283
283
Here are some advisories for using `Class` for controllers:
284
284
285
-
* Drop the name "Controller", i.e. use `controller: class TodoComponent {...}` to aid future Angular 2 migration
285
+
* Drop the name "Controller", i.e. use `controller: class TodoComponent {...}` to aid future Angular migration
286
286
* Always use the `constructor` for dependency injection purposes
287
287
* Use [ng-annotate](https://github.com/olov/ng-annotate)'s `'ngInject';` syntax for `$inject` annotations
288
288
* If you need to access the lexical scope, use arrow functions
@@ -297,7 +297,7 @@ Here are some advisories for using `Class` for controllers:
297
297
298
298
### One-way dataflow and Events
299
299
300
-
One-way dataflow was introduced in Angular 1.5, and redefines component communication.
300
+
One-way dataflow was introduced in AngularJS 1.5, and redefines component communication.
301
301
302
302
Here are some advisories for using one-way dataflow:
303
303
@@ -306,8 +306,8 @@ Here are some advisories for using one-way dataflow:
306
306
* Components that have `bindings` should use `$onChanges` to clone the one-way binding data to break Objects passing by reference and updating the parent data
307
307
* Use `$event` as a function argument in the parent method (see stateful example below `$ctrl.addTodo($event)`)
308
308
* Pass an `$event: {}` Object back up from a stateless component (see stateless example below `this.onAddTodo`).
309
-
* Bonus: Use an `EventEmitter` wrapper with `.value()` to mirror Angular 2, avoids manual `$event` Object creation
310
-
* Why? This mirrors Angular 2 and keeps consistency inside every component. It also makes state predictable.
309
+
* Bonus: Use an `EventEmitter` wrapper with `.value()` to mirror Angular, avoids manual `$event` Object creation
310
+
* Why? This mirrors Angular and keeps consistency inside every component. It also makes state predictable.
311
311
312
312
**[Back to top](#table-of-contents)**
313
313
@@ -586,7 +586,7 @@ Due to the fact directives support most of what `.component()` does (template di
586
586
587
587
### Constants or Classes
588
588
589
-
There are a few ways to approach using ES2015 and directives, either with an arrow function and easier assignment, or using an ES2015 `Class`. Choose what's best for you or your team, keep in mind Angular 2 uses `Class`.
589
+
There are a few ways to approach using ES2015 and directives, either with an arrow function and easier assignment, or using an ES2015 `Class`. Choose what's best for you or your team, keep in mind Angular uses `Class`.
590
590
591
591
Here's an example using a constant with an Arrow function an expression wrapper `() => ({})` returning an Object literal (note the usage differences inside `.directive()`):
Using [Webpack](https://webpack.github.io/) we can now use `import` statements on our `.scss` files in our `*.module.js` to let Webpack know to include that file in our stylesheet. Doing this lets us keep our components isolated for both functionality and style, it also aligns more closely to how stylesheets are declared for use in Angular 2. Doing this won't isolate our styles to just that component like it does with Angular 2, the styles will still be usable application wide but its more manageable and makes our applications structure easier to reason about.
703
+
Using [Webpack](https://webpack.github.io/) we can now use `import` statements on our `.scss` files in our `*.module.js` to let Webpack know to include that file in our stylesheet. Doing this lets us keep our components isolated for both functionality and style, it also aligns more closely to how stylesheets are declared for use in Angular. Doing this won't isolate our styles to just that component like it does with Angular, the styles will still be usable application wide but its more manageable and makes our applications structure easier to reason about.
704
704
705
705
If you have some variables or globally used styles like form input elements then these files should still be placed into the root `scss` folder. e.g. `scss/_forms.scss`. These global styles can the be `@imported` into your root module (`app.module.js`) stylesheet like you would normally do.
706
706
@@ -711,7 +711,7 @@ If you have some variables or globally used styles like form input elements then
711
711
##### ES2015
712
712
713
713
* Use [Babel](https://babeljs.io/) to compile your ES2015+ code and any polyfills
714
-
* Consider using [TypeScript](http://www.typescriptlang.org/) to make way for any Angular 2 upgrades
714
+
* Consider using [TypeScript](http://www.typescriptlang.org/) to make way for any Angular upgrades
715
715
716
716
##### Tooling
717
717
* Use `ui-router`[latest alpha](https://github.com/angular-ui/ui-router) (see the Readme) if you want to support component-routing
@@ -728,7 +728,7 @@ If you have some variables or globally used styles like form input elements then
728
728
729
729
# State management
730
730
731
-
Consider using Redux with Angular 1.5 for data management.
731
+
Consider using Redux with AngularJS 1.5 for data management.
Copy file name to clipboardexpand all lines: i18n/es.md
+11-11
Original file line number
Diff line number
Diff line change
@@ -1,14 +1,14 @@
1
-
# Guía de estilo Angular 1.x (ES2015)
1
+
# Guía de estilo AngularJS (ES2015)
2
2
3
3
### Arquitectura, estructura de archivos, componentes, one-way dataflow y buenas prácticas.
4
4
5
5
*Una guía de estilos sensata par equipos, por [@toddmotto](//twitter.com/toddmotto)*
6
6
7
-
Esta arquitectura y guía de estilo ha sido reescrita desde cero para ES2015, los cambios en Angular 1.5+ para la futura actualización de tu aplicación a Angular 2. Esta guía incluye nuevas buenas prácticas para flujos de datos en una dirección, delegación de eventos, arquitectura de componentes y enrutamiento de componentes.
7
+
Esta arquitectura y guía de estilo ha sido reescrita desde cero para ES2015, los cambios en AngularJS 1.5+ para la futura actualización de tu aplicación a Angular. Esta guía incluye nuevas buenas prácticas para flujos de datos en una dirección, delegación de eventos, arquitectura de componentes y enrutamiento de componentes.
8
8
9
9
Puedes encontrar la vieja guía de estilo [aquí](https://github.com/toddmotto/angular-styleguide/tree/angular-old-es5), y el razonamiento detrás de la nueva [aquí](https://toddmotto.com/rewriting-angular-styleguide-angular-2).
10
10
11
-
> Unete a la experiencia Ultimate de AngularJS y domina completamente características básicas y avanzadas de Angular para desarrollar aplicaciones del mundo real que son rápidas y escalables.
11
+
> Unete a la experiencia Ultimate de AngularJS y domina completamente características básicas y avanzadas de AngularJS para desarrollar aplicaciones del mundo real que son rápidas y escalables.
@@ -248,7 +248,7 @@ El nivel más alto de la estructura del directorio contiene simplemente `index.h
248
248
249
249
### Teoría
250
250
251
-
Los componentes son esencialmente plantillas con un controlador. _No_ son directivas, ni debe sustituir las directivas con Componentes, a menos que estes actuliazando "template Directives" con controladores, que son los más adecuados para un componente. Los componentes tambien contienen bindings que definen los inputs y outputs de datos y eventos, lifecycle hooks y la habilidad de utilizar flujos de datos unidireccionales y eventos de objetos para obtener copias de seguridad de un componente padre. Estos son el nuevo estándar de facto en Angular 1.5 y superior. Cualquier template y controlador que creemos será un componente, que puede ser `stateful`, `stateless` o `routed component`. Se puede pensar en un "component" como una pieza completa de código, no solo la definción de objeto del `.component()`. Vamos a explorar algunas de las mejores prácticas y advertencias de los componentes y exploraremos la forma en que deben estructurarse a través de conceptos de componentes stateful, stateless y routed.
251
+
Los componentes son esencialmente plantillas con un controlador. _No_ son directivas, ni debe sustituir las directivas con Componentes, a menos que estes actuliazando "template Directives" con controladores, que son los más adecuados para un componente. Los componentes tambien contienen bindings que definen los inputs y outputs de datos y eventos, lifecycle hooks y la habilidad de utilizar flujos de datos unidireccionales y eventos de objetos para obtener copias de seguridad de un componente padre. Estos son el nuevo estándar de facto en AngularJS 1.5 y superior. Cualquier template y controlador que creemos será un componente, que puede ser `stateful`, `stateless` o `routed component`. Se puede pensar en un "component" como una pieza completa de código, no solo la definción de objeto del `.component()`. Vamos a explorar algunas de las mejores prácticas y advertencias de los componentes y exploraremos la forma en que deben estructurarse a través de conceptos de componentes stateful, stateless y routed.
252
252
253
253
**[Volver arriba](#table-de-contenidos)**
254
254
@@ -288,7 +288,7 @@ Estas son algunas advertencias para usar `Class` en un controlador:
288
288
289
289
### One-way dataflow y Eventos
290
290
291
-
One-way dataflow fue introducido en Angular 1.5, y redefine la comunicación de componentes.
291
+
One-way dataflow fue introducido en AngularJS 1.5, y redefine la comunicación de componentes.
292
292
293
293
Estas son algunas advertencias para usar one-way dataflow:
294
294
@@ -297,8 +297,8 @@ Estas son algunas advertencias para usar one-way dataflow:
297
297
* Los componentes que tengan `bindings` deben itilizar `$onChanges` para clonar el one-way binding data para romper los objetos que para por referencia y actualizar la información de los padres.
298
298
* Utiliza `$event` como un argumento de la función en el método padre (mirá el ejemplo stateful abajo `$ctrl.addTodo($event)`)
299
299
* Pasa un objeto de respaldo `$event: {}` de un stateless component (mirá el ejemplo stateless abajo `this.onAddTodo`)
300
-
* Bonus: Utiliza una wrapper `EventEmitter` con `.value()` para reflejar Angular 2,evita la creación manual de objetos `$event`.
301
-
* ¿Por qué? Este refleja Angular 2 y mantiene la consistencia dentro de cada componente. Si no que también hace un estado predecible.
300
+
* Bonus: Utiliza una wrapper `EventEmitter` con `.value()` para reflejar Angular,evita la creación manual de objetos `$event`.
301
+
* ¿Por qué? Este refleja Angular y mantiene la consistencia dentro de cada componente. Si no que también hace un estado predecible.
302
302
303
303
**[Volver arriba](#table-de-contenidos)**
304
304
@@ -582,7 +582,7 @@ Debido al hecho de que las directivas soportan más que lo hace `.component()` (
582
582
583
583
### Constantes o Clases
584
584
585
-
Hay algunas maneras de abordar el uso de ES2015 y directivas, ya sea con una `arrow function` y la asignación más sencilla, o utilizando una `Clase` de ES2015. Selecciona lo mejor que sea para ti y tu equipo, manten en mente que Angular 2 utiliza clases.
585
+
Hay algunas maneras de abordar el uso de ES2015 y directivas, ya sea con una `arrow function` y la asignación más sencilla, o utilizando una `Clase` de ES2015. Selecciona lo mejor que sea para ti y tu equipo, manten en mente que Angular utiliza clases.
586
586
587
587
Aquí hay un ejemplo utilizando una constante con una `Arrow function` y `expression wrapper`, `() => ({})` regresa un Objeto, (toma en cuenta las diferencias de uso en el interior de `.directive()` ):
588
588
@@ -709,7 +709,7 @@ export default TodoModule;
709
709
##### ES2015
710
710
711
711
* Utiliza [Babel](https://babeljs.io/) para compilar tu código ES2015+ code y cualquier polyfills
712
-
* Considera utilizar [TypeScript](http://www.typescriptlang.org/) para dar paso a cualquier actualización de Angular 2
712
+
* Considera utilizar [TypeScript](http://www.typescriptlang.org/) para dar paso a cualquier actualización de Angular
713
713
714
714
##### Herramientas
715
715
* Utiliza `ui-router`[latest alpha](https://github.com/angular-ui/ui-router) (ve el Readme) si tu quiere soporte de component-routing
@@ -721,7 +721,7 @@ export default TodoModule;
721
721
722
722
# State management
723
723
724
-
Considera el uso de Redux con Angular 1.5 para la gestión de datos.
724
+
Considera el uso de Redux con AngularJS 1.5 para la gestión de datos.
0 commit comments