You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Get started with Angular quickly with online starters or locally with your terminal.
5
+
6
+
## Play Online
7
+
8
+
If you just want to play around with Angular in your browser without setting up a project, you can use our online sandbox:
9
+
10
+
<docs-card-container>
11
+
<docs-cardtitle=""href="/playground"link="Open on Playground">
12
+
The fastest way to play with an Angular app. No setup required.
13
+
</docs-card>
14
+
</docs-card-container>
15
+
16
+
## Set up a new project locally
17
+
18
+
If you're starting a new project, you'll most likely want to create a local project so that you can use tooling such as Git.
19
+
20
+
### Prerequisites
21
+
22
+
-**Node.js** - [v20.11.1 or newer](/reference/versions)
23
+
-**Text editor** - We recommend [Visual Studio Code](https://code.visualstudio.com/)
24
+
-**Terminal** - Required for running Angular CLI commands
25
+
-**Development Tool** - To improve your development workflow, we recommend the [Angular Language Service](/tools/language-service)
26
+
27
+
### Instructions
28
+
29
+
The following guide will walk you through setting up a local Angular project.
30
+
31
+
#### Install Angular CLI
32
+
33
+
Open a terminal (if you're using [Visual Studio Code](https://code.visualstudio.com/), you can open an [integrated terminal](https://code.visualstudio.com/docs/editor/integrated-terminal)) and run the following command:
34
+
35
+
<docs-code-multifile>
36
+
<docs-code
37
+
header="npm"
38
+
>
39
+
npm install -g @angular/cli
40
+
</docs-code>
41
+
<docs-code
42
+
header="pnpm"
43
+
>
44
+
pnpm install -g @angular/cli
45
+
</docs-code>
46
+
<docs-code
47
+
header="yarn"
48
+
>
49
+
yarn global add @angular/cli
50
+
</docs-code>
51
+
<docs-code
52
+
header="bun"
53
+
>
54
+
bun install -g @angular/cli
55
+
</docs-code>
56
+
57
+
</docs-code-multifile>
58
+
59
+
If you are having issues running this command in Windows or Unix, check out the [CLI docs](/tools/cli/setup-local#install-the-angular-cli) for more info.
60
+
61
+
#### Create a new project
62
+
63
+
In your terminal, run the CLI command `ng new` with the desired project name. In the following examples, we'll be using the example project name of `my-first-angular-app`.
64
+
65
+
<docs-codelanguage="shell">
66
+
67
+
ng new <project-name>
68
+
69
+
</docs-code>
70
+
71
+
You will be presented with some configuration options for your project. Use the arrow and enter keys to navigate and select which options you desire.
72
+
73
+
If you don't have any preferences, just hit the enter key to take the default options and continue with the setup.
74
+
75
+
After you select the configuration options and the CLI runs through the setup, you should see the following message:
76
+
77
+
```shell
78
+
✔ Packages installed successfully.
79
+
Successfully initialized git.
80
+
```
81
+
82
+
At this point, you're now ready to run your project locally!
83
+
84
+
#### Running your new project locally
85
+
86
+
In your terminal, switch to your new Angular project.
87
+
88
+
<docs-codelanguage="shell">
89
+
90
+
cd my-first-angular-app
91
+
92
+
</docs-code>
93
+
94
+
All of your dependencies should be installed at this point (which you can verify by checking for the existent for a `node_modules` folder in your project), so you can start your project by running the command:
95
+
96
+
<docs-codelanguage="shell">
97
+
98
+
npm start
99
+
100
+
</docs-code>
101
+
102
+
If everything is successful, you should see a similar confirmation message in your terminal:
103
+
104
+
```shell
105
+
Watch mode enabled. Watching for file changes...
106
+
NOTE: Raw file sizes do not reflect development server per-request transformations.
107
+
➜ Local: http://localhost:4200/
108
+
➜ press h + enter to show help
109
+
```
110
+
111
+
And now you can visit the path in `Local` (e.g., `http://localhost:4200`) to see your application. Happy coding! 🎉
112
+
113
+
### Using AI for Development
114
+
115
+
To get started with building in your preferred AI powered IDE, [check out Angular prompt rules and best practices](/ai/develop-with-ai).
116
+
117
+
## Next steps
118
+
119
+
Now that you've created your Angular project, you can learn more about Angular in our [Essentials guide](/essentials) or choose a topic in our in-depth guides!
Get started with Angular quickly with online starters or locally with your terminal.
4
+
Comienza con Angular rápidamente usando iniciadores en línea o localmente con tu terminal.
5
5
6
-
## Play Online
6
+
## Probar en línea
7
7
8
-
If you just want to play around with Angular in your browser without setting up a project, you can use our online sandbox:
8
+
Si solo quieres experimentar con Angular en tu navegador sin configurar un proyecto, puedes usar nuestro sandbox en línea:
9
9
10
10
<docs-card-container>
11
-
<docs-cardtitle=""href="/playground"link="Open on Playground">
12
-
The fastest way to play with an Angular app. No setup required.
11
+
<docs-cardtitle=""href="/playground"link="Abrir en Playground">
12
+
La forma más rápida de experimentar con una aplicación Angular. No requiere configuración.
13
13
</docs-card>
14
14
</docs-card-container>
15
15
16
-
## Set up a new project locally
16
+
## Configurar un nuevo proyecto localmente
17
17
18
-
If you're starting a new project, you'll most likely want to create a local project so that you can use tooling such as Git.
18
+
Si estás comenzando un nuevo proyecto, lo más probable es que quieras crear un proyecto local para poder usar herramientas como Git.
19
19
20
-
### Prerequisites
20
+
### Prerrequisitos
21
21
22
-
-**Node.js** - [v20.11.1 or newer](/reference/versions)
23
-
-**Text editor** - We recommend[Visual Studio Code](https://code.visualstudio.com/)
24
-
-**Terminal** - Required for running Angular CLI commands
25
-
-**Development Tool** - To improve your development workflow, we recommend the[Angular Language Service](/tools/language-service)
22
+
-**Node.js** - [v20.11.1 o más reciente](/reference/versions)
23
+
-**Editor de texto** - Recomendamos[Visual Studio Code](https://code.visualstudio.com/)
24
+
-**Terminal** - Requerido para ejecutar comandos de Angular CLI
25
+
-**Herramienta de desarrollo** - Para mejorar tu flujo de trabajo de desarrollo, recomendamos el[Angular Language Service](/tools/language-service)
26
26
27
-
### Instructions
27
+
### Instrucciones
28
28
29
-
The following guide will walk you through setting up a local Angular project.
29
+
La siguiente guía te explicará cómo configurar un proyecto de Angular de forma local.
30
30
31
-
#### Install Angular CLI
31
+
#### Instalar Angular CLI
32
32
33
-
Open a terminal (if you're using[Visual Studio Code](https://code.visualstudio.com/), you can open an [integrated terminal](https://code.visualstudio.com/docs/editor/integrated-terminal)) and run the following command:
33
+
Abre una terminal (si estás usando[Visual Studio Code](https://code.visualstudio.com/), puedes abrir una [terminal integrada](https://code.visualstudio.com/docs/editor/integrated-terminal)) y ejecuta el siguiente comando:
34
34
35
35
<docs-code-multifile>
36
36
<docs-code
@@ -56,50 +56,50 @@ Open a terminal (if you're using [Visual Studio Code](https://code.visualstudio.
56
56
57
57
</docs-code-multifile>
58
58
59
-
If you are having issues running this command in Windows or Unix, check out the [CLI docs](/tools/cli/setup-local#install-the-angular-cli)for more info.
59
+
Si tienes problemas ejecutando este comando en Windows o Unix, consulta la [Documentación del CLI](/tools/cli/setup-local#install-the-angular-cli)para más información.
60
60
61
-
#### Create a new project
61
+
#### Crear un nuevo proyecto
62
62
63
-
In your terminal, run the CLI command `ng new`with the desired project name. In the following examples, we'll be using the example project name of`my-first-angular-app`.
63
+
En tu terminal, ejecuta el comando de la CLI `ng new`con el nombre del proyecto deseado. En los siguientes ejemplos, usaremos el nombre de proyecto de ejemplo`my-first-angular-app`.
64
64
65
65
<docs-codelanguage="shell">
66
66
67
67
ng new <project-name>
68
68
69
69
</docs-code>
70
70
71
-
You will be presented with some configuration options for your project. Use the arrow and enter keys to navigate and select which options you desire.
71
+
Se te presentarán algunas opciones de configuración para tu proyecto. Usa las teclas de flecha y enter para navegar y seleccionar las opciones que desees.
72
72
73
-
If you don't have any preferences, just hit the enter key to take the default options and continue with the setup.
73
+
Si no tienes ninguna preferencia, simplemente presiona enter para aceptar las opciones predeterminadas y continuar con la configuración.
74
74
75
-
After you select the configuration options and the CLI runs through the setup, you should see the following message:
75
+
Después de seleccionar las opciones de configuración y que la CLI la ejecute, deberias ver el siguiente mensaje:
76
76
77
77
```shell
78
78
✔ Packages installed successfully.
79
79
Successfully initialized git.
80
80
```
81
81
82
-
At this point, you're now ready to run your project locally!
82
+
En este punto, ¡ya estás listo para ejecutar tu proyecto localmente!
83
83
84
-
#### Running your new project locally
84
+
#### Ejecutar tu nuevo proyecto localmente
85
85
86
-
In your terminal, switch to your new Angular project.
86
+
En tu termina, cambia a tu nuevo proyecto en Angular.
87
87
88
88
<docs-codelanguage="shell">
89
89
90
90
cd my-first-angular-app
91
91
92
92
</docs-code>
93
93
94
-
All of your dependencies should be installed at this point (which you can verify by checking for the existent for a `node_modules`folder in your project), so you can start your project by running the command:
94
+
Todas tus dependencias deberían estar instaladas en este punto (lo cual puedes verificar revisando la existencia de una carpeta `node_modules`en tu proyecto), así que puedes iniciar tu proyecto ejecutando el comando:
95
95
96
96
<docs-codelanguage="shell">
97
97
98
98
npm start
99
99
100
100
</docs-code>
101
101
102
-
If everything is successful, you should see a similar confirmation message in your terminal:
102
+
Si todo es exitoso, deberías ver un mensaje de confirmación similar en tu terminal:
103
103
104
104
```shell
105
105
Watch mode enabled. Watching for file changes...
@@ -108,12 +108,14 @@ NOTE: Raw file sizes do not reflect development server per-request transformatio
108
108
➜ press h + enter to show help
109
109
```
110
110
111
-
And now you can visit the path in `Local` (e.g., `http://localhost:4200`) to see your application. Happy coding! 🎉
111
+
Y ahora puedes visitar la ruta en `Local` (por ejemplo, `http://localhost:4200`) para ver tu aplicación. ¡Disfruta programando! 🎉
112
112
113
-
### Using AI for Development
114
113
115
-
To get started with building in your preferred AI powered IDE, [check out Angular prompt rules and best practices](/ai/develop-with-ai).
114
+
### Usar IA para el desarrollo
116
115
117
-
## Next steps
116
+
Para comenzar a construir en tu IDE preferido con IA, [consulta las reglas de prompts de Angular y las mejores prácticas](/ai/develop-with-ai).
118
117
119
-
Now that you've created your Angular project, you can learn more about Angular in our [Essentials guide](/essentials) or choose a topic in our in-depth guides!
118
+
119
+
## Próximos pasos
120
+
121
+
Ahora que has creado tu proyecto Angular, puedes aprender más sobre Angular en nuestra [Guía de Fundamentos](/essentials) o elegir un tema en nuestras guías detalladas!
0 commit comments