Menu

Clase 1 - Creando una app en Angular

classangular - November 15, 2017 por Carlos Rojas | Edita este Post.
Angular CLI1.5.0Angular5.0

!Hola! y bienvenido a esta serie de lecciones que te enseñaran como hacer una app en Angular.

Primero que todo quiero hacer una distincion entre AngularJS y Angular.

Si es tu primera vez explorando frameworks quizas puedas estar un poco confundido porque las personas estan hablando sobre Angular y Angular 2 o 4 o 5.

¿Son similares? ¿Es lo mismo?

Bueno, basicamente las versiones de Angular comparten la ideología de usar html/js/css para construir Apps. Pero hace poco el equipo de Angular decidio utilizar los avances en tecnologias como Typescript, Webpack y sobre todo en EcmaScript 6 (Javascript) para construir una nueva versión de su popular AngularJS esta version es Angular y comienza desde su version 2.

Adicionalmente, el equipo de Angular se ha planteado una agenda de 6 meses para liberar una versión mayor de Angular por lo tanto ya tenemos entre nosotros la 2, 4 y 5. Pero estas versiones son muy compatibles entre si y la mayoria de los casos los cambios para actualizar son cuestion de 20 minutos y a cambio siempre trae buenas mejorar en cosas como las animaciones, la compilacion y la compatibilidad con otras tecnologias.

Ok. Habiendo dicho esto vamos a enfocar esta serie en Angular.

Instalando Angular

Instalando Node y Cordova

El CLI de Angular esta construido sobre Node, Asi que vas a necesitar Descargar e instalar una versión reciente de Node desde acá .

Una vez tienes Node.js instalado, tu podrás ser capaz de acceder al administrador de paquetes de node o npm a traves del comando.

npm install -g @angular/cli

Quizas puedas necesitar sudo para instalar globalmente

Creando tu primera App en Angular.

Ok, ahora necesitamos escribir este comando:

ng new firstAngular

Ok, ahora si todo sale bien, tu puedes ver en la ubicacion de tu directorio una nueva carpeta llamada “firstAngular” y en tu terminal CLI. Algo como esto:

create firstAngular/README.md (1028 bytes)
  create firstAngular/.angular-cli.json (1248 bytes)
  create firstAngular/.editorconfig (245 bytes)
  create firstAngular/.gitignore (516 bytes)
  create firstAngular/src/assets/.gitkeep (0 bytes)
  create firstAngular/src/environments/environment.prod.ts (51 bytes)
  create firstAngular/src/environments/environment.ts (387 bytes)
  create firstAngular/src/favicon.ico (5430 bytes)
  create firstAngular/src/index.html (299 bytes)
  create firstAngular/src/main.ts (370 bytes)
  create firstAngular/src/polyfills.ts (2667 bytes)
  create firstAngular/src/styles.css (80 bytes)
  create firstAngular/src/test.ts (1085 bytes)
  create firstAngular/src/tsconfig.app.json (211 bytes)
  create firstAngular/src/tsconfig.spec.json (304 bytes)
  create firstAngular/src/typings.d.ts (104 bytes)
  create firstAngular/e2e/app.e2e-spec.ts (295 bytes)
  create firstAngular/e2e/app.po.ts (208 bytes)
  create firstAngular/e2e/tsconfig.e2e.json (235 bytes)
  create firstAngular/karma.conf.js (923 bytes)
  create firstAngular/package.json (1318 bytes)
  create firstAngular/protractor.conf.js (722 bytes)
  create firstAngular/tsconfig.json (363 bytes)
  create firstAngular/tslint.json (2985 bytes)
  create firstAngular/src/app/app.module.ts (314 bytes)
  create firstAngular/src/app/app.component.css (0 bytes)
  create firstAngular/src/app/app.component.html (1120 bytes)
  create firstAngular/src/app/app.component.spec.ts (986 bytes)
  create firstAngular/src/app/app.component.ts (207 bytes)
Successfully initialized git.
Project 'firstAngular' successfully created.

Ahora nos vamos a ubicar en la carpeta del proyecto.

cd firstAngular

Desde ahora, siempre que ejecutemos algo en el CLI va a ser desde esta ubicación.

Ahora, vamos a ejecutar nuestra nueva App. Ejecute en la terminal.

ng serve

vas a ver algo como esto en tu navegador:

Si ves algo asi en tu pantalla estas muy bien :)

!Perfecto! ahora, nosotros estamos casi listo.

Adicionalmente, vas a necesitar de un editor. Tu puede encontrar buenas opciones aquí.

Yo estoy usando Visual Studio Code.

Entonces, cuando tú elijas tu editor vas a necesitar abrir el proyecto ahí:

Cool, ¿Qué sigue?

Vamos a crear una app que va a tener estas características:

  • Vas a leer noticias desde un Feed (RSS).
  • Puedes registrar usuarios.
  • Puedes autenticar usuarios.
  • Puedes resetear la constraseña.

Listo eso es todo por ahora. pero mientras tanto puedes leer los siguientes enlaces :)

Hasta la proxima clase :)

Ver código

Recuerda:

Si quieres ejecutar este demo en tu computadora, debes tener el entorno de ionic instalado y luego de descargar o clonar el proyecto debes ubicarte en tu proyecto en la terminal y luego ejecutar

npm install

esto es para descargar todas las dependencias del proyecto.

¡Compártelo!