Inicio del curso

1

De qu茅 tratar谩 este curso sobre Angular 4

Introducci贸n a Angular 4

2

Versionamiento en Angular

3

驴Qu茅 es Angular? Versiones y ventajas

4

Typescript: qu茅 es

5

Introducci贸n al Proyecto: PlatziSquare!

Setup del Ambiente de Trabajo

6

Herramientas de trabajo y Angular CLI

7

Generaci贸n y estructura de Angular 4

8

RETO: Haz un cambio simple en el proyecto.

Conceptos B谩sicos

9

Para qu茅 nos sirven los M贸dulos y Componentes

10

Tipos de Data Binding y String Interpolation

11

Property Binding

12

Event Binding

13

Two Way Data Binding

14

Directivas en Angular 4 y ngFor

15

Directiva ngIf

16

Instalando librer铆as con NPM (Google Maps)

Directivas

17

Directivas ngStyle y ngClass

18

Directiva ngSwitch

19

Directiva de atributo

20

Host Listeners

21

Host Binders

Angular UI

22

Angular Material y Bootstrap

23

Configurando e implementando Bootstrap en nuestro proyecto

Ruteo

24

Qu茅 hace el router en Angular 4

25

Implementaci贸n de Rutas en el Proyecto

26

Diferencias entre href y routerLink

27

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

28

Par谩metros en Rutas

29

Par谩metros tipo Query

30

Creando una vista de detalle para el proyecto

31

Creando la p谩gina de contacto para PlatziSquare

Servicios

32

Qu茅 son los servicios en Angular 4

33

Creando nuestro propio servicio

34

Configurando Firebase en nuestro proyecto

35

Guardando Records en Firebase

36

Obteniendo records desde Firebase

37

Obteniendo coordenadas usando Geocoding

38

Reto: Crear una vista para editar records

39

Mostrando marcadores en el Mapa de Google

Conexi贸n Remota (Http y Sockets)

40

Funcionamiento de los llamados Http y Sockets

41

Qu茅 es una arquitectura cliente - servidor

42

Enviando llamados tipo POST

43

Enviando llamados tipo GET

44

Formateando respuestas del servidor con el operador map()

45

Manejando errores HTTP

Pipes

46

Utilidad de los Pipes en Angular 4

47

Usando los pipes por defecto de Angular

48

Par谩metros en pipes

49

Creando nuestro propio pipe

Animaciones en Angular

50

Configurando animaciones en nuestro proyecto

51

Transiciones

52

Callbacks

53

Soluci贸n al Reto: A帽adiendo animaciones a nuestra aplicaci贸n

Testing en Angular

54

Introducci贸n a unit tests

55

Configuraci贸n de testing por default

56

Corriendo los tests

57

Creando unit tests para componentes

58

Integraci贸n de Unit Test con Servicios

Autenticaci贸n y Protecci贸n de Rutas

59

C贸mo funcionan los JSON Web Tokens

60

Preparaci贸n de vistas para login y registro

61

Registrando usuarios

62

Loggeando usuarios

63

Protecci贸n de Rutas

64

Autenticaci贸n con redes sociales.

65

Logout

RxJS

66

Qu茅 es RxJS

67

Configurando RxJS en nuestro proyecto

68

Uso de los Observables

69

Implementando un TypeAhead

70

Implementando un TypeAhead 2

71

Soluci贸n al reto autocompletar los campos de direcci贸n usando observables

Publicando nuestro proyecto

72

Publicando en Firebase Hosting

Fin del curso

73

Conclusi贸n 驴Qu茅 aprendimos en el curso?

74

Reto final del curso - realiza un nuevo modulo de PlatziSquare de acuerdo con las historias de usuario

Sesiones en vivo

75

Creando un traser bullet de PlatziSquare

76

Sesi贸n de preguntas y respuestas

77

Release de Angular 5

78

Sesi贸n de preguntas y respuestas

79

Angular Universal

Contenido Bonus

80

Actualizaci贸n de angular, versi贸n 6.0

Disfruta de nuestro contenido y eventos por un a帽o a un precio especial

Antes: $179

