Pasos para crear un proyecto en Angular

Configuración básica
1. Creamos ciertos componentes principales que usaremos (como las diversas secciones
de nuestra página) y revisamos sin son importadas directamente en el app.module.ts
2. En la carpeta App, creamos un fichero de rutas (app.routing.ts) e importamos en él el
ModuleWithProviders de @angular/core y el routes y RouterModule de
@angular/router. Además, importamos los componentes creados por nosotros en el
paso 1.
3. Definimos las rutas dentro de un array de objetos.
4. Const appRoutes: Routes=[
{path: ‘about’, component: AboutComponent}]
5. Exportamos la configuración de las rutas y el routing
6. Importamos este fichero en el app.module.ts y añadimos en imports el routing y en
providers el AppRoutingProviders.
7. COMPILAMOS (ya que nos dará error si no lo hacemos).
8. Nos aseguramos que en el app.component.html tenemos al final del archivo el
<router-outlet>
9. Ejemplo de uso del routerLink:
<ul>
<li><a [routerLink]="['/sobre-mi]">Sobre mí</a></li>
<li><a [routerLink]="['/proyectos]">Proyectos</a></li>
</ul>

Maquetación de la web
1. Creamos en la carpeta assets el archivo styles.css y lo añadimos en el angular.json en
el array de styles.
2. Agregamos en nuestro styles.css en Font-face con las fuentes que queremos utilizar
para nuestra página web (Font-family y src).
3. Referenciamos con los estilos generales (*{ } ) un margin:0px y un padding:0px para
que la referencia sea el extremo izquierdo superior.
4. Recordar el uso de la clase .clearfix{} para limpiar los flotados entre los elementos.
5. Vamos estileando el resto del contenido (section, header,footer,…), recordando
siempre usar los width con porcentaje, los display block o float y sus margin (0 auto
muchas veces), paddings, background: url("../img/pattern.png"), background-
attachment: fixed,…

Comenzamos a maquetar los componentes

Componente básico
1. Iniciar constructor (usar this) y definir propiedades en component.ts
2. Uso de interpolaciones en el component.html -> <h1>{{propiedad_ejemplo}}</h1>
3. Estileado en el styles.css general.
 Componente de conexión con API
1. Abrimos nuestra BBDD y nuestra API-Rest.
2. En el caso de MongoDB, ejecutamos mongod.exe, abrimos la consola, seleccionamos
el directorio donde tenemos nuestra BBDD y escribimos “npm start”. [En este paso
tenemos que tener creado ya nuestra API y la BBDD probándola con el Postman]
3. Creamos en app dos carpetas: models y services. En models vamos a tener nuestro
modelo que va a representar a un objeto de la BBDD, una entidad en sí, por ejemplo si
queremos tener una colección de videojuegos pues cada videojuego sería una entidad
que consta de sus propiedades/atributos.
4. Empezamos creando el model con modelo.ts exportando la clase del modelo, en la que
inicializaremos por parámetros el constructor del modelo. Estos parámetros serán los
mismos que el objeto JSON que queremos recibir desde la API.
5. Ahora crearemos nuestro servicio, aunque antes creamos global.ts va a ser nuestro
archivo de configuración global (como variables que usaremos en varios archivos), en
este caso, la url del localhost para no tener que definirla en cada archivo.
6. Ahora crearemos nuestro modelo.service.ts, que contendrá todos los módulos que
tenemos que hacer para crear un servicio. En este service importamos el Injectable, el
HttpCliente y Headers para poder hacer peticiones AJAX, el Observable (necesidad de
instalar [npm install rxjs-compat - -save], nuestro Modelo y nuestro Global.
7. Invocamos el Injectable y exportamos nuestro ModeloServicio que contendrá un
atributo público de url y un constructor que le pasaremos por parámetro un privado
del cliente http y que hará que la url pública sea igual a la global.
8. Ahora entramos al app.module.ts e importamos los módulos de HttpClientModule
para poder hacer las peticiones AJAX con el Client, y luego el FromsModule para poder
usar el Two-Data Binding y añadirlos al array de imports.
9. Entramos en el componente.ts que tiene la conexión API y le importamos el Modelo y
el ModeloService.
10. Añadimos al @Component un providers: [ModeloService].
11. La variable que modificará el formulario será una de tipo Modelo. Su constructor
tendrá un atributo private _modeloService: ModeloService para la conexión con la Api
y en el cuerpo del constructor crearemos un nuevo objeto Modelo vacío.
12. En el html del componente, vamos a agregar un formulario que tendrá una forma
parecida a la siguiente:
<form #projectForm="ngForm" (ngSubmit)="onSubmit(projectForm)">
</form>
13. En el component.ts crearemos todo tipo de función que tengamos que implementar.
14. Un tipo de input de nuestro formulario de angular tendrá una forma así:
<input type="text" name="name" #name="ngModel" [(ngModel)]="project.name">
En la que el [(ngModel)] es el two-data binding para modificar la propiedad del objeto
(en este caso, la name del project) y el #name=”ngModel” declara que es un modelo
de Angular.
15. Ejemplo de validaciones:
<span *ngIf="name.touched && !name.valid"> El nombre es obligatorio </span>
Uso de *ngIf
16. En nuestro modelo.service.ts es donde vamos a definir las funciones que tendrá
comunicación con la BBDD. Ejemplo de función:
 saveProject(modelo: Modelo): Observable<any>{
let params = JSON.stringify(project);
//Necesitamos que sea un string para que la API pueda reconocerlo
let headers = new HttpHeaders().set('Content-Type','application/json');
return this._http.post(this.url+'/save-project', params, {headers:headers});
}
17. Para probar la función creada, usaremos en el component.ts, la líneas:
this._modeloService.saveProject(this.modelo).subscribe(
response=>{
console.log(response);
},
error=>{
console.log(<any>error);
});
//El método suscribe permite recoger lo que devuleva la API rest y suscribirse al
Observable para recoger los resultados
18. Para la subida de ficheros, suele haber una forma “estandarizada” de hacerlo, por lo
que revisar en el proyecto personal como hacerlo.

Sacar archivos de la BBDD

19. Creamos la función en el modelo.service.ts de tipo Observavle<any> y configuramos
los headers y hacemos la http.get
20. Ahora en la página que queremos sacar los datos de la BBDD importamos lo necesario
y definimos la función getProjects y hacemos que se suscriba al AJAX.
21. En el html del componente de la página podemos recorrer un bucle de angular que nos
recorra lo que nos vino de la BBDD:
<li *ngFor="let project of projects">{{project.name}}</li>
22. Para poder hacer que el backend nos devuelva una imagen, previamente tenemos que
tener esa función en controller del backend definida.
23. Una vez definido, vamos a hacer que se nos muestre en nuestro html:

<div class="image">

<img src="{{url+'get-image/'+project.image}}" *ngIf="project.image">

</div>

24. Y ahora maquetaríamos el CSS globlal.