Generación y estructura de Angular 4

Contenido del curso

Inicio del curso

1
Angular 4: configuración a despliegue profesional
02:13 min

Introducción a Angular 4

Setup del Ambiente de Trabajo

Conceptos Básicos

Directivas

Angular UI

Ruteo

Servicios

Conexión Remota (Http y Sockets)

Pipes

Animaciones en Angular

Testing en Angular

Autenticación y Protección de Rutas

RxJS

Publicando nuestro proyecto

72
Publicando en Firebase Hosting
07:39 min

Fin del curso

73
Conclusión ¿Qué aprendimos en el curso?
01:20 min
74
Reto final del curso - realiza un nuevo modulo de PlatziSquare de acuerdo con las historias de usuario
01:25 min

Sesiones en vivo

Contenido Bonus

80
Actualización de angular, versión 6.0
04:25 min

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:006:58

Generación y estructura de Angular 4

Curso de Angular 4

Clase 7 de 80

Clase 7 / 80

Recursos

Configura en minutos un entorno sólido para Angular 4: instala Node.js y npm, añade Angular CLI de forma global, crea un proyecto con ng new, ejecútalo con ng serve y comprende la estructura de carpetas esencial como src, app, assets, environments, index.html y styles. Con estos pasos, tendrás un flujo confiable desde la instalación hasta el navegador.

¿Cómo instalar Node.js y verificar npm?

Instala Node.js desde su sitio oficial: busca en Google y entra a la sección Download. Descarga el instalador para tu sistema (Mac, Windows o Linux) y sigue el asistente. En Mac, te pedirá tu contraseña. La instalación es rápida.

Verifica que npm quedó disponible. Aunque no escribirás código en Node, sí necesitas el manejador de paquetes para instalar dependencias.

Comando clave:

npm -v

Si ves un número de versión, npm está listo.
La versión puede variar: cualquier versión igual o superior a la mostrada por el instructor funciona.

¿Cómo instalar Angular CLI y generar tu primer proyecto?

Busca en Google “Angular CLI” y sigue la guía oficial. La instrucción base es instalarlo globalmente con npm. Si aparece un error de permisos, repite el comando con privilegios de administrador usando sudo.

Comandos clave:

# instalación global
npm install -g @angular/cli

# si hay error de permisos	sudo npm install -g @angular/cli

Al terminar, crea el proyecto con ng new. La herramienta genera el árbol de directorios y configura los preprocesadores: convierte TypeScript a JavaScript y, si usas Sass, a CSS.

ng new Platzi Square
cd Platzi Square

Para ejecutarlo, usa ng serve. Este comando hace la transpilación y parte de la compilación, y levanta un server de desarrollo.

ng serve

Si el navegador marca que el sitio no puede ser alcanzado al abrir la URL que muestra la CLI, usa la IP local. Mantén el puerto tal como aparece en la salida de la herramienta.

Abre: 127.0.0.1:puerto en tu navegador.
El puerto identifica dónde corre tu aplicación: no lo cambies.

Con esto, verás tu app de Angular 4 funcionando en el navegador con dos comandos clave: ng new y ng serve.

¿Qué estructura de carpetas y archivos crea Angular 4?

Abre el proyecto en tu editor. Verás muchos directorios. node_modules es extenso y no necesitas tocarlo. La atención se centra en src, donde trabajarás el 95% del tiempo.

Dentro de src:

app: contiene el código principal de la aplicación.
assets: guarda imágenes, audios y archivos descargables.
environments: define ambientes de desarrollo, producción y pruebas.
index.html: es el archivo que el navegador carga; ahí corre toda la app.
styles: coloca aquí los estilos CSS globales.

Además, la CLI instala dependencias necesarias para generar proyectos, correrlos en el navegador y desplegarlos en un servidor externo. Otros archivos del proyecto los usa Angular internamente y no hace falta modificarlos.

¿Te fue útil esta guía paso a paso para iniciar con Angular 4? Cuéntame en los comentarios qué parte te gustaría profundizar o qué error te gustaría resolver.

Omar Crespo

Hace 8 años

Pueden usar npx que no instala los paquetes en nuestros PCs si no que descarga los paquetes para un solo uso y siempre descarga la versión mas nueva

npx -p @angular/cli ng new

Eso si deben tener la ultima version de npm 😉

npm i -g npm

Omar Crespo

Hace 8 años

