1
00:00:04,070 --> 00:00:07,050
Vale, vale, te oigo decir.

2
00:00:07,050 --> 00:00:08,280
Vamos a seguir con esto,

3
00:00:08,280 --> 00:00:09,835
muéstrame un poco de código.

4
00:00:09,835 --> 00:00:13,440
De hecho, vamos a empezar con la creación

5
00:00:13,440 --> 00:00:17,770
nuestra aplicación angular en este primer ejercicio.

6
00:00:17,770 --> 00:00:21,145
Utilizaremos la interfaz de línea de comandos Angular,

7
00:00:21,145 --> 00:00:28,020
la CLI angular para el andamio de nuestra aplicación Angular en este ejercicio.

8
00:00:28,020 --> 00:00:31,690
Luego, a medida que pasemos por el resto de los ejercicios de este curso,

9
00:00:31,690 --> 00:00:36,180
construiremos nuestra aplicación angular paso a paso.

10
00:00:36,180 --> 00:00:44,195
La CLI angular es una forma muy conveniente de crear una aplicación angular.

11
00:00:44,195 --> 00:00:48,620
La aplicación Angular creada por Angular CLI sigue las guías de estilo

12
00:00:48,620 --> 00:00:53,290
sugeridas por los desarrolladores de marco Angular.

13
00:00:53,290 --> 00:00:56,405
Podemos usar la CLI Angular para andamiar

14
00:00:56,405 --> 00:01:00,980
muchas partes de nuestra aplicación Angular incluyendo los componentes,

15
00:01:00,980 --> 00:01:04,275
los servicios de nuestra aplicación Angular.

16
00:01:04,275 --> 00:01:08,480
La CLI Angular también viene con su propio servidor incorporado,

17
00:01:08,480 --> 00:01:14,405
que podemos usar para servir la aplicación Angular mientras la estamos construyendo,

18
00:01:14,405 --> 00:01:17,930
y luego ver nuestra aplicación Angular en

19
00:01:17,930 --> 00:01:22,870
el navegador como una vista previa en vivo de nuestra aplicación.

20
00:01:22,870 --> 00:01:24,805
Como cuando hacemos cambios,

21
00:01:24,805 --> 00:01:28,940
los cambios se reflejarán inmediatamente en el navegador.

22
00:01:28,940 --> 00:01:33,650
Esa es la razón por la que elegí usar Angular CLI como

23
00:01:33,650 --> 00:01:39,365
el enfoque para construir nuestra aplicación Angular en este curso.

24
00:01:39,365 --> 00:01:43,100
Para empezar, vaya a una ubicación conveniente en

25
00:01:43,100 --> 00:01:46,490
su equipo y cree una carpeta llamada Angular.

26
00:01:46,490 --> 00:01:52,065
Por lo tanto, voy a empezar a moverme a mi carpeta de documentos Coursera.

27
00:01:52,065 --> 00:01:58,260
Ahí es donde almaceno todos mis archivos para mi curso Coursera,

28
00:01:58,260 --> 00:02:03,230
y luego crearé una carpeta

29
00:02:03,230 --> 00:02:08,955
llamada Angular y luego un movimiento a la carpeta Angular.

30
00:02:08,955 --> 00:02:15,505
Ahora, vamos a crear nuestra aplicación Angular dentro de esta carpeta.

31
00:02:15,505 --> 00:02:21,080
El primer paso que hacemos en este ejercicio es instalar la CLI angular.

32
00:02:21,080 --> 00:02:22,525
Entonces, en el prompt,

33
00:02:22,525 --> 00:02:32,700
escriba npm install -g @angular /cli @ 6.2.1.

34
00:02:32,700 --> 00:02:35,430
Ahora, cada vez que instale un módulo NPM,

35
00:02:35,430 --> 00:02:39,725
también especificaré la versión exacta del módulo NPM que estoy instalando.

36
00:02:39,725 --> 00:02:41,720
Te exhorto encarecidamente a instalar

37
00:02:41,720 --> 00:02:44,930
la misma versión exacta del módulo de NPM para que puedas pasar por

38
00:02:44,930 --> 00:02:50,680
el resto de los ejercicios sin tener ningún problema con los ejercicios.

