Desarrolla aplicaciones en el contexto de un espacio de trabajo angular. Un espacio de trabajo contiene los archivos de uno o más proyectos. Un proyecto es el conjunto de archivos que comprenden una aplicación independiente o una biblioteca que se puede compartir.

La CLI angular ng new comando crea un espacio de trabajo.

ng new <my-project>

Cuando ejecuta este comando, la CLI instala los paquetes npm angulares necesarios y otras dependencias en un nuevo espacio de trabajo, con una aplicación de nivel raíz llamada mi proyecto. La carpeta raíz del espacio de trabajo contiene varios archivos de configuración y soporte, y un archivo README con texto descriptivo generado que puede personalizar.

Por defecto, ng new crea una aplicación de esqueleto inicial en el nivel raíz del espacio de trabajo, junto con sus pruebas de extremo a extremo. El esqueleto es para una aplicación de bienvenida simple que está lista para ejecutarse y es fácil de modificar. La aplicación de nivel raíz tiene el mismo nombre que el espacio de trabajo y los archivos de origen residen en el src/ subcarpeta del espacio de trabajo.

Este comportamiento predeterminado es adecuado para un estilo de desarrollo típico de “repositorios múltiples” en el que cada aplicación reside en su propio espacio de trabajo. Se anima a los usuarios principiantes e intermedios a utilizar ng new para crear un espacio de trabajo independiente para cada aplicación.

Angular también admite espacios de trabajo con múltiples proyectos. Este tipo de entorno de desarrollo es adecuado para usuarios avanzados que están desarrollando bibliotecas compartibles y para empresas que utilizan un estilo de desarrollo “monorepo”, con un único repositorio y configuración global para todos los proyectos de Angular.

Para configurar un espacio de trabajo de monorepo, debe omitir la creación de la aplicación raíz. Consulte Configuración para un espacio de trabajo de varios proyectos a continuación.

Archivos de configuración del espacio de trabajo

Todos los proyectos dentro de un espacio de trabajo comparten un contexto de configuración CLI. El nivel superior del espacio de trabajo contiene archivos de configuración de todo el espacio de trabajo, archivos de configuración para la aplicación de nivel raíz y subcarpetas para los archivos fuente y de prueba de la aplicación de nivel raíz.

ARCHIVOS DE CONFIGURACIÓN DEL ESPACIO DE TRABAJO OBJETIVO
.editorconfig Configuración para editores de código. Ver EditorConfig.
.gitignore Especifica archivos no rastreados intencionalmente que Git debería ignorar.
README.md Documentación introductoria para la aplicación raíz.
angular.json Valores predeterminados de configuración de CLI para todos los proyectos en el espacio de trabajo, incluidas las opciones de configuración para compilar, servir y probar las herramientas que utiliza la CLI, como TSLint, Karma, y Transportador. Para obtener más información, consulte Configuración del espacio de trabajo angular.
package.json Configura las dependencias del paquete npm que están disponibles para todos los proyectos en el espacio de trabajo. Ver documentación npm para el formato y contenido específicos de este archivo.
package-lock.json Proporciona información sobre la versión de todos los paquetes instalados en node_modules por el cliente npm. Ver documentación npm para detalles. Si usa el cliente de hilo, este archivo será hilo.lock en lugar de.
src/ Archivos de origen para el proyecto de aplicación de nivel raíz.
node_modules/ Proporciona paquetes npm a todo el espacio de trabajo. En todo el espacio de trabajo node_modules las dependencias son visibles para todos los proyectos.
tsconfig.json La base Mecanografiado configuración para proyectos en el espacio de trabajo. Todos los demás archivos de configuración heredan de este archivo base. Para obtener más información, consulte el Herencia de configuración con extensiones sección de la documentación de TypeScript.
tslint.json Defecto TSLint configuración para proyectos en el espacio de trabajo.

Archivos de proyecto de aplicación

De forma predeterminada, el comando CLI ng new my-app crea una carpeta de espacio de trabajo llamada “my-app” y genera un nuevo esqueleto de aplicación en un src/ carpeta en el nivel superior del espacio de trabajo. Una aplicación recién generada contiene archivos fuente para un módulo raíz, con un componente raíz y una plantilla.

