Diferències

Ací es mostren les diferències entre la revisió seleccionada i la versió actual de la pàgina.

Enllaç a la visualització de la comparació

development:angular:estructura [25/01/2020 10:17] – creat matedevelopment:angular:estructura [26/01/2020 01:28] (actual) mate
Línia 16: Línia 16:
     * deja rastro     * deja rastro
   * **package.json**   * **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**
 +
  • development/angular/estructura.1579976233.txt.gz
  • Darrera modificació: 25/01/2020 10:17
  • per mate