logongas

Esta página es de solo lectura. Puedes ver la fuente pero no puedes cambiarla. Pregunta a tu administrador si crees que esto es incorrecto.
======  7. Arquitectura  ======
Vamos finalmente a unificar todo y crear la arquitectura definitiva que vamos a usar en clase.

Para crear una buena arquitectura vamos a hacer lo siguiente:
  * [[#Indicar a Angular que el proyecto es en Español]]
  * [[#Añadir Angular Material]]
  * [[#Crear el CSS común a todo el proyecto]]
  * [[#Crear los Componentes reusables de Angular]]
  * [[#Crear las páginas del proyecto.]]

===== Indicar a Angular que el proyecto es en Español =====
Véase: [[clase:daw:diw:1eval:tema02#establecer_el_idioma_y_moneda]]


===== Usar Angular Material =====
Véase: [[clase:daw:diw:1eval:tema02#anadir_angular_material]]

<sxh gutter:false>
src/app/scss
    /01_utilities
    /02_base
    /03_global
    /04_components
    main.scss
src/app/components/ui
    /c-button
    /c-panel
src/app/components/paginas
   /main
   /productos
   /login
</sxh>

===== Crear el CSS común a todo el proyecto =====
Se tiene que crear la carpeta ''src/app/scss'' donde irá todo nuestro SASS. El fichero que contendrá todo el SASS es ''src/app/scss/main.scss''

En el fichero ''styles.scss'' añadir la linea siguiente para que Angular sepa donde está nuestro SASS:
<sxh sass;title:styles.scss>
@use './app/scss/main.scss' as *;
</sxh>


Dentro de la carpeta ''src/app/scss'' , habrá la siguiente estructura de ficheros:

<sxh gutter:false>
  src/app/scss
     /01_utilities
        _variables.scss
        _functions.scss
        _mixins.scss
        _index.scss

    /02_base
        _reset.scss
        _typography.scss
        _index.scss


    /03_global
        _cada_una_de_los_modificadores_globales.scss
        _index.scss


    /04_components
        _cada_uno_de_los_componentes.scss
        _index.scss        

         
    main.scss

</sxh>


La explicación de cada carpeta es la siguiente:

  * /01_utilities
    * _variables.scss: Variables de **SASS** como por ejemplo los colores o tamaños de margen ,etc
    * _functions.scss: Funciones de SASS
    * _mixins.scss: Mixins de SASS
    * _index.scss: Los //imports// de cada fichero de esta carpeta.
<sxh sass>
@forward "./_variables.scss";
@forward "./_functions.scss";
@forward "./_mixins.scss";
</sxh>

  * /02_base
    * _reset.scss: El reset que usemos
    * _typography.scss: Para importar tipos de letra
    * _index.scss: Los //imports// de cada fichero de esta carpeta.
<sxh sass>
@forward "./_reset.scss";
@forward "./_typography.scss";
</sxh>
  * /03_global
    * _cada_una_de_los_modificadores globales.scss: Habrá un fichero por cada tipo de modificador que haya. Por ejemplo ''_g--margin.scss'', ''_g--padding.scss'', ''_font-size.scss'' o ''_color.scss''. Más información en [[clase:daw:diw:1eval:tema03.c]] , [[[clase:daw:diw:1eval:tema04]], [[clase:daw:diw:1eval:tema05]]
    * _index.scss: Los //imports// de cada fichero de esta carpeta.
<sxh sass>
@forward "./color";
@forward "./font-size";
@forward "./margin";
@forward "./padding";
</sxh> 
  * /04_components
    * _cada_uno_de_los_componentes.scss: Habrá un fichero por cada Bloque que sea de tipo Componente pero que **NO sean de Angular**. Por ejemplo ''_c-button.scss'', ''_l-flex.scss'' , ''_l-columns.scss'' o ''_c-panel.scss''. Más información en [[clase:daw:diw:1eval:tema03.c]] , [[[clase:daw:diw:1eval:tema04]], [[clase:daw:diw:1eval:tema05]], [[clase:daw:diw:1eval:tema06]]
    * _index.scss: Los //imports// de cada fichero de esta carpeta.
<sxh sass>
@forward "./_c-button.scss";
@forward "./_c-panel.scss";
@forward "./_l-columns.scss";
@forward "./_l-flex.scss";
</sxh> 

  * main.scss: Aquí se agrupa todo el código de SASS y es el único fichero que se transforma en CSS.
<sxh sass;title:main.scss>
@forward "./02_base";
@forward "./03_components";
@forward "./04_global";
</sxh>


Dentro de cada fichero ''.scss'' que use algo de las utilidaes (como variables, SASS, funciones o utilidades) se añadirá la referencia a las utilidades con la siguiente linea:

<sxh sass>
@use "../01_utilidades/index" as utilidades;
</sxh>


<note warning>
Al crear el CSS/SASS es importante seguir las directrices de:
  * BEM: [[clase:daw:diw:1eval:tema03.c]]
  * Variables: [[clase:daw:diw:1eval:tema04#variables_css]]
</note>



===== Crear los Componentes reusables de Angular =====
Ahora hay que crear la carpeta donde estarán nuestros componentes de Angular. Para ello crearemos la carpeta ''src/app/components/ui''.
En esta carpeta deben estar todos los componentes **reusables** por toda la aplicación.

<sxh gutter:false>
  src/app/components/ui
     /c-button
        c-button.ts
        c-button.html
        c-button.scss

    /c-panel
        c-panel.ts
        c-panel.html
        c-panel.scss
       
    /l-flex
        l-flex.ts
        l-flex.html
        l-flex.scss        
        
</sxh>


Para crear el SCSS se seguirán las mismas normas que al crear el SCSS común a todo el proyecto.

Más información en:
  * [[clase:daw:diw:1eval:tema03]]
  * [[clase:daw:diw:1eval:tema03.b]]
  * [[clase:daw:diw:1eval:tema03.c]]
  * [[[clase:daw:diw:1eval:tema04]]
  * [[clase:daw:diw:1eval:tema05]]
  * [[clase:daw:diw:1eval:tema06]]


<note important>
Notar la diferencia por ejemplo entre el fichero ''src/app/scss/03_components/l-flex'' y la carpeta ''src/app/components/ui/l-flex''

  * ''src/app/scss/03_components/l-flex'': Estamos creando clases CSS para flex
  * ''src/app/components/ui/l-flex'': Estamos creando componentes o atributos Angular para flex

Lo normal es que esté uno o el otro. Lo mismo se podría aplicar a cualquier otro layout o componentes como ''c-button''.

</note>


===== Crear las páginas del proyecto. =====
Finalmente en la carpeta ''src/app/components/paginas'', añadiremos todos los componentes específicos de la aplicación. Aquí es donde se hace uso de los distintos elementos reusables que creamos en ''src/app/components/ui''









//
//
//
//



//
//
//
//



//
//
//
//



//
//
//
//







===== CSS linters =====
Angular incluye de serie una herramienta de procesamiento CSS llamada [[https://postcss.org/|PostCSS]]. Esta herramienta lee el CSS y permite analizarlo o hacer modificaciones.

PostCSS está basado en plugins que permiten extender PostCSS con nuevos análisis o modificaciones.A las herramientas que analizan el código para ver si tiene "problemas" se le llaman //linters//.

Nosotros vamos a usar PostCSS para analizar nuestro CSS y ver si cumple las normas de SUIT CSS. El plugin o linter que vamos a usar es [[https://github.com/postcss/postcss-bem-linter|postcss-bem-linter]].

Los pasos para instalarlo son

  * Descargar el linter

<sxh bash>
npm install --save-dev postcss-bem-linter
</sxh>

  * Crear/modificar el fichero ''.postcssrc.json''. Debe estar en el raíz del proyecto.

<sxh json; highlight: [4]>
{
  "plugins": {
    "postcss-bem-linter": {
      "preset": "bem"
    }
  }
}
</sxh>