como punto extra podemos crear aliases para usar un sintaxis sugar en la terminal 😄
Por ejemplo para ubuntu seria:

# ~/.bash_aliases
alias ng='npx -p @angular/cli ng'

Y asi ya solo queda usarlo tal cual como lo usa el profesor

ng serve

y siempre lo haremos utilizando la ultima version de angular-cli pero por el contrario, usaremos mas ancho de bando y un poco mas de tiempo dependiendo de nuestra conexión

Felipe Moreno

Hace 8 años

Por fin una respuesta para mi problema, muchas gracias. Excelente aporte.

Comentarios (115)115 comentarios

Hernán Giraldo

Hace 9 años

ALVARO JOSE VEGA PLATA

Jherom Chacon

jaime rodriguez

Eduardo de la Cruz Ibarra

Profesor

Jesus Sandrea

Danny Velásquez

Sergio Daniel Xalambrí

Wilson Naranjo

Víctor Hugo Rivas Sánchez

Hace 7 años

Julio César Olguín Serna

habib borge

Maurilio Lopez Martinez

Roberto Alessandro Castro Montoya

Luis Daniel Caraballo

Fernando Espinoza

Jesus Soto

Hans Vogt

Ulises Pérez Noguerón

Carlos Mauricio Pinell Rengel

Gustavo Pérez Machado

Agustin Osses

Edwar Enrique Vilchez Serrano

Nicolas Paolo Bueno Cavero

Matias D. Alvarez

Andres Felipe Jerez Giraldo

Juan Castro

Maria de los Angeles Silva Gutierrez

Jeferson Gonzalez

Inicio del curso

Angular 4: configuración a despliegue profesional

Introducción a Angular 4

Versionamiento en Angular

Qué es Angular 4 y el salto de versiones

Typescript: qué es

Cómo monetizar una app directorio comercial

Setup del Ambiente de Trabajo

Herramientas de trabajo y Angular CLI

Generación y estructura de Angular 4

RETO: Haz un cambio simple en el proyecto.

Conceptos Básicos

Para qué nos sirven los Módulos y Componentes

Tipos de Data Binding y String Interpolation

Property Binding

Event Binding

ngModel y two way binding en Angular

Directivas en Angular 4 y ngFor

Cómo usar ngIf en Angular 4.0

Instalando librerías con NPM (Google Maps)

Directivas

ngStyle y ngClass en Angular: estilos condicionales

Directiva ngSwitch

Cómo crear directivas de atributo en Angular

Host Listeners

HostBinding en Angular: controla estilos desde directivas

Angular UI

Angular Material y Bootstrap

Configurando e implementando Bootstrap en nuestro proyecto

Ruteo

Qué hace el router en Angular 4

Implementación de Rutas en el Proyecto

Href vs router link: navegación angular

Resaltando el link activo con CSS para indicar visualmente en que componente nos encontramos

Parámetros de ruta con routerLink en Angular

Parámetros tipo Query

Creando una vista de detalle para el proyecto

Página de contacto Angular desde cero

Servicios

Servicios en Angular para compartir datos

Creando nuestro propio servicio

Configurando Firebase en nuestro proyecto

Guardando Records en Firebase

Obteniendo records desde Firebase

Obteniendo coordenadas usando Geocoding

Reto: Crear una vista para editar records

Mostrando marcadores en el Mapa de Google

Conexión Remota (Http y Sockets)

Funcionamiento de los llamados Http y Sockets

Qué es una arquitectura cliente - servidor

Enviando llamados tipo POST

Enviando llamados tipo GET

Formateando respuestas del servidor con el operador map()

Manejando errores HTTP

Pipes

Utilidad de los Pipes en Angular 4

Usando los pipes por defecto de Angular

Parámetros en pipes

Creando nuestro propio pipe

Animaciones en Angular

Configurando animaciones en nuestro proyecto

Transiciones

Callbacks

Solución al Reto: Añadiendo animaciones a nuestra aplicación

Testing en Angular

Introducción a unit tests

Configuración de testing por default

Corriendo los tests

Creando unit tests para componentes

Integración de Unit Test con Servicios

Autenticación y Protección de Rutas

Cómo funcionan los JSON Web Tokens

Preparación de vistas para login y registro

Registrando usuarios

Loggeando usuarios

Guardias canActivate en Angular: Proteger rutas con autenticación

Cómo integrar Facebook login con Firebase

Logout en Angular con Firebase

RxJS

Cómo funciona RxJS con metáfora de oficina