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.

Véase: establecer_el_idioma_y_moneda

Véase: anadir_angular_material

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:

@use './app/scss/main.scss' as *;

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

  src/app/scss
     /01_utilities
        _variables.scss
        _functions.scss
        _mixins.scss
        _index.scss

    /02_base
        _reset.scss
        _typography.scss
        _index.scss
 
    /03_layout
        _cada_uno_de_los_layouts.scss
        _index.scss

    /04_components
        _cada_uno_de_los_componentes.scss
        _index.scss        

    /05_global
        _cada_una_de_los_modificadores_globales.scss
        _index.scss
         
    main.scss

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.

@forward "./_sass-variables.scss";
@forward "./_functions.scss";
@forward "./_mixins.scss";

• /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.

@forward "./_reset.scss";
@forward "./_typography.scss";

• /03_layout
  • _cada_uno_de_los_layouts.scss: Habrá un fichero por cada Bloque que sea de tipo layout. Por ejemplo _l-flex.scss y _l-columns.scss. Más información en 3. Creación de componentes: BEM , 4. CSS, 5. SASS, 6. Flex y Grid
  • _index.scss: Los imports de cada fichero de esta carpeta.

@forward "./_l-columns.scss";
@forward "./_l-flex.scss";

• /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 o _c-panel.scss. Más información en 3. Creación de componentes: BEM , 4. CSS, 5. SASS
  • _index.scss: Los imports de cada fichero de esta carpeta.

@forward "./_c-button.scss";
@forward "./_c-panel.scss";

• /05_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 3. Creación de componentes: BEM , 4. CSS, 5. SASS
  • _index.scss: Los imports de cada fichero de esta carpeta.

@forward "./color";
@forward "./font-size";
@forward "./margin";
@forward "./padding";

• main.scss: Aquí se agrupa todo el código de SASS y es el único fichero que se transforma en CSS.

@forward "./02_base";
@forward "./03_layouts";
@forward "./04_components";
@forward "./05_global";

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:

@use "../01_utilidades/index" as utilidades;

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.

  src/app/components/ui
     /c-button
        c-button.ts
        c-button.html
        c-button.css

    /c-panel
        c-panel.ts
        c-panel.html
        c-panel.css
       
    /l-flex
        l-flex.ts
        l-flex.html
        l-flex.css        
        

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:

• 3. Creación de componentes
• 3. Creación de componentes: Atributos
• 3. Creación de componentes: BEM
• 4. CSS
• 5. SASS
• 6. Flex y Grid

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