Skip to content

Commit 95a94a1

Browse files
bastienmouliatoddmotto
authored andcommitted
Rename AngularJs and Angular name (toddmotto#150)
* Rename AngularJs and Angular name Following http://angularjs.blogspot.fr/2017/01/branding-guidelines-for-angular-and.html Angular 1 was rename AngularJs Angular 2 was rename Angular * Rename AngularJs in AngularJS and changes for i18n
1 parent d5e980c commit 95a94a1

File tree

8 files changed

+83
-83
lines changed

8 files changed

+83
-83
lines changed

README.md

+15-15
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
# Angular 1.x styleguide (ES2015)
1+
# AngularJS styleguide (ES2015)
22

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.
44

55
---
66

@@ -10,11 +10,11 @@
1010

1111
*A sensible styleguide for teams by [@toddmotto](//twitter.com/toddmotto)*
1212

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.
1414

1515
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).
1616

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.
1818
1919
<a href="https://ultimateangular.com" target="_blank"><img src="https://toddmotto.com/img/ua.png?ua"></a>
2020

@@ -173,7 +173,7 @@ export const CalendarModule = angular
173173

174174
### File naming conventions
175175

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 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.
177177

178178
```
179179
calendar.module.js
@@ -256,7 +256,7 @@ The high level folder structure simply contains `index.html` and `app/`, a direc
256256

257257
### Component theory
258258

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.
260260

261261
**[Back to top](#table-of-contents)**
262262

@@ -282,7 +282,7 @@ Controllers should only be used alongside components, never anywhere else. If yo
282282

283283
Here are some advisories for using `Class` for controllers:
284284

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
286286
* Always use the `constructor` for dependency injection purposes
287287
* Use [ng-annotate](https://github.com/olov/ng-annotate)'s `'ngInject';` syntax for `$inject` annotations
288288
* If you need to access the lexical scope, use arrow functions
@@ -297,7 +297,7 @@ Here are some advisories for using `Class` for controllers:
297297

298298
### One-way dataflow and Events
299299

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.
301301

302302
Here are some advisories for using one-way dataflow:
303303

@@ -306,8 +306,8 @@ Here are some advisories for using one-way dataflow:
306306
* 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
307307
* Use `$event` as a function argument in the parent method (see stateful example below `$ctrl.addTodo($event)`)
308308
* 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.
311311

312312
**[Back to top](#table-of-contents)**
313313

@@ -586,7 +586,7 @@ Due to the fact directives support most of what `.component()` does (template di
586586

587587
### Constants or Classes
588588

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`.
590590

591591
Here's an example using a constant with an Arrow function an expression wrapper `() => ({})` returning an Object literal (note the usage differences inside `.directive()`):
592592

@@ -700,7 +700,7 @@ export const TodoModule = angular
700700

701701
# Styles
702702

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 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.
704704

705705
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.
706706

@@ -711,7 +711,7 @@ If you have some variables or globally used styles like form input elements then
711711
##### ES2015
712712

713713
* 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
715715

716716
##### Tooling
717717
* 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
728728

729729
# State management
730730

731-
Consider using Redux with Angular 1.5 for data management.
731+
Consider using Redux with AngularJS 1.5 for data management.
732732

733733
* [Angular Redux](https://github.com/angular-redux/ng-redux)
734734

@@ -747,7 +747,7 @@ Consider using Redux with Angular 1.5 for data management.
747747
**[Back to top](#table-of-contents)**
748748

749749
# Documentation
750-
For anything else, including API reference, check the [Angular documentation](//docs.angularjs.org/api).
750+
For anything else, including API reference, check the [AngularJS documentation](//docs.angularjs.org/api).
751751

752752
# Contributing
753753

i18n/es.md

+11-11
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
1-
# Guía de estilo Angular 1.x (ES2015)
1+
# Guía de estilo AngularJS (ES2015)
22

33
### Arquitectura, estructura de archivos, componentes, one-way dataflow y buenas prácticas.
44

55
*Una guía de estilos sensata par equipos, por [@toddmotto](//twitter.com/toddmotto)*
66

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.
88

99
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).
1010

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.
1212
1313
<a href="https://courses.toddmotto.com" target="_blank"><img src="https://toddmotto.com/img/ua.png"></a>
1414

@@ -248,7 +248,7 @@ El nivel más alto de la estructura del directorio contiene simplemente `index.h
248248

249249
### Teoría
250250

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.
252252

253253
**[Volver arriba](#table-de-contenidos)**
254254

@@ -288,7 +288,7 @@ Estas son algunas advertencias para usar `Class` en un controlador:
288288

289289
### One-way dataflow y Eventos
290290

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.
292292

293293
Estas son algunas advertencias para usar one-way dataflow:
294294

@@ -297,8 +297,8 @@ Estas son algunas advertencias para usar one-way dataflow:
297297
* 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.
298298
* Utiliza `$event` como un argumento de la función en el método padre (mirá el ejemplo stateful abajo `$ctrl.addTodo($event)`)
299299
* 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.
302302

303303
**[Volver arriba](#table-de-contenidos)**
304304

@@ -582,7 +582,7 @@ Debido al hecho de que las directivas soportan más que lo hace `.component()` (
582582

583583
### Constantes o Clases
584584

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.
586586

587587
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()` ):
588588

@@ -709,7 +709,7 @@ export default TodoModule;
709709
##### ES2015
710710

711711
* 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
713713

714714
##### Herramientas
715715
* 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;
721721

722722
# State management
723723

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.
725725

726726
* [Angular Redux](https://github.com/angular-redux/ng-redux)
727727

@@ -739,7 +739,7 @@ Considera el uso de Redux con Angular 1.5 para la gestión de datos.
739739
**[Volver arriba](#table-de-contenidos)**
740740

741741
# Documentación
742-
Para algo más, incluyendo referencia al API, revisa la [documentación de Angular](//docs.angularjs.org/api).
742+
Para algo más, incluyendo referencia al API, revisa la [documentación de AngularJS](//docs.angularjs.org/api).
743743

744744
# Contribuyendo
745745

0 commit comments

Comments
 (0)