El documento proporciona pautas para escribir código limpio en AngularJS siguiendo los principios LIFT (localizar, identificar, estructura plana, no repetirse) y recomendaciones sobre la organización y nomenclatura de archivos, módulos, controladores, servicios, directivas, pruebas y documentación. En particular, recomienda utilizar livetemplates para estructurar los objetos, definir módulos al principio con funciones relacionadas, usar controllerAs, separar la lógica en servicios/fábricas, y

1. AngularJS Patterns: Clean Code

2. Principio LIFT
● L: Locating: localizar nuestro código
● I: Identify: Identificar el código de un vistazo
● F: Estructura plana, max 7 niveles directorios
● T: Don't repeat yourself

3. Pautas de nombre
● Nombres que se entiendan, no utilizar
abreviaciones complicadas.
● Archivo: feature.type.js ex: personas.service.js
● Interno: FeatureType ex: PersonasController
● Camel-casting para servicios o factorías
● Directivas: usar un prefijo propio, como: masp-
● Primera minúscula en nombres de archivos o
funciones, pero mayúscula en el nombre de
controlador, servicio, factoría...

4. Organización ficheros
● directives/
– masp_input_translated/
● masp_input_translated.js
● masp_input_translated.jade
● masp_input_translated.spec.js
● services/
– service.js
● modules/
– sections/
● directives/
● sections.js
● sections.spec.js
● sectionsService.js
● sections.jade
● sections_form.jade
● additionalConcept.js
● additionalConcept.espec.js
● ...
Common
Modul

5. Single Responsibility: Closures

6. Módulos: Definición
Declara los módulos sin usar una variable,
usando la sintaxis de los setters y getters.
Setea sólo una vez y usa get para el resto de instancias

7. Funciones: siempre con nombre
Evitar las funciones anónimas en los callbacks

8. Controladores
● Usar siempre controllerAs en lugar del clásico controlador
con $scope
● La sintaxis controllerAs usa this dentro de los controladores
que se asocian al $scope
● Considerar usar el $scope en una factory, evitar su uso en el
controlador
● No usar para interaccionar con el DOM o para manipular
datos.

9. Controladores: Bindeables Arriba
The Revealing Module Pattern

10. Controladores: Diferir la Lógica
● Difiera la lógica dentro de un controlador delegándola a
servicios y fábricas.

11. Rutas: Asignando Controladores

12. Directivas
● 1 directiva por archivo
● Manipulación del DOM dentro de las directivas, aunque si
es posible mejor manipularlo por CSS
● Utilizar un prefijo corto, propio, ej: masp-
● Evitar el uso de directivas por “clase”
● Usa bindToController = true cuando uses controller as con
una directiva cuando quieras asociar el scope exterior al
scope del controller de la directiva.

13. Resolver dependencias
● Utilitzar el “reload()” dentro de un controlador
● Si hay “query's” impresindibles, cargarlos en el
routeProvider en el “resolve”

14. Manejo de Excepciones
● Decoratores: Realizar acciones personalizadas
cuando una excepción ocurra.
● Cachadores de excepciones
● Errores de ruta: Mejora la experiencia de
usuario si hay un error de enrutamiento y lo
redirigimos a una pantalla amigable.

15. Testing
● Naming: archivos finalizados con: .spec.js
● Usaremos Mocha & Chai
● Usaremos Karma como test runner: solo tendremos que
incluir los ficheros que queremos testear
● Usar SinionJS para “stubbing and Spying” = simular AJAX,
servers, timers...
● Usar PhantomJS como Headless Browser
Masterpkg test or masterpkg test-dev & karma.conf.js con
solo los files[] a testear
● Ejemplos de test en angularjs: link

16. JsDoc
● Utilizar jsDoc
para documentar

17. Otros
● Servicios $ de angular: Usar $document,
$window, $timeout y $interval en vez de los
propios de JavaScript
● Utilizar “live templates” en webstorm o sublime

18. Resumen
● Utilizar livetemplates para ver las estructuras de cada
objeto
● Modulo definido en la cabecera, con funciones
relacionadas (inject separado)
● Utilizar controllerAs: “vm” & var vm = this;
● Ordenar: definición variables, binding de funciones,
funciones.
● Servicios = datos // factories = funciones.
● Modificar DOM en directivas.
● No modificar ni datos ni DOM en los controladores.