Frontend
Angular es una plataforma de desarrollo, construida sobre TypeScript. Como plataforma, Angular incluye:
- Un marco basado en componentes para crear aplicaciones web escalables
- Una colección de bibliotecas bien integradas que cubren una amplia variedad de características, incluido el enrutamiento, la administración de formularios, la comunicación cliente-servidor y más
- Un conjunto de herramientas de desarrollo para ayudarle a desarrollar, compilar, probar y actualizar su código
Con Angular, está aprovechando una plataforma que puede escalar desde proyectos de un solo desarrollador hasta aplicaciones de nivel empresarial. Angular está diseñado para hacer que la actualización sea lo más sencilla posible, así que aproveche los últimos desarrollos con el mínimo esfuerzo. Lo mejor de todo es que el ecosistema Angular consta de un grupo diverso de más de 1,7 millones de desarrolladores, autores de bibliotecas y creadores de contenido.
- Node.js
- npm.package.manager (Aunque con instalar el Node.js ya se te instalara el npm)
Es tan sencillo como ejecutar el siguiente comando en nuestra terminal npm install -g @angular/cli
-
Crear un nuevo proyecto -----> ng new "nombre-proyecto"
-
Iniciar -----> ng serve --o (o viene de Open)
Si quieres detener el servidor simplemente usa Control + C en la Consola donde lo iniciaste
Deberia salir algo como esto :
-
Crear un componente -----> ng g c "Ruta y nombre del componente"
-
Crear un servicio -----> ng g s "Ruta y nombre del servicio"
La letra g es de generate La letra c es de components La letra s es de service
- npm install ngx-toastr --save
- npm install --save @angular/material @angular/cdk
- npm install @angular/animations --save
- ng add @angular/material
- ng add @ng-bootstrap/ng-bootstrap
- ng add @fortawesome/angular-fontawesome@
- npm i -D @angular-devkit/build-angular
Angular funciona mediante la creación, gestión y modificación de componentes y es lo que nos interesa en este proyecto Cuando abrimos la carpeta de nuestro proyecto de angular podemos observar que nuestro indext.html no concuerda con lo que vemos en el código, esto se debe a que lo que carga el html es un componente "app-root" por default si no hemos cambiado nada que se encuentra dentro de la carpeta app
La base de Angular es modificar estos archivos para que el sitio web se vea y comporte como yo quiera
En Angular, los componentes son la piedra angular de la construcción de aplicaciones. Son elementos reutilizables que encapsulan la lógica y la presentación de una parte específica de la interfaz de usuario. Aquí te explico cómo crear y modificar componentes en Angular de manera general:
Abre una terminal en la ubicación de tu proyecto Angular. Utiliza el comando ng generate component nombre-componente para generar un nuevo componente. Esto creará una carpeta con el nombre del componente en el directorio de componentes de tu proyecto, junto con los archivos necesarios.
Dentro de la carpeta del componente, encontrarás un archivo .ts para el código TypeScript del componente, un archivo .html para la plantilla HTML del componente y un archivo .css para los estilos del componente. Abre el archivo .ts para editar la lógica del componente. Aquí puedes definir propiedades, métodos y lógica de negocio. Abre el archivo .html para editar la plantilla HTML del componente. Aquí defines la estructura y el diseño del componente utilizando etiquetas HTML y directivas de Angular.Abre el archivo .css para editar los estilos del componente. Aquí puedes definir reglas CSS para dar estilo al componente.
Para utilizar un componente en otro componente o en la aplicación principal, debes importarlo. En el archivo .ts donde deseas utilizar el componente, agrega una importación al componente deseado. Luego, agrega el nombre del componente en la plantilla HTML donde deseas que se muestre. Puedes utilizar la etiqueta personalizada del componente como si fuera una etiqueta HTML estándar.
Para modificar un componente existente, simplemente abre los archivos .ts, .html y .css del componente y realiza los cambios necesarios. Puedes agregar propiedades, métodos, eventos, enlaces de datos y modificar la estructura, el diseño y los estilos del componente según tus necesidades. Compilar y ejecutar la aplicación:
Una vez que hayas creado o modificado un componente, debes compilar y ejecutar la aplicación para ver los cambios en el navegador. En la terminal, utiliza el comando ng serve para compilar y ejecutar la aplicación Angular. Abre un navegador web y navega a la dirección http://localhost:4200 para ver la aplicación en tiempo real.