Angular7 - Configuración del proyecto

En este capítulo, discutiremos sobre la configuración del proyecto en Angular 7.

Para comenzar con la configuración del proyecto, asegúrese de tener instalado nodejs. You can check the version of node in the command line using the command, node –v, como se muestra a continuación -

Si no obtiene la versión, instale nodejs desde su sitio oficial -https://nodejs.org/en/.

Una vez que haya instalado nodejs, npm también se instalará con él. Para verificar la versión de npm, ejecute npm -v en la línea de comando como se muestra a continuación -

Entonces tenemos la versión 10 del nodo y la versión 6.4.1 de npm.

Para instalar Angular 7, vaya al sitio, https://cli.angular.io para instalar Angular CLI.

Verá los siguientes comandos en la página web:

npm install -g @angular/cli //command to install angular 7
ng new my-dream-app // name of the project
cd my-dream-app
ng serve

Los comandos anteriores ayudan a configurar el proyecto en Angular 7.

Crearemos una carpeta llamada projectA7 e instalar angular/cli como se muestra a continuación -

Una vez realizada la instalación, verifique los detalles de los paquetes instalados usando el comando ng version como se muestra a continuación:

Proporciona la versión para Angular CLI, la versión mecanografiada y otros paquetes disponibles para Angular 7.

Hemos terminado con la instalación de Angular 7, ahora comenzaremos con la configuración del proyecto.

Para crear un proyecto en Angular 7, usaremos el siguiente comando:

ng new projectname

Puede utilizar el nombre del proyecto que desee. Ejecutemos ahora el comando anterior en la línea de comandos.

Aquí, usamos el nombre del proyecto como angular7-app . Una vez que ejecute el comando, le preguntará sobre el enrutamiento como se muestra a continuación:

Escriba y para agregar enrutamiento a la configuración de su proyecto.

La siguiente pregunta es sobre la hoja de estilo:

Las opciones disponibles son CSS, Sass, Less y Stylus. En la captura de pantalla anterior, la flecha está en CSS. Para cambiar, puede usar las teclas de flecha para seleccionar el requerido para la configuración de su proyecto. En la actualidad, discutiremos CSS para la configuración de nuestro proyecto.

El proyecto angular7-app se crea correctamente. Instala todos los paquetes necesarios para que nuestro proyecto se ejecute en Angular7. Pasemos ahora al proyecto creado, que está en el directorioangular7-app.

Cambie el directorio en la línea de comando usando la línea de código dada -

cd angular7-app

Usaremos Visual Studio Code IDE para trabajar con Angular 7, puede usar cualquier IDE, es decir, Atom, WebStorm, etc.

Para descargar Visual Studio Code, vaya a https://code.visualstudio.com/ y haga clic en Descargar para Windows.

Haga clic en Descargar para Windows para instalar el IDE y ejecute la configuración para comenzar a usar IDE.

A continuación está el editor:

No hemos iniciado ningún proyecto en él. Tomemos ahora el proyecto que hemos creado usando angular-cli.

Consideraremos el angular7-appproyecto. Abramos elangular7-app y vea cómo se ve la estructura de la carpeta.

Ahora que tenemos la estructura de archivos para nuestro proyecto, compilemos nuestro proyecto con el siguiente comando:

ng serve

The ng serve command builds the application and starts the web server.

Verá lo siguiente cuando el comando comience a ejecutarse:

El servidor web se inicia en el puerto 4200. Escriba la URL, "http://localhost:4200/"en el navegador y ver la salida. Una vez que se compila el proyecto, recibirá el siguiente resultado:

Una vez que ejecute la URL, http://localhost:4200/ en el navegador, se le dirigirá a la siguiente pantalla:

Hagamos ahora algunos cambios para mostrar el siguiente contenido:

“Welcome to Angular 7!”

Hemos realizado cambios en los archivos: app.component.html y app.component.ts. Discutiremos más sobre esto en los capítulos siguientes.

Completemos la configuración del proyecto. Si ve que hemos utilizado el puerto 4200, que es el puerto predeterminado que utiliza angular-cli durante la compilación. Puede cambiar el puerto si lo desea usando el siguiente comando:

ng serve --host 0.0.0.0 –port 4205

La carpeta angular7-app / tiene lo siguiente folder structure-