Currency
$149/a帽o
隆Suscr铆bete!

馃敟 Te quedan 馃敟

1D
7H
45M
19S
Curso de Angular 4

Curso de Angular 4

Eduardo Ibarra

Eduardo Ibarra

Generaci贸n y estructura de Angular 4

7/80
Recursos

Vamos a instalar las herramientas que usaremos para generar nuestro proyecto Angular 4.

  • Node.js, en la consola validamos que tenemos instalado npm con el comando:

npm -v

  • Angular CLI, recuerda ejecutar los comandos con privilegios de administrador.

Aportes 43

Preguntas 21

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Reg铆strate o inicia sesi贸n para participar.

  1. Instalaci贸n de angular 4: npm install -g @angular/[email protected]
  2. Creaci贸n del proyecto: ng new platzisquare
  3. Ejecuci贸n del proyecto: ng serve
  4. Mostrar sitio web en el navegador: http://localhost:4200/

Hola muchachos, cuando creo un nuevo proyecto usando ng new me pregunta si deseo agregar Angular routing y que formato de stylesheet deseo usar.

Para continuar con el curso seleccione No y CSS respectivamente, pero no se a que se refieren con el termino Angular Routing y si debo agregarlo o no. Debo ignorarlo por el momento??

Cuando intenten instalar el CLI como el video es un poco viejo se instalara la ultima version, recomiendo instalar exactamente la version 4 para completar el curso, cuando esten en la parte de instalar el cli pueden usar este comando para la version 4

npm i @angular/[email protected] -g

Con el comando 鈥渘g serve -o鈥 te abre el proyecto directamente en el navegador.

Para continuar con el curso yo instale la versi贸n 4 de este modo.

npm install -g @angular/[email protected]

Seria bueno actualizar este curso a Angular 7 u 8

Buenas tardes al momento de tipear el comando ng new platzisquare salen estas preguntas
? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? CSS

Al responderlas sea que responda yes o no y seleccione cualquier opci贸n para los estilos despliega este error:

**Schematic input does not validate against the Schema: {鈥渘ame鈥:鈥減latzi_square鈥,鈥渧ersion鈥:鈥7.1.1鈥,鈥渞outing鈥:true,鈥渟tyle鈥:鈥渃ss鈥潁
Errors:

Data path 鈥.name鈥 should match format 鈥渉tml-selector鈥.**

Como puedo solucionarlo, he investigado en la red, pero ninguna respuesta satisface mi necesidad.

hola grupo, tengo instalado el node.js version 6.4.1 y de editor Atom

Hay un error cuando se termina el m贸dulo, al darle siguiente video este no avanza

Hola Buenas noches,
soy super nueva en esto y no se porque a mi no me corre, les anexo mi c贸digo

C:\Users\LENOVO> sudo npm install -g @angular/cli
"sudo" no se reconoce como un comando interno o externo,
programa o archivo por lotes ejecutable.

Para aquellos que est茅n haciendo este curso y tienen instalada la versi贸n 7 de angular, pueden ejecutar este comando para cambiar a la versi贸n 5 que es retrocompatible con la versi贸n 4
npm install -g @angular/[email protected]

Sin realizar el comando en la terminal ng server. No se podr铆a ver tu aplicaci贸n en el navegador

yo tengo la ultima versi贸n CLI que es la 8.

Cuando intent茅 ejecutar el c贸digo para crear una nueva app, me arroj贸 el siguiente mensaje:

`ng new PlatziSquare
ng : No se puede cargar el archivo C:\Users\alfir\AppData\Roaming\npm\ng.ps1. El archivo C:\Users\alfir\AppData\Roaming\npm\ng.ps1 no est谩 firmado
digitalmente. No se puede ejecutar este script en el sistema actual. Para obtener m谩s informaci贸n acerca de la ejecuci贸n de scripts y la configuraci贸n de la
En l铆nea: 1 Car谩cter: 1

  • ng new PlatziSquare
  • ~~
    • CategoryInfo : SecurityError: (馃槂 [], PSSecurityException
    • FullyQualifiedErrorId : UnauthorizedAccess`

Esto tiene que ver con las pol铆ticas de ejecuti贸n de archivos .ps1 Para solucionarlo, segu铆 los pasos que se describen en el siguiente link: http://www.blai.blog/2019/05/habilitar-ejecucion-de-archivos-ps1-en.html

Espero les sirva

buenas clases

Me descarga la 煤ltima versi贸n de angular, la 7, es necesario Angular routing?

esto me instalo angular 7, puedo ver este curso y funcionara con angular 7?

Que bueno que incluyeron el video de instalaci贸n y creaci贸n de un proyecto.

Para indicarle el puerto en el que iniciar la aplicaci贸n:

ng serve --port #

Si quiere usar en lugar css corriente puede usar sass colocando lo siguiente a la hora de crear el proyecto ng new platzisquere --style=scss y listo, para colocarlo desde el proyecto ya creado es otro cuento que lo dejo para un tutorial jeje

Hola estoy en windows y me dice que git no me lo reconoce
debo instalar github??

Para abrir la url del navegador en el browser predeterminado se utiliza --open=true
ng serve --open=true

tenia una version anterior de Angular CLI intente crear el proyecto 鈥渘g new platzisquare鈥 y Me saca el siguiente error :

npm ERR! code MODULE_NOT_FOUND
npm ERR! Cannot find module 鈥./lib/extract-stream.js鈥

decidi entonces correr este comando:
npm uninstall -g @angular/cli

y me vuelve a sacar el mismo error. Alguien tiene alguna idea?

Qu茅 tal, estoy siguiendo el curso, no s茅 de angular por eso estoy aqu铆, pero al crear el proyecto me muestra la pregunta would you like to add angular routing? y/n

驴qu茅 debo hacer? 驴para qu茅 yes y no? 驴qu茅 hace cada una?

respond铆 con N y para los estilos seleccione CSS, pero me qued茅 con la duda de la primer pregunta sobre angular routing, alguien podr铆a ayudarme?

gracias, saludos!

http://localhost:4200/ cambie a http://127.0.0.1:4200/ y nada alguien podrias ayudarme?

Hola, cuando intento instalar angular cli, me est谩 saliendo el siguiente error.

En este caso recomiendo instalar visual studio code, debido a que es muy amigable con la interfaz

despu茅s que coloco " el c贸digo de SUDO" me dice: "Password: (y la imagen de una llave).

Ayuda por favor

no funciona la clase 8 si me colaboran por favor gracias

Cuando al crear el proyecto sale un error relacionado con json se pueden seguir los siguientes pasos :

  1. npm uninstall -g @angular/cli
  2. npm cache clean --force
    al momento de iniciar el proyecto)
  3. npm install -g @angular/[email protected]
  4. Borrar proyecto
  5. ng new myapp

el curso de PWA me trajo aqui 鈥 a seguir aprendiendo

Bueno, comenzando y primer totazo; aun no he podido instalar angular/cli me sale un error de json o algo parecido. He leido los comentarios y aun nada. Alguien me puede ayudar. El error puntual es:

C:\windows\system32>npm install -g @angular/cli
npm ERR! Unexpected end of JSON input while parsing near 鈥樷3"},"_hasShrinkwrap"鈥

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\Arturo\AppData\Roaming\npm-cache_logs\2019-03-23T02_49_56_117Z-debug.log

ng serve -o

Intentando ingresar la direcci贸n y el puerto, como lo indican en el minuto 5:17 de generaci贸n y estructura de Angular 4(127.0.0.1:4200), me sigui贸 apareciendo que no puedo acceder, alguno de ustedes me odr铆a asesorar 驴por qu茅? Muchas gracias!

sera que si ko hago con angular 7?

hay que usar git antes de crear el proyecto? porque me da error comando git no reconocido

Hola, si apagu茅 mi Pc mientras ve铆a los v铆deos y ahora el server no me ejecuta. 驴que tengo que hacer para que mi localhost funcione de nuevo con el repocitorio que ya tenia hecho??