39
00:02:50,680 --> 00:02:55,700
Entonces, en este caso, estoy instalando la versión 6.2.1 de la CLI angular.

40
00:02:55,700 --> 00:02:58,310
Ahora, si estás haciendo esto en un Mac o Linux,

41
00:02:58,310 --> 00:03:02,565
no olvides el sudo delante de la instalación de npm.

42
00:03:02,565 --> 00:03:05,095
La instalación tomará algún tiempo.

43
00:03:05,095 --> 00:03:08,095
Entonces, una vez que se complete la instalación,

44
00:03:08,095 --> 00:03:13,655
entonces la CLI angular estará disponible en su línea de comandos.

45
00:03:13,655 --> 00:03:15,750
Una vez completada la instalación,

46
00:03:15,750 --> 00:03:18,885
puede comprobar y ver que la CLI angular está instalada.

47
00:03:18,885 --> 00:03:20,295
Una vez que esté instalado,

48
00:03:20,295 --> 00:03:25,190
es posible que necesite reiniciar el terminal para

49
00:03:25,190 --> 00:03:30,835
para que las herramientas de CLI Angular estén disponibles en el prompt.

50
00:03:30,835 --> 00:03:35,390
La CLI angular está disponible escribiendo ng en

51
00:03:35,390 --> 00:03:39,910
el mensaje seguido de un conjunto de instrucciones adicionales.

52
00:03:39,910 --> 00:03:46,105
Entonces, el primer comando que vamos a probar es ng help,

53
00:03:46,105 --> 00:03:49,820
y esto enumerará un conjunto de todos los demás comandos

54
00:03:49,820 --> 00:03:53,855
que la CLI angular nos permite ejecutar.

55
00:03:53,855 --> 00:03:56,720
Ng como verá será el prefijo de

56
00:03:56,720 --> 00:04:02,040
todos los comandos angular CLI que utilizará en este curso.

57
00:04:02,840 --> 00:04:09,685
Esto enumerará un conjunto de todas las opciones que la CLI angular proporciona para nosotros.

58
00:04:09,685 --> 00:04:15,895
Aprenderemos muchos de estos comandos a medida que recorremos el resto de este curso.

59
00:04:15,895 --> 00:04:18,930
Para crear una nueva aplicación Angular,

60
00:04:18,930 --> 00:04:21,545
voy a crear esa aplicación en

61
00:04:21,545 --> 00:04:25,660
la carpeta Angular en una subcarpeta llamada ConFfusion.

62
00:04:25,660 --> 00:04:29,210
Si has tomado el curso anterior sobre Bootstrap four,

63
00:04:29,210 --> 00:04:33,500
entenderías por qué nombra esta aplicación como Confusión.

64
00:04:33,500 --> 00:04:35,000
Entonces, en el prompt,

65
00:04:35,000 --> 00:04:40,905
escriba ng new Confusion,

66
00:04:40,905 --> 00:04:45,945
y luego usaría sass como

67
00:04:45,945 --> 00:04:53,080
el marco de estilo CSS para mi aplicación Angular.

68
00:04:53,080 --> 00:04:58,015
Entonces, especifico el estilo menos igual a SCSS,

69
00:04:58,015 --> 00:05:01,610
y presiono el Retorno y tomará algún tiempo para que

70
00:05:01,610 --> 00:05:05,750
la aplicación Angular se cree en la carpeta actual.

71
00:05:05,750 --> 00:05:08,330
Una vez que su aplicación se instala,

72
00:05:08,330 --> 00:05:10,850
vamos a utilizar el servidor incorporado de

73
00:05:10,850 --> 00:05:16,100
la CLI angular para compilar nuestra aplicación Angular y comenzar a servirla.

74
00:05:16,100 --> 00:05:18,650
Mueva a la carpeta Confusion,

75
00:05:18,650 --> 00:05:22,495
y en el prompt, escriba ng serve,

76
00:05:22,495 --> 00:05:27,470
y espere a que el servidor Angular Live Development comience

77
00:05:27,470 --> 00:05:33,115
y cree nuestra aplicación Angular y comience a servir la aplicación.

