Arquitectura de archivos en angular.js

readme.md

Arquitectura de archivos en angular.js

Cuando desarrollamos aplicaciones con el framework angular.js tenemos que prestar atención a la estructura de archivos.

1. Objetivo y descripción
2. Dependencias
3. Puesta en marcha
4. Referencias
5. Créditos y autor

Objetivo y descripción

Cuando la aplicación es medianamente grande o muy grande debemos buscar una correcta distribución de archivos, estos se pueden separar por tipo de componente (controller, directives, services, etc) o separarlos por lógica de negocio (users, system, general, autentication, etc) o en su defecto hacer un híbrido entre estas dos distribuciones.

Tipos de arquitectura de archivos

Existen dos tipos de arquitectura de distribución de archivos:

• Arquitectura por componentes: Es más apropiado utilizarlo para aplicaciones pequeñas, para este caso se deben utilizar un archivo por cada tipo de componente:

  • Controllers: Estos deben de tener toda interacción con el usuario y delegar tareas entre los diferentes servicios.
  • Directives: Aquí debemos de colocar toda la lógica de componentes reutilizables para la aplicación y el manejo del dom.
  • Services: En este archivo debemos tener la lógica de modelos de datos, el formato de datos y las peticiones al servicios.
  • Carpeta Views: Aquí colocamos todas las vistas que necesite nuestra aplicación.

• Arquitectura por funcionalidad: La arquitectura por lógica se debe utilizar para aplicaciones medianamente grandes, ya que nos permite colocar en carpetas por lógica del negocio o funcionalidad un componente de cada tipo, esto nos ayuda a en un futuro poder reutilizar esa funcionalidad porque debe estar aislada y ser modular.

Dependencias

• Angular.js - Web front-end framework.

Puesta en marcha

Ejecución del script

Acompañado de este escrito tienes el archivo angular-generator.sh, es un archivo bash de fácil ejecución.

• Paso 1: Ejecuta el archivo de la siguiente manera sh angular-generator.sh.
• Paso 2: El programa te pedirá el nombre de la aplicación.
• Paso 3: El programa te pedirá el tipo de arquitectura de archivos.
• Paso 4.1 (Por tipo): Si eliges esta opción el programa generar los archivos y terminara.
• Paso 4.2 (Por funcionalidad): Si eliges esta opción el programa te preguntara cual es el nombre de la funcionalidad que deseas agregar.

El programa generará estructuras de archivos como la siguiente:

Por tipo de componente

Por funcionalidad

Referencias

• Code Organization in Large AngularJS and JavaScript Applications:
  • Code Organization

Créditos y autor

• Autor del snippet: Mario Andrade @TheVansters
• Los snippets pertenecen a KamikazeLab

zngular-generator-by-logic.sh

#!/bin/bash

# Components array name
componentsArray=(AppInit.js Controller.js Directives.js Services.js)

# Create base file structure
function createBaseDir {

echo '>> Init create app By component type: \n\t+ Create dir '$appName'/'
echo '\t+ Create file '$appName'/index.html'
echo '\t+ Create dir  '$appName'/public/'
echo '\t+ Create dir  '$appName'/public/js/'
echo '\t+ Create dir  '$appName'/public/views/'

rm -r -f $appName
mkdir $appName 
touch $appName/index.html
mkdir $appName/public
mkdir $appName/public/js
mkdir $appName/public/views

}

function createFeatureDir {

echo '\t+ Create feature dir '${appName}'/public/js/'${feature}''
mkdir ${appName}'/public/js/'${feature}

for item in ${componentsArray[*]}
do
    echo '\t+ Create file '$appName/public/js/${feature}/${feature}Angular${item}''
    touch $appName/public/js/${feature}/${feature}Angular${item}
done
echo '\t+ Create views dir  '$appName/public/views/${feature}
mkdir $appName/public/views/${feature}
echo '-----------------------------------------------------'
}

function createAppByType {

createBaseDir

for item in ${componentsArray[*]}
do
    echo '\t+ Create file '$appName/public/js/${appName}Angular${item}''
    touch $appName/public/js/${appName}Angular${item}
done

echo 'Bye ... n_n'

}


function createAppByFeature {

createBaseDir

echo '>> Name of the first feature:'
read feature

createFeatureDir

answer='yes'

until [ $answer == 'no' ]
do
    echo '>> You want to create another feature ? (yes/no):'
    read answer

    if [ $answer  = 'yes' ];
    then
    echo '>> Name of the new feature:'
    read feature

    createFeatureDir

    else

    echo 'Bye ... n_n'
    exit 0

    fi
done

}



echo ">> Application name ? "
read appName

echo ">> What kind of architecture files you need ? \n[1] By componenet type \n[2] By feature type"
read appType

if [ $appType  = 1 ];
then

createAppByType

exit 0
elif [ $appType = 2 ];
then

createAppByFeature

else

echo '<< Error invalid option.'
echo 'Bye ... n_n'
exit 0

fi