e2e/- carpeta de prueba de extremo a extremo. Principalmente, e2e se utiliza para pruebas de integración y ayuda a garantizar que la aplicación funcione correctamente.
node_modules/- El paquete npm instalado es node_modules. Puede abrir la carpeta y ver los paquetes disponibles.
src/ - Esta carpeta es donde trabajaremos en el proyecto usando Angular 7. Dentro de src / you will app / folder creada durante la configuración del proyecto y contiene todos los archivos requeridos para el proyecto.

La carpeta angular7-app / tiene lo siguiente file structure -

angular.json - Básicamente contiene el nombre del proyecto, la versión de cli, etc.
.editorconfig - Este es el archivo de configuración para el editor.
.gitignore - Se debe enviar un archivo .gitignore al repositorio para compartir las reglas de ignorar con cualquier otro usuario que clone el repositorio.
package.json - El archivo package.json indica qué bibliotecas se instalarán en node_modules cuando ejecute npm install.

En la actualidad, si abre el archivo package.json en el editor, obtendrá los siguientes módulos agregados:

"@angular/animations": "~7.2.0", 
"@angular/common": "~7.2.0", 
"@angular/compiler": "~7.2.0", 
"@angular/core": "~7.2.0", 
"@angular/forms": "~7.2.0", 
"@angular/platform-browser": "~7.2.0", 
"@angular/platform-browser-dynamic": "~7.2.0", 
"@angular/router": "~7.2.0", 
"core-js": "^2.5.4", 
"rxjs": "~6.3.3", 
"tslib": "^1.9.0", 
"zone.js": "~0.8.26"

En caso de que necesite agregar más bibliotecas, puede agregarlas aquí y ejecutar el comando npm install.

tsconfig.json - Esto básicamente contiene las opciones del compilador necesarias durante la compilación.
tslint.json - Este es el archivo de configuración con reglas a considerar durante la compilación.

los src/ carpeta es la carpeta principal, que internamente tiene una estructura de archivo diferente.

aplicación

Contiene los archivos que se describen a continuación. Angular-cli instala estos archivos de forma predeterminada.

app.module.ts

Si abre el archivo, verá que el código hace referencia a diferentes bibliotecas, que se importan. Angular-cli ha utilizado estas bibliotecas predeterminadas para la importación: angular / core, platform-browser.

Los nombres en sí explican el uso de las bibliotecas. Se importan y guardan en variables como declaraciones, importaciones, proveedores y bootstrap.

Podemos ver app-routing.moduletambién se agrega. Esto se debe a que habíamos seleccionado el enrutamiento al inicio de la instalación. El módulo es agregado por @ angular / cli.

A continuación se muestra la estructura del archivo:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
   declarations: [
      AppComponent
   ],
   imports: [
      BrowserModule,
      AppRoutingModule
   ],
   providers: [],
   bootstrap: [AppComponent]
})
export class AppModule { }

@NgModule se importa desde @ angular / core y tiene un objeto con las siguientes propiedades:

Declarations- En declaraciones, se almacena la referencia a los componentes. El componente Aplicación es el componente predeterminado que se crea cada vez que se inicia un nuevo proyecto. Aprenderemos a crear nuevos componentes en una sección diferente.

Imports- Esto tendrá los módulos importados como se muestra arriba. En la actualidad, BrowserModule es parte de las importaciones que se importan desde @ angular / platform-browser. También hay un módulo de enrutamiento agregado AppRoutingModule.

Providers- Esto tendrá referencia a los servicios creados. El servicio se discutirá en un capítulo posterior.

Bootstrap - Esto hace referencia al componente predeterminado creado, es decir, AppComponent.

app.component.css- Puede escribir su css aquí. En este momento, hemos agregado el color de fondo al div como se muestra a continuación.

La estructura del archivo es la siguiente:

.divdetails {
   background-color: #ccc; 
}

app.component.html

El código html estará disponible en este archivo.

La estructura del archivo es la siguiente:

<!--The content below is only a placeholder and can be replaced.--> 
<div style = "text-align:center">
   <h1>Welcome to {{ title }}!</h1> 
   <img width = "300" alt = "Angular Logo" 
   src = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZp
   ZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA
   2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBma
   WxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSA
   zMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2
   wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3I
   DQwLjl6IiAvPgogIDwvc3ZnPg=="7> 
