angular: estructura proyecto [miguel angel torres egea]

Aquesta pàgina és només de lectura. Podeu veure'n el codi font, però no podeu canviar-la. Consulteu el vostre administrador si penseu que això és degut a algun error.
= angular: estructura proyecto
  * **e2e**:
    * pruebas extremo a extremo, simulación interacción con humano
    * angular-cli configura este directorio de forma automática
  * **node_modules**:
    * multitud paquetes de ayuda al desarrollo
    * cuando se genera la aplicación, solo se coge lo estrictamente necesario
    * esta carpeta ha de quedar fuera del repositorio o copia de seguridad
      * ''npm install'' regenera/descarga los ficheros según la información de **package.json**
  * **angular.json**
    * como es y como funciona nuestra app
    * partes importantes: assets, styles, scripts
  * **package-lock.json**
    * generación automática
    * le indica a la parte de Node.js como se creó package.json
    * deja rastro
  * **package.json**
    * muy importante
    * generado y mantenido de manera automática
    * información, dependendias de nuestro proyecto
  * **tsconfig.json**
    * indica a TypeScript como trabajar
  * **tslint.json**
    * define reglas de sintaxis para escribir código más límpio
    * genera error en el IDE si no las cumplimos
  * **src/**
    * codigo fuente de la app
    * src/index.html
      * fichero de inicio, html 5, con tags específicos (placeholder) para colocar nuestra app
      * ''<app-root></app-root>'' por defecto
    * src/app/
      * app angular
      * src/app/app.component.spec.ts:
        * pruebas unitarias (se usa **spec** para identificarlos)
      * src/app/app.component.ts
        * contiene el código que rellenará la etiqueta ''<app-root/>'' indicado en la directica **selector**
        * <sxh javascript>import { Component } from '@angular/core‘;

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})

export class AppComponent {
    nombre = 'Peter';
    apellido = 'Parker';
}</sxh>
      * src/app/app.component.html
        * contiene el HTML que se usa desde el .ts que será inyectado en ''<app-root/>'' según la directiva **templateURL**
        * <sxh html; title=app.component.html><h1>Hola mundo</h1>
<ul>
    <li>Nombre: {{nombre}}</li>
    <li>Apellido: {{apellido}}</li>
</ul></sxh>
      * src/app/qpp.component.css: contiene el código CSS para **app.component.html**
      * src/app/app.module.ts:
        * clase que define un decorador llamado **ngModule** (se verá más adelante)
        * lo manipularemos a conveniencia
    * src/assets/:
      * recursos estáticos: imágenes, audios, vídeos...
      * src/assets/.gitkeep:
        * fichero para que git siempre suba el directorio **assets**
        * nombre por convención
    * src/environments:
      * archivos con variables de entorno según estemos en producción o desarrollo
    * src/browserlist
      * desde Angular 6
      * casos de incompatibilidad con navegadores (normalmente versiones antiguas)
    * src/karma.conf.js
      * archivo configuración test unitarios
    * src/main.ts
      * primer fichero analizado por Angular
      * define, entre otras cosas, el tipo de aplicación (web, móvil, ...)
    * src/polyfills.ts
      * ayuda a compatibilizar versiones viejas de navegadores
    * src/styles.css
      * estilos globales de la app
    * src/test.ts
      * relativo a los test unitarios con **karma**
      * requerido por **karma.conf.js** para cargar recursivamente los ficheros **.spec**
    * src/tsconfig.app.json:
      * configuraciones de TypeScript relativas a la app
      * amplia **tsconfig.json**
    * src/tsconfig.spec.json
      * configuraciones relativas a las pruebas unitarias
      * amplia el fichero **tsconfig.json**
    * src/tslint.json
      * especifica como se van a mostrar los errores de JS/TS en el IDE
      * amplia el fichero **tslint.json**