Vale, vale, te oigo decir.
Vamos a seguir con esto,
muéstrame un poco de código.
De hecho, vamos a empezar con la creación
nuestra aplicación angular en este primer ejercicio.
Utilizaremos la interfaz de línea de comandos Angular,
la CLI angular para el andamio de nuestra aplicación Angular en este ejercicio.
Luego, a medida que pasemos por el resto de los ejercicios de este curso,
construiremos nuestra aplicación angular paso a paso.
La CLI angular es una forma muy conveniente de crear una aplicación angular.
La aplicación Angular creada por Angular CLI sigue las guías de estilo
sugeridas por los desarrolladores de marco Angular.
Podemos usar la CLI Angular para andamiar
muchas partes de nuestra aplicación Angular incluyendo los componentes,
los servicios de nuestra aplicación Angular.
La CLI Angular también viene con su propio servidor incorporado,
que podemos usar para servir la aplicación Angular mientras la estamos construyendo,
y luego ver nuestra aplicación Angular en
el navegador como una vista previa en vivo de nuestra aplicación.
Como cuando hacemos cambios,
los cambios se reflejarán inmediatamente en el navegador.
Esa es la razón por la que elegí usar Angular CLI como
el enfoque para construir nuestra aplicación Angular en este curso.
Para empezar, vaya a una ubicación conveniente en
su equipo y cree una carpeta llamada Angular.
Por lo tanto, voy a empezar a moverme a mi carpeta de documentos Coursera.
Ahí es donde almaceno todos mis archivos para mi curso Coursera,
y luego crearé una carpeta
llamada Angular y luego un movimiento a la carpeta Angular.
Ahora, vamos a crear nuestra aplicación Angular dentro de esta carpeta.
El primer paso que hacemos en este ejercicio es instalar la CLI angular.
Entonces, en el prompt,
escriba npm install -g @angular /cli @ 6.2.1.
Ahora, cada vez que instale un módulo NPM,
también especificaré la versión exacta del módulo NPM que estoy instalando.
Te exhorto encarecidamente a instalar
la misma versión exacta del módulo de NPM para que puedas pasar por
el resto de los ejercicios sin tener ningún problema con los ejercicios.
Entonces, en este caso, estoy instalando la versión 6.2.1 de la CLI angular.
Ahora, si estás haciendo esto en un Mac o Linux,
no olvides el sudo delante de la instalación de npm.
La instalación tomará algún tiempo.
Entonces, una vez que se complete la instalación,
entonces la CLI angular estará disponible en su línea de comandos.
Una vez completada la instalación,
puede comprobar y ver que la CLI angular está instalada.
Una vez que esté instalado,
es posible que necesite reiniciar el terminal para
para que las herramientas de CLI Angular estén disponibles en el prompt.
La CLI angular está disponible escribiendo ng en
el mensaje seguido de un conjunto de instrucciones adicionales.
Entonces, el primer comando que vamos a probar es ng help,
y esto enumerará un conjunto de todos los demás comandos
que la CLI angular nos permite ejecutar.
Ng como verá será el prefijo de
todos los comandos angular CLI que utilizará en este curso.
Esto enumerará un conjunto de todas las opciones que la CLI angular proporciona para nosotros.
Aprenderemos muchos de estos comandos a medida que recorremos el resto de este curso.
Para crear una nueva aplicación Angular,
voy a crear esa aplicación en
la carpeta Angular en una subcarpeta llamada ConFfusion.
Si has tomado el curso anterior sobre Bootstrap four,
entenderías por qué nombra esta aplicación como Confusión.
Entonces, en el prompt,
escriba ng new Confusion,
y luego usaría sass como
el marco de estilo CSS para mi aplicación Angular.
Entonces, especifico el estilo menos igual a SCSS,
y presiono el Retorno y tomará algún tiempo para que
la aplicación Angular se cree en la carpeta actual.
Una vez que su aplicación se instala,
vamos a utilizar el servidor incorporado de
la CLI angular para compilar nuestra aplicación Angular y comenzar a servirla.
Mueva a la carpeta Confusion,
y en el prompt, escriba ng serve,
y espere a que el servidor Angular Live Development comience
y cree nuestra aplicación Angular y comience a servir la aplicación.
Una vez que se haya completado,
se dará cuenta de que esta aplicación estará disponible escribiendo
a http://localhost:4200 en la barra de direcciones de nuestro navegador.
Puede dejar el servidor de desarrollo funcionando continuamente.
A medida que realice cambios en su aplicación Angular,
el servidor recompilará automáticamente los cambios y luego
comenzará a servir la aplicación Angular actualizada dentro de su navegador.
Entonces, esta sería una muy buena manera de ver en vivo los cambios que haces
dentro de tu aplicación Angular siendo reflejados inmediatamente
en el navegador donde ves tu aplicación Angular.
Si va al navegador y accede a la aplicación Angular en localhost:4200,
verá que la aplicación comienza a funcionar,
y servirá este conjunto de palabras en nuestro navegador.
Por lo tanto, esta es una aplicación muy simple que la aplicación angular a
bare-bones le permite comenzar con el desarrollo de su aplicación angular.
Vamos a construir sobre esta aplicación de andamios por Angular CLI,
implementando varias características como parte de este curso.
Si está planeando usar Git para su aplicación Angular para el control de versiones,
, entonces en este punto,
puede ser una buena idea inicializar su repositorio de Git.
La CLI angular realiza automáticamente la inicialización de su repositorio de Git,
y por lo tanto la primera confirmación con el mensaje de confirmación inicial al repositorio de Git.
Vamos a comprobar el estado de nuestro repositorio de Git.
Vamos a salir escribiendo git log
una línea y verá que
la configuración inicial se ha comprometido a nuestro repositorio de Git.
Ahora, podemos empezar a trabajar en nuestra aplicación Angular que
hemos andamiado en esta carpeta aquí.
Si elige sincronizar su repositorio de Git con un repositorio en línea,
, asegúrese de que su repositorio en línea sea un repositorio privado.
Bitbucket le permite crear repositorios privados gratuitos.
Entonces, adelante y configura tu repositorio de Git en Bitbucket.
Con esto, completamos nuestro ejercicio.
En este primer ejercicio,
hemos instalado la CLI angular.
Entonces, hemos desarrollado nuestra aplicación Angular en la que vamos a
trabajo para desarrollar más como parte del resto de los ejercicios de este curso.