</div> 

<h2>Here are some links to help you start:</h2> 
<ul> 
   <li> 
      <h2><a target = "_blank" rel = "noopener" 
         href = "https://angular.io/tutorial">Tour of Heroes</a>
      </h2>
   </li> 
   <li> 
      <h2><a target = "_blank" rel = "noopener" 
         href = https://angular.io/cli">CLI Documentation</>
      </h2> 
   </li> 
   <li> 
      <h2><a target = "_blank" rel = "noopener" 
         href = "https://blog.angular.io/">Angular blog</a>
      </h2> 
   </li> 
</ul> 
<router-outlet></router-outlet>

Este es el código html predeterminado actualmente disponible con la creación del proyecto.

app.component.spec.ts

Estos son archivos generados automáticamente que contienen pruebas unitarias para el componente fuente.

app.component.ts

La clase para el componente se define aquí. Puede realizar el procesamiento de la estructura html en el archivo .ts. El procesamiento incluirá actividades como conectarse a la base de datos, interactuar con otros componentes, enrutamiento, servicios, etc.

La estructura del archivo es la siguiente:

import { Component } from '@angular/core';
@Component({
   selector: 'app-root',  
   templateUrl: './app.component.html', 
   styleUrls: ['./app.component.css'] 
})
export class AppComponent { 
   title = 'Angular 7';
}

app-routing.module.ts

Este archivo se ocupará del enrutamiento requerido para su proyecto. Está conectado con el módulo principal, es decir, app.module.ts.

La estructura del archivo es la siguiente:

import { NgModule } from '@angular/core'; 
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [];
@NgModule({ 
   imports: [RouterModule.forRoot(routes)], 
   exports: [RouterModule] 
}) 
export class AppRoutingModule { }

Bienes

Puede guardar sus imágenes, archivos js en esta carpeta.

Ambiente

Esta carpeta tiene detalles para la producción o el entorno de desarrollo. La carpeta contiene dos archivos.

environment.prod.ts
environment.ts

Ambos archivos tienen detalles sobre si el archivo final debe compilarse en el entorno de producción o en el entorno de desarrollo.

La estructura de archivo adicional de la carpeta angular7-app / incluye lo siguiente:

favicon.ico

Este es un archivo que generalmente se encuentra en el directorio raíz de un sitio web.

index.html

Este es el archivo que se muestra en el navegador.

<html lang = "en"> 
   <head>
      <meta charset = "utf-8"7gt;
      <title>Angular7App</title> 
      <base href = "/">
      <meta name = "viewport" content = "width=device-width, initial-scale=1"> 
      <link rel = "icon" type = "image/x-icon" href = "favicon.ico"> 
   </head> 
   <body> 
      <app-root></app-root> 
   </body> 
</html>

El cuerpo tiene <app-root></app-root>. Este es el selector que se utiliza enapp.component.ts archivo y mostrará los detalles de app.component.html archivo.

main.ts

main.ts es el archivo desde donde comenzamos el desarrollo de nuestro proyecto. Comienza con la importación del módulo básico que necesitamos. En este momento, si ve angular / core, angular / platform-browser-dynamic, app.module y el entorno se importan de forma predeterminada durante la instalación de angular-cli y la configuración del proyecto.

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module'; 
import { environment } from './environments/environment';

if (environment.production) { 
   enableProdMode(); 
}
platformBrowserDynamic().bootstrapModule(AppModule).catch(err => console.error(err));

PlatformBrowserDynamic (). BootstrapModule (AppModule) tiene la referencia del módulo principal AppModule. Por lo tanto, cuando se ejecuta en el navegador, el archivo se llama index.html. Index.html se refiere internamente a main.ts que llama al módulo principal, es decir, AppModule cuando se ejecuta el siguiente código:

platformBrowserDynamic().bootstrapModule(AppModule).catch(err => console.error(err));

Cuando se llama a AppModule, llama a app.module.ts, que además llama a AppComponent según el bootstrap de la siguiente manera:

bootstrap: [AppComponent]

En app.component.ts, hay un selector: app-rootque se utiliza en el archivo index.html. Esto mostrará el contenido presente enapp.component.html.

Lo siguiente se mostrará en el navegador: