Guia de Estilo AngularJS

Version original: https://github.com/johnpapa/angularjs-styleguide

Responsabilidad Única:
Regla de 1

Definir un componente por archivo.
Los siguientes ejemplos definen el modulo "app" y sus dependencias, define el controlador y un "factory", todo en el mismo archivo:

/* Evitar */
angular
    .module('app', ['ngRoute'])
    .controller('SomeController', SomeController)
    .factory('someFactory', someFactory);

function SomeController() { }

function someFactory() { }

El mismo componente, ahora separado en archivos

Archivo: app.module.js

/* recommended */

// app.module.js
angular
    .module('app', ['ngRoute']);

Archivo: controlador1.js

/* recommended */
angular
    .module('app')
    .controller('SomeController', SomeController);

function SomeController() { }

Archivo factory1.js

// factory1.js
angular
    .module('app')
    .factory('someFactory', someFactory);

function someFactory() { }

D

IIFE (Invoked Function Expression - Expresión de Invocación de Funcion)
JavaScript Closures

Envuelve los componentes de AngularJS en una IIFE.

Porque?: un IIFE remueve las variables del alcance global. Esto ayuda a prevenir que las variables y las declaraciones de funciones vivan mas de los esperado en el alcance global, lo cual también ayuda a prevenir colisiones entre nombres.

Porque?: Cuando comprimas y reduzcas tu código para colocar en producción, podrías tener muchas colisiones de variables si tienes muchas globales declaradas. Una IIFE te protege contra esto encapsulando las variables en el alcance de cada archivo.

Evitar!!!

// logger.js
angular
    .module('app')
    .factory('logger', logger);

// logger function is added as a global variable
function logger() { }

// storage.js
angular
    .module('app')
    .factory('storage', storage);

// storage function is added as a global variable
function storage() { 

}

Recomendado!!

// logger.js
(function() {
    'use strict';

    angular
        .module('app')
        .factory('logger', logger);

    function logger() { }
})();

// storage.js
(function() {
    'use strict';

    angular
        .module('app')
        .factory('storage', storage);

    function storage() { }
})();

Nota: Solo por brevedad omitiremos la sintaxis IIFE para el resto de la guía

Nota: IIFE's evita las pruebas del código limitando el alcance a los miembros privados con expresiones regulares o funciones de ayuda; las cuales pueden ser lo suficientemente buenas para las pruebas unitarias directamente sobre el mismo objeto, mas no externamente. Sin embargo usted puede probar a través de miembros accesibles o exponiéndolos a través de su propio componente. Por ejemplo, colocando funciones de ayuda, expresiones regulares o constantes en sus propias Factory.