Cuando la estructura de archivos del espacio de trabajo está en su lugar, puede utilizar la ng generate comando en la línea de comando para agregar funcionalidad y datos a la aplicación. Esta aplicación inicial a nivel de raíz es la aplicación predeterminada para los comandos CLI (a menos que cambie el valor predeterminado después de crear aplicaciones adicionales).

Además de usar la CLI en la línea de comandos, también puede manipular archivos directamente en la carpeta de origen de la aplicación y los archivos de configuración.

Para un espacio de trabajo de una sola aplicación, src/ La subcarpeta del espacio de trabajo contiene los archivos de origen (lógica de la aplicación, datos y activos) para la aplicación raíz. Para un espacio de trabajo de varios proyectos, proyectos adicionales en el projects/ carpeta contiene un project-name/src/ subcarpeta con la misma estructura.

Archivos de origen de la aplicación

Archivos en el nivel superior de src/ Apoyar la prueba y ejecución de su aplicación. Las subcarpetas contienen el origen de la aplicación y la configuración específica de la aplicación.

ARCHIVOS DE SOPORTE DE APLICACIONES OBJETIVO
app/ Contiene los archivos de componentes en los que se definen la lógica y los datos de su aplicación. Vea los detalles abajo.
assets/ Contiene imágenes y otros archivos de activos que se copiarán tal cual cuando se compile la aplicación.
environments/ Contiene opciones de configuración de compilación para entornos de destino particulares. De forma predeterminada, hay un entorno de desarrollo estándar sin nombre y un entorno de producción (“prod”). Puede definir configuraciones de entorno de destino adicionales.
favicon.ico Un icono que se utilizará para esta aplicación en la barra de marcadores.
index.html La página HTML principal que se muestra cuando alguien visita su sitio. La CLI agrega automáticamente todos los archivos JavaScript y CSS al crear su aplicación, por lo que normalmente no necesita agregar ningún

Dentro de src/ carpeta, la app/ La carpeta contiene la lógica y los datos de su proyecto. Los componentes angulares, las plantillas y los estilos van aquí.

src/app/ ARCHIVOS OBJETIVO
app/app.component.ts Define la lógica del componente raíz de la aplicación, denominado AppComponent. La vista asociada con este componente raíz se convierte en la raíz de la jerarquía de vistas a medida que agrega componentes y servicios a su aplicación.
app/app.component.html Define la plantilla HTML asociada a la raíz. AppComponent.
app/app.component.css Define la hoja de estilo CSS base para la raíz. AppComponent.
app/app.component.spec.ts Define una prueba unitaria para la raíz. AppComponent.
app/app.module.ts Define el módulo raíz, llamado AppModule, que le dice a Angular cómo ensamblar la aplicación. Inicialmente declara solo el AppComponent. A medida que agrega más componentes a la aplicación, deben declararse aquí.

Archivos de configuración de la aplicación

Los archivos de configuración específicos de la aplicación para la aplicación raíz residen en el nivel raíz del espacio de trabajo. Para un espacio de trabajo de varios proyectos, los archivos de configuración específicos del proyecto se encuentran en la raíz del proyecto, en projects/project-name/.

Proyecto específico Mecanografiado los archivos de configuración heredan del espacio de trabajo tsconfig.jsony específico del proyecto TSLint los archivos de configuración heredan del espacio de trabajo tslint.json.

ARCHIVOS DE CONFIGURACIÓN ESPECÍFICOS DE LA APLICACIÓN OBJETIVO
.browserslistrc Configura el uso compartido de los navegadores de destino y las versiones de Node.js entre varias herramientas de front-end. Ver Lista de navegadores en GitHub para más información.
karma.conf.js Específico de la aplicación Karma configuración.
tsconfig.app.json Específico de la aplicación Mecanografiado configuración, incluidas las opciones del compilador de plantillas TypeScript y Angular. Consulte Configuración de TypeScript y Opciones del compilador angular.
tsconfig.spec.json Mecanografiado configuración para las pruebas de la aplicación. Consulte Configuración de TypeScript.
tslint.json Específico de la aplicación TSLint configuración.

Archivos de prueba de un extremo a otro

Un e2e/ La carpeta en el nivel superior contiene archivos de origen para un conjunto de pruebas de un extremo a otro que corresponden a la aplicación de nivel raíz, junto con archivos de configuración específicos de la prueba.