Alguna vez alguien dijo 鈥渆jecutar todo como super usuario es muy mala idea鈥.
Y hablando de usar sudo para ejecutar una herramienta como el AngularCLI, dandole acceso de super usuario a una aplicaci贸n que no deberia tener ese nivel de permisos, yo les recomendar铆a que no lo hagan.
Pero y entonces? Pues por aca dejo este link que presenta algunas alternativas interesante para solucionar este problema:
https://medium.com/@thierry_45533/global-node-modules-without-sudo-aacc3781e900

me sale esta pantalla al momento de instalar, me podrian asesorar de favor

Estoy creando el proyecto pero de da este problema

C:\Users\FABER>ng new app
? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? SCSS [ http://sass-lang.com/documentation/file.SASS_REFERENCE.html#sy
ntax ]
CREATE app/angular.json (3489 bytes)
CREATE app/package.json (1276 bytes)
CREATE app/README.md (1020 bytes)
CREATE app/tsconfig.json (470 bytes)
CREATE app/tslint.json (1985 bytes)
CREATE app/.editorconfig (246 bytes)
CREATE app/.gitignore (629 bytes)
CREATE app/browserslist (429 bytes)
CREATE app/karma.conf.js (1015 bytes)
CREATE app/tsconfig.app.json (210 bytes)
CREATE app/tsconfig.spec.json (270 bytes)
CREATE app/src/favicon.ico (5430 bytes)
CREATE app/src/index.html (290 bytes)
CREATE app/src/main.ts (372 bytes)
CREATE app/src/polyfills.ts (2838 bytes)
CREATE app/src/styles.scss (80 bytes)
CREATE app/src/test.ts (642 bytes)
CREATE app/src/assets/.gitkeep (0 bytes)
CREATE app/src/environments/environment.prod.ts (51 bytes)
CREATE app/src/environments/environment.ts (662 bytes)
CREATE app/src/app/app-routing.module.ts (245 bytes)
CREATE app/src/app/app.module.ts (393 bytes)
CREATE app/src/app/app.component.html (1152 bytes)
CREATE app/src/app/app.component.spec.ts (1086 bytes)
CREATE app/src/app/app.component.ts (208 bytes)
CREATE app/src/app/app.component.scss (0 bytes)
CREATE app/e2e/protractor.conf.js (810 bytes)
CREATE app/e2e/tsconfig.json (214 bytes)
CREATE app/e2e/src/app.e2e-spec.ts (632 bytes)
CREATE app/e2e/src/app.po.ts (251 bytes)

[email protected] postinstall C:\Users\FABER\app\node_modules\babel-runtime\node_modules\core-js
node scripts/postinstall || echo 鈥渋gnore鈥

[email protected] postinstall C:\Users\FABER\app\node_modules\karma\node_modules\core-js
node scripts/postinstall || echo 鈥渋gnore鈥

@angular/[email protected] postinstall C:\Users\FABER\app\[email protected]\cli
node ./bin/postinstall/script.js

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {鈥渙s鈥:鈥渄arwin鈥,鈥渁rch鈥:鈥渁ny鈥潁 (current: {鈥渙s鈥:鈥渨in32鈥,鈥渁rch鈥:鈥渪64鈥潁)

added 1012 packages from 1041 contributors and audited 19005 packages in 53.588s
found 0 vulnerabilities

warning: LF will be replaced by CRLF in .editorconfig.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in .gitignore.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in README.md.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in angular.json.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in browserslist.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in e2e/protractor.conf.js.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in e2e/src/app.e2e-spec.ts.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in e2e/src/app.po.ts.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in e2e/tsconfig.json.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in karma.conf.js.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in package-lock.json.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in package.json.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in src/app/app-routing.module.ts.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in src/app/app.component.html.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in src/app/app.component.spec.ts.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in src/app/app.component.ts.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in src/app/app.module.ts.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in src/environments/environment.prod.ts.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in src/environments/environment.ts.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in src/index.html.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in src/main.ts.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in src/polyfills.ts.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in src/styles.scss.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in src/test.ts.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in tsconfig.app.json.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in tsconfig.json.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in tsconfig.spec.json.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in tslint.json.
The file will have its original line endings in your working directory
Successfully initialized git.

puedo instalar la ultima versi贸n y la 4 ?