Angular 4 – Crear componentes con angular cli

Hoy vamos a centrarnos en crear un proyecto nuevo en angular 4

Angular cli

en angular cli vamos a usar los siguientes comandos , vamos a localizarlo en la carpeta que queremos guardar nuestro proyecto y vamos a escribir lo siguiente:

ng new NombredeProyecto

Con esto vamos a descargar el último proyecto, en este post explicamos los primeros pasos de angular.

una vez termine angular cli vamos a comenzar a crear nuestros componentes

ng g component nombrecomponente

o

ng g service nombredeservicio

nota: un servicio es el que conectara con un webservices y component es nuestra web

Ejecutar el proyecto

para ejecutar el proyecto no necesitamos XAMPP o WAMPServices, angular tiene su propio sistema que lo ejecutaremos de la siguiente manera

ng serve –open

este talvez tarde un poco la primera vez, pero tengan paciencia, la ventaja aquí es que una vez corriendo si modificamos algo, automáticamente va a refrescar.

Esta es nuestro holamundo o pantalla inicial de angular, vamos a actualizar algunas cosas y cambiarlas, por el momento usare Firebase y Material Desing de angular.

AngularFire 2

Angular fire es una extensión del mismo angular para soportar las bases de datos de firebase

vamos a instalarlo en nuestro proyecto colocandonos en la carpeta raíz y escribiendo en nuestro cmd/consola de comandos la siguiente línea:

npm install firebase angularfire2 –save

Material desing

Material desing viene desde angularjs, y se ha actualizado muchas veces para ser mas estables para instalarlo es:

npm install –save @angular/material @angular/cdk

*si ustedes desean usar alguna otra librería, no me centraré tanto en material design si no en el funcionamiento de angular.

Nuestro primer Componente

Les recomiendo que usen VisualStudio Code ya que es bastante rápido.

Vamos ir a index> src/index.html

vamos a poner la siguiente línea en head

<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet">

este son los iconos de Google material icon, que usaremos para después.

Vamos a buscar en app los siguientes archivos:

• app.component.html
• app.component.ts
• app.component.css

En estos archivos son donde ocurre nuestro primer contacto con angular,

si crearon una estructura con “component” angular cli verán que hay muchas carpetas , cada carpeta contará con tres archivos similares a los que mencione arriba, esto es la divicion entre Vista y controlador

Component HTML

Si abrimos app.component.html, vamos a ver todo el código html común y vamos a ver una variable llamado {{title}}, este es una anotación en angular que te dice que insertará el valor de una variable de javascript.

Abriendo el archivo ts

Recuerden ts viene de typeScript y vamos a explicar qué es lo que estamos viendo:

import { Component } from ‘@angular/core’;

@Component({

selector:’app-root’,

templateUrl:’./app.component.html’,

styleUrls: [‘./app.component.css’]

})

export class AppComponent {

title=’app’;

}

title=’Hola mundo esto es tutorial de angular’

h1 {

color: red;

}

h2 {

color: blue;

text-align: center;

}

<div style=”text-align:center”>

<h1>

{{title}}!

</h1>

<imgwidth=”300″src=”https://unprogramador.com/wp-content/uploads/2017/08/giphy-downsized.gif”>

</div>

<h2>Primer componente </h2>

import { Component } from ‘@angular/core’;

@Component({

selector:’app-root’,

templateUrl:’./app.component.html’,

styleUrls: [‘./app.component.css’]

})

export class AppComponent {

title=’Hola mundo esto es tutorial de angular’;

}