Primeros Pasos

Angular 2 como habíamos publicado anteriormente es un framework muy poderoso que da apoyo google, y cada dia hay mas y mas programadores aportando en mejoras, después de usarlo por unos meses y hacer varios proyectos, es momento de iniciar con estos tutoriales.

Instalación de NodeJS

lo primero que tenemos que bajar nodejs ya que es el corazón de nuestro proyecto para esto entramos al siguiente link.

una vez instalado en el cmd podemos poner :

Node -v

si nos sale que version es, felicidades tienes node instalado.

Instalación de Angular Cli

para angular cli usaremos el NPM  de node js, para esto abriremos cmd preferentemente en modo administrador y escribiremos lo siguiente

npm install -g @angular/cli

tardará unos minutos dependiendo la conexión de tu internet, una vez terminado nos ubicamos en documentos con el comando cd en cmd.

si ya estamos en mi documentos o en alguna carpeta que vamos a trabajar vamos a colocar el siguiente comando

ng new holamundo

con ng new vamos a bajar la última versión de angular  y nos creará la semilla inicial.

ahora usaremos

cd holamundo

ng serve

con ng serve lo que hacemos es que generamos un servidor temporal, y podremos ver nuestros cambios en la ruta:

localhost:4200

podemos cambiar nuestros puertos o nuestro host con el siguiente comando

ng serve –host 0.0.0.0 –port 4201

si entramos en localhost:4200 vamos a ver nuestra primera web con angular 🙂

¿Qué es lo que estoy mirando?

si analizamos un poco las carpetas vamos a ver la siguiente estructura

nos centraremos en src, aqui se guarda todos los archivos de angular.

dentro de src encontraremos lo siguientes archivos

lo que está en azul son nuestros archivos principales de los cuales nos centraremos en 3:

• index: todo se carga aca
• main: configuración inicial  de angular
• style: estilos que afectará a toda la página

si entramos en app, que por cierto todo los archivos se deben estar acá, nos encontraremos con:

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

module

en app.module encontraremos el directorio principal, es decir si creamos una clase, un modelo, un componente debemos hacer la referencia a esta , las referencias son de manera global, es decir si exportamos una librería en module, podemos usarlo en cualquier parte del proyecto.

component

component en angular 2 , son secciones de código que trabajan por separado, esto hace que puedan ser reutilizados. si abrimos app.component.ts, vamos a ver lo siguiente

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

@Component({

selector:’app-root’,

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

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

})

export class AppComponent {

title=’app works!’;

}

• import – importamos módulos y librerias de esencial de angular
• selector – es como llamaremos para reutilizar este componente por ejemplo <app-root/>
• templateUrl – es el html que usa principalmente el componente
• styleUrls – es la hoja de estilos que sobrepondra al style de raiz, esto funciona solo en este componente
• export class  – con esto hacemos que podamos exportar nuestra clase a otra si es necesario usando los import
• title – tile es una variable, anteriormente en javascript se usa VAR ahora usaremos let para variables temporales, public para variables públicas y private para variables privadas , si no ponemos nada sera private.

Otros comandos en angular cli

el beneficio de usar angular cli es que puedes crear todos tus clases de forma sencilla

para esto vamos a poner ng  luego generate y luego que queremos crear por ejemplo

ng generate component primerapagina

nos creara una carpeta que se llamará primerapagina y dentro tendrá component, style y html

una forma más corta de generar un componente es el siguiente

ng g component primerapagina

si queremos guardarlo en otra carpeta se hace así

ng g component nuevacarpeta/primerapagina

aqui les dejare la tabla de algunas otras cosas que pueden crear con angular cli en el siguiente post explicaremos que son cada una de ellas