Para un espacio de trabajo de varios proyectos, las pruebas de un extremo a otro específicas de la aplicación se encuentran en la raíz del proyecto, en projects/project-name/e2e/.

e2e/
     src/                 (end-to-end tests for my-app)
        app.e2e-spec.ts
        app.po.ts
      protractor.conf.js  (test-tool config)
      tsconfig.json       (TypeScript config inherits from workspace)

Múltiples proyectos

Un espacio de trabajo de varios proyectos es adecuado para una empresa que utiliza un repositorio único y una configuración global para todos los proyectos de Angular (el modelo "monorepo"). Un espacio de trabajo de varios proyectos también es compatible con el desarrollo de bibliotecas.

Configuración para un espacio de trabajo de varios proyectos

Si tiene la intención de tener varios proyectos en un espacio de trabajo, puede omitir la generación de la aplicación inicial cuando crea el espacio de trabajo y darle al espacio de trabajo un nombre único. El siguiente comando crea un espacio de trabajo con todos los archivos de configuración de todo el espacio de trabajo, pero ninguna aplicación de nivel raíz.

ng new my-workspace --create-application false

Luego, puede generar aplicaciones y bibliotecas con nombres únicos dentro del espacio de trabajo.

cd my-workspace
ng generate application my-first-app

Estructura de archivos de proyectos múltiples

La primera aplicación generada explícitamente entra en el projects/ carpeta junto con todos los demás proyectos en el espacio de trabajo. Las bibliotecas recién generadas también se agregan bajo projects/. Cuando crea proyectos de esta manera, la estructura de archivos del espacio de trabajo es totalmente coherente con la estructura del archivo de configuración del espacio de trabajo, angular.json.

my-workspace/
  ...             (workspace-wide config files)
  projects/       (generated applications and libraries)
    my-first-app/ --(an explicitly generated application)
      ...         --(application-specific config)
      e2e/        ----(corresponding e2e tests)
         src/     ----(e2e tests source)
         ...      ----(e2e-specific config)
      src/        --(source and support files for application)
    my-lib/       --(a generated library)
      ...         --(library-specific config)
      src/        --source and support files for library)

Archivos de proyecto de biblioteca

Cuando genera una biblioteca usando la CLI (con un comando como ng generate library my-lib), los archivos generados van al projects/ carpeta del espacio de trabajo. Para obtener más información sobre cómo crear sus propias bibliotecas, consulte Creación de bibliotecas.

Las bibliotecas (a diferencia de las aplicaciones y sus proyectos e2e asociados) tienen sus propias package.json configuración expediente.

Bajo la projects/ carpeta, la my-lib carpeta contiene su código de biblioteca.

ARCHIVOS FUENTE DE LA BIBLIOTECA OBJETIVO
src/lib Contiene la lógica y los datos de su proyecto de biblioteca. Al igual que un proyecto de aplicación, un proyecto de biblioteca puede contener componentes, servicios, módulos, directivas y canalizaciones.
src/test.ts El principal punto de entrada para sus pruebas unitarias, con alguna configuración específica de la biblioteca. Por lo general, no es necesario editar este archivo.
src/public-api.ts Especifica todos los archivos que se exportan desde su biblioteca.
karma.conf.js Específico de la biblioteca Karma configuración.
ng-package.json Archivo de configuración utilizado por ng-packagr para construir su biblioteca.
package.json Configura las dependencias del paquete npm necesarias para esta biblioteca.
tsconfig.lib.json Específico de la biblioteca Mecanografiado configuración, incluidas las opciones del compilador de plantillas TypeScript y Angular. Consulte Configuración de TypeScript.
tsconfig.lib.prod.json Específico de la biblioteca Mecanografiado configuración que se utiliza al construir la biblioteca en modo de producción.
tsconfig.spec.json Mecanografiado configuración para las pruebas de la biblioteca. Consulte Configuración de TypeScript.
tslint.json Específico de la biblioteca TSLint configuración.

Te mostramos reseñas y valoraciones

¡Haz clic para puntuar esta entrada!
(Votos: 4 Promedio: 4.5)

Tags : /

Utiliza Nuestro Buscador

Preguntas Relacionadas:

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Sitemap

Sitemap Principal

Categorías de la Web

Respuestas a preguntas comunes sobre programacion y tecnología