78
00:05:33,115 --> 00:05:35,175
Una vez que se haya completado,

79
00:05:35,175 --> 00:05:39,920
se dará cuenta de que esta aplicación estará disponible escribiendo

80
00:05:39,920 --> 00:05:50,425
a http://localhost:4200 en la barra de direcciones de nuestro navegador.

81
00:05:50,425 --> 00:05:53,975
Puede dejar el servidor de desarrollo funcionando continuamente.

82
00:05:53,975 --> 00:05:57,020
A medida que realice cambios en su aplicación Angular,

83
00:05:57,020 --> 00:06:01,520
el servidor recompilará automáticamente los cambios y luego

84
00:06:01,520 --> 00:06:06,320
comenzará a servir la aplicación Angular actualizada dentro de su navegador.

85
00:06:06,320 --> 00:06:13,370
Entonces, esta sería una muy buena manera de ver en vivo los cambios que haces

86
00:06:13,370 --> 00:06:16,760
dentro de tu aplicación Angular siendo reflejados inmediatamente

87
00:06:16,760 --> 00:06:21,265
en el navegador donde ves tu aplicación Angular.

88
00:06:21,265 --> 00:06:28,610
Si va al navegador y accede a la aplicación Angular en localhost:4200,

89
00:06:28,610 --> 00:06:31,135
verá que la aplicación comienza a funcionar,

90
00:06:31,135 --> 00:06:36,835
y servirá este conjunto de palabras en nuestro navegador.

91
00:06:36,835 --> 00:06:42,140
Por lo tanto, esta es una aplicación muy simple que la aplicación angular a

92
00:06:42,140 --> 00:06:47,490
bare-bones le permite comenzar con el desarrollo de su aplicación angular.

93
00:06:47,490 --> 00:06:52,460
Vamos a construir sobre esta aplicación de andamios por Angular CLI,

94
00:06:52,460 --> 00:06:57,420
implementando varias características como parte de este curso.

95
00:06:57,420 --> 00:07:01,710
Si está planeando usar Git para su aplicación Angular para el control de versiones,

96
00:07:01,710 --> 00:07:03,680
, entonces en este punto,

97
00:07:03,680 --> 00:07:06,980
puede ser una buena idea inicializar su repositorio de Git.

98
00:07:06,980 --> 00:07:12,620
La CLI angular realiza automáticamente la inicialización de su repositorio de Git,

99
00:07:12,620 --> 00:07:18,765
y por lo tanto la primera confirmación con el mensaje de confirmación inicial al repositorio de Git.

100
00:07:18,765 --> 00:07:23,610
Vamos a comprobar el estado de nuestro repositorio de Git.

101
00:07:23,610 --> 00:07:28,310
Vamos a salir escribiendo git log

102
00:07:28,310 --> 00:07:29,600
una línea y verá que

103
00:07:29,600 --> 00:07:33,020
la configuración inicial se ha comprometido a nuestro repositorio de Git.

104
00:07:33,020 --> 00:07:36,920
Ahora, podemos empezar a trabajar en nuestra aplicación Angular que

105
00:07:36,920 --> 00:07:41,020
hemos andamiado en esta carpeta aquí.

106
00:07:41,020 --> 00:07:46,800
Si elige sincronizar su repositorio de Git con un repositorio en línea,

107
00:07:46,800 --> 00:07:52,160
, asegúrese de que su repositorio en línea sea un repositorio privado.

108
00:07:52,160 --> 00:07:56,835
Bitbucket le permite crear repositorios privados gratuitos.

109
00:07:56,835 --> 00:08:01,580
Entonces, adelante y configura tu repositorio de Git en Bitbucket.

110
00:08:01,580 --> 00:08:04,350
Con esto, completamos nuestro ejercicio.

111
00:08:04,350 --> 00:08:06,395
En este primer ejercicio,

112
00:08:06,395 --> 00:08:08,635
hemos instalado la CLI angular.

113
00:08:08,635 --> 00:08:14,060
Entonces, hemos desarrollado nuestra aplicación Angular en la que vamos a

114
00:08:14,060 --> 00:08:22,150
trabajo para desarrollar más como parte del resto de los ejercicios de este curso.