Angular v18 is the latest version of the popular frontend framework developed by Google. It comes with several new features and improvements that make it even more powerful and easy to use. In this tutorial, we will walk you through the process of installing and getting started with Angular v18.
Step 1: Install Angular CLI
The first step in getting started with Angular v18 is to install Angular CLI. This command-line tool makes it easy to create and manage Angular projects. To install Angular CLI, open your terminal and run the following command:
npm install -g @angular/cli
This will install Angular CLI globally on your system, allowing you to use it from any directory.
Step 2: Create a new Angular project
Once Angular CLI is installed, you can create a new Angular project by running the following command:
ng new my-angular-project
This will create a new directory called my-angular-project
and set up a new Angular project inside it.
Step 3: Run the project
After creating a new project, navigate to the project directory and run the following command to start the development server:
cd my-angular-project
ng serve
This will start a local development server that you can access in your browser by going to http://localhost:4200
.
Step 4: Explore the project structure
Angular projects have a specific structure that you should be familiar with. Here is a brief overview of the key directories and files in a new Angular project:
src
: This directory contains all the source code for your project, including components, services, and other Angular files.app
: This directory contains the main application module and components.angular.json
: This file contains configuration settings for your project.package.json
: This file contains information about dependencies and scripts for your project.
Step 5: Check out the new features in Angular v18
Angular v18 comes with several new features and improvements that make it even better than previous versions. Some of the key features include:
- Improved performance through better tree-shaking and faster rendering.
- Enhanced support for latest ECMAScript features.
- Improved error handling and debugging support.
- New libraries and tools for building progressive web apps and mobile applications.
Step 6: Update existing projects to Angular v18
If you have an existing Angular project and want to upgrade it to Angular v18, you can do so by running the following command in the project directory:
ng update @angular/core@18 @angular/cli@18
This will update your project to the latest version of Angular v18 and Angular CLI.
Conclusion
In this tutorial, we have covered the basics of getting started with Angular v18. We have shown you how to install Angular CLI, create a new project, run the project, and explore the project structure. We have also highlighted some of the new features and improvements in Angular v18.
With this knowledge, you should be able to start building powerful and responsive web applications with Angular v18. Happy coding!
y yo me quede en la v14 ._.
Vue (Nuxt) > React (Next) > Angular
4 minutos hablando de su viaje a Rusia en un video de Angular (de 12 minutos)…. interesante análisis de lo nuevo de Angular Midu, no cambies nunca
Pues a ver si remontan en popularidad, porque todas las series históricas muestran cómo lleva años perdiendo competitividad frente a React e incluso Vue.
El que dijo "Midudesky" se rifó, muy buen video Midu entretenido como siempre!
que diferencias tiene con las anteriores versiones?
la gente no recomienda aprender angular por que dicen que de version a version es como tener que volver a aprender todo de nuevo
El video comenzó con las nuevas features de Angular y terminó con una historia imperdible entre EEUU y Rusia jajajajaja grande midu
Midu! Haz un proyecto con Angular
Capaz que sí vas a china para hacer una entrevista o similar y te detienen para preguntarte la relación china-rusia Al final terminas encerrado como muchos sólo por ese sustito que les da.
Lo de input con signal se refieren a las decoradores @input, @output y otros más que ahora pasan a ser funciones signal su uso. Estos sirven para comunicar datos y eventos entre componentes de forma directa o sea no pasa por servicios ni por suscripciones, pero no podías convertir inputs en variables de signals al completo salvo que los pasaras por ciertos filtros que generaba código extenso para algo que siempre fue una linea corta de código. Ahora con esta versión directamente podes generar un signal input con la función input() la cual tiene el comportamiento típico de @input con las ventajas de un signal, tambien crearon el signal model que convina el input y output ya que al usar @output estabas obligados a crear un @input en el componente que lo comunica pero ahora estan unificados con model().
El RXJS es lo que hace a Angular más decente qué react, lo quitan y se va el encanto
larga vida a angular
Yo fui tal vez el primero que se dio cuenta que salió angular 18 antes de que lo anunciaran jaja y eso porque estaba intentando corregir un error, estaba usando angular 17.3.0, y en ese momento estaba la version 17.3.7 y actualice la version de angular y al ver la version si ya se habia actualizado, ya era la 18 😂, eran las 5am en mexico, y a la hora hicero la noticia oficial jaja
son grandes cambios o no ? xd
A mi el tema de que no tengan todavía soporte nativo de vitest… buf
Hola, a qué hora son los directos en twicht?
Trato de aprender algo y sale su actualización
Algunas cosas que yo pienso importantes de mencionar:
1. No hay "breaking changes", todo el código de las versiones anteriores sigue siendo compatible.
2. Los que eligen desarrollar con Angular como framework principal, no tenemos una mala experiencia, al contrario.
3. Angular con rxjs como opcional es algo bueno. Sin embargo, rxjs es una herramienta (y paradigma) muy útil en proyectos complejos, eso si, requiere estudio y práctica.
4. El boilerplate si es algo que puede mejorarse, pero hoy en día con casi cualquier herramienta de IA, esto se sobrelleva muy bien (yo utilizo Supermaven).
✌🏾
11:44 y 11:48 diablos señorito!!!
Se puso raro el vídeo xD