/ Angular

Tu primera aplicación de Angular

El conjunto de buenas herramientas, prácticas, librerías y frameworks proveen al proceso de desarrollo la facilidad y rapidez necesaria para el mantenimiento de aplicaciones.

Angular CLI es una herramienta de interfaz de comandos en línea que te permite crear proyectos, agregar archivos y hacer una variedad de tareas de desarrollo como pruebas, agrupamientos e implementaciones.

Para crear nuestra primera aplicación de Angular vamos a realizar lo siguiente:

  1. Configurar el entorno de desarrollo.
  2. Crear un nuevo proyecto.
  3. Montar el servidor y corre la aplicación.
  4. Comienza a editar tu primer componente de Angular.

1) Configuración del entorno de desarrollo.

Para realizar esta práctica es necesario contar con un entorno de desarrollo listo, Asegúrate de primero instalar Node.js® y npm.

Puedes verificarlo ejecutando en tu terminal lo siguiente: node -v y npm -v

Después Instala Angular CLI de manera global.

npm install -g @angular/cli

2) Crea un nuevo proyecto

En tu terminal, crea la estructura de tu nueva aplicación ejecutando los siguientes comandos:

ng new my-app

Sé paciente pues instalar todos los paquetes npm necesarios puede tardar algunos minutos.

3) Monta el servidor y corre tu aplicación.

Ingresa al directorio del proyecto en tu consola y lanza el servidor:

cd my-app
ng serve --open

El comando ng serve monta el servidor, mantiene en observación tus archivos y recompila la aplicación mientras tu realizas cambios en los archivos.

Al usar la opción --open(también funciona con -o) de manera automática abrirá tu navegador de preferencia en la ruta correspondiente http://localhost:4200/

4) Comienza a editar tu primer componente de Angular

Abre tu editor de código favorito e incorpora la carpeta entera de la aplicación que acabas de crear.

Angular CLI crea tu primer componente de manera prederterminada. Es el componente raíz (root component) y su nombre es app-root. Puedes ubicarlo en la siguiente ruta del proyecto: ./src/app/app.component.ts

// ./src/app/app.component.ts
export class AppComponent {
    title = 'My First Angular App';
}

Cambia el título y agrega algo al fichero CSS src/app/app.component.css para que comprubes que la aplicación está corriendo en tiempo real y el navegador se actualiza inmediatamente.

/* ./src/app/app.component.css  */

h1 {
    color: #369;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 250%;
}
Israel Estrada

Israel Estrada

Emprendedor Mexicano dedicado a la producción multimedia en mi región. Me gusta compartir mis ideas y colaborar en proyectos diversos. Si deseas colaborar no dudes en ponerte en contacto.

Read More