angular tutorial

Introducción a Angular 2 – primeros paso

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

angular 2 estructura

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

dentro de src encontraremos lo siguientes archivos

Angular src

 

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!’;
}
si cambiamos title, veremos como se cambia el titulo que aparece en nuestro localhost.
la explicación de component es el siguiente:
  • 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

Componentng g component my-new-component
Directiveng g directive my-new-directive
Pipeng g pipe my-new-pipe
Serviceng g service my-new-service
Classng g class my-new-class
Guardng g guard my-new-guard
Interfaceng g interface my-new-interface
Enumng g enum my-new-enum
Moduleng g module my-module

Deja un comentario

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.