CLI angular | Configuración de proyecto angular

Angular es un marco front-end que se utiliza para crear aplicaciones web. Utiliza TypeScript de forma predeterminada para crear lógicas y métodos para una clase, pero el navegador no conoce TypeScript. Aquí aparece el paquete web, el paquete web se usa para compilar estos archivos TypeScripts en JavaScript. Además, hay tantos archivos de configuración que necesitará para ejecutar un proyecto angular en su computadora.
Angular CLI es una herramienta que hace todas estas cosas por usted con algunos comandos simples. Angular CLI usa el paquete web detrás para hacer todo este proceso.

Nota: asegúrese de haber instalado node y npm en su sistema. Puede verificar la versión de su Node y la versión de npm usando el siguiente comando:

node --version
npm --version

Pasos para crear su primera aplicación usando CLI angular:

Paso 1: instalar angular cli
```
npm install - g @angular/cli
```
Paso 2: Cree un nuevo proyecto con este comando
Elija sí para la opción de enrutamiento y CSS o SCSS.
```
ng new myNewApp
```
Paso 3: Vaya al directorio de su proyecto
```
cd myNewApp
```
Paso 4: Ejecute el servidor y vea su aplicación en acción
```
ng serve -o --poll=2000
```

Introducción a la estructura de directorios:

e2e Contiene el código relacionado con el propósito de prueba automatizada. Por ejemplo, si en una página determinada está llamando a una API REST, ¿cuál debería ser el código de estado de retorno, si es aceptable o no, etc.
node_modules Guarda todas las dependencias de desarrollo (usadas solo en el momento del desarrollo) y las dependencias (usadas para el desarrollo y necesarias en el tiempo de producción), cualquier nueva dependencia cuando se agrega al proyecto se guarda automáticamente en esta carpeta.
src Este directorio contiene todo nuestro trabajo relacionado con el proyecto, es decir, crear componentes, crear servicios, agregar CSS a la página respectiva, etc.
package.json Este archivo almacena la información sobre las bibliotecas agregadas y utilizadas en el proyecto con su versión especificada instalada. Cada vez que se agrega una nueva biblioteca al proyecto, su nombre y versión se agregan a las dependencias en package.json.

Otros archivos: como principiante, no necesita estos archivos en este momento, no se preocupe por eso. Todos estos se utilizan para las configuraciones del editor y la información necesaria en el momento de la compilación. El paquete web incorporado en angular CLI administra todo por usted.

Dentro de la carpeta src:

index.html Este es el punto de entrada para la aplicación, la etiqueta raíz de la aplicación es el punto de entrada de la aplicación en esta aplicación de una sola página, en esta página angular agregará o eliminará el contenido del DOM o agregará contenido nuevo al DOM . Base href=”/” es importante para fines de enrutamiento.

html

<!DOCTYPE HTML>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>MyNewApp</title>
        <base href="/">
          
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="icon" type="image/x-icon" href="favison.ico">
    </head>
    <body>
        <app-root></app-root>
    </body>
</html>

style.scss Este archivo es la hoja de estilo global que puede agregar a las clases CSS o selectores que son comunes a muchos componentes, por ejemplo, puede importar fuentes personalizadas, importar bootstrap.css, etc.
activos Contiene las imágenes js, fuentes, íconos y muchos otros archivos para su proyecto.

Dentro de la carpeta de la aplicación:

app.module.ts Un proyecto angular está compuesto de tantos otros módulos para crear una aplicación, debe crear un módulo raíz para su aplicación en la jerarquía. Este archivo app.module.ts es eso. Si desea agregar más módulos en el nivel raíz, puede agregar.
- declaraciones Es la referencia del arreglo para almacenar sus componentes. El componente de la aplicación es el componente predeterminado que se genera cuando se crea un proyecto. Debe agregar todas las referencias de su componente a esta array para que estén disponibles en el proyecto.
- importaciones Si desea agregar cualquier módulo, ya sea angular o debe agregarlo a la array de importaciones para que estén disponibles en todo el proyecto.
- proveedores Si creará algún servicio para su aplicación, lo inyectará en su proyecto a través de esta array de proveedores. El servicio inyectado a un módulo está disponible para él y su módulo secundario en la jerarquía del proyecto.
- bootstrap Esto hace referencia al componente predeterminado creado, es decir, AppComponent
app.component.html Edite este archivo para realizar cambios en la página. Puede editar este archivo como un archivo HTML. Trabaje directamente con div o cualquier otra etiqueta utilizada dentro de las etiquetas del cuerpo, estos son componentes y no agregan etiquetas de cuerpo de cabeza html .

html

<h1>

    Hello world

</h1>



<div>

    <p>

        This is my First Angular app.

    </p>

</div>
app.component.spec.ts Estos son archivos generados automáticamente que contienen pruebas unitarias para el componente fuente.
app.component.ts Puede realizar el procesamiento de la estructura HTML en el archivo .ts. El procesamiento incluirá actividades tales como conectarse a la base de datos, interactuar con otros componentes, enrutamiento, servicios, etc.
app.component.scss Aquí puede agregar CSS para su componente. Puede escribir scss, que luego se compilará en CSS mediante un transpilador.

Más comandos que necesitará mientras trabaja en el proyecto:

ng generate component component_name
ng generate service service_name
ng generate directive directive_name

Publicación traducida automáticamente

Artículo escrito por Pankaj_Singh y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

html

html

Deja una respuesta Cancelar la respuesta