Angular 6 - Configuración del proyecto

AngularJS se basa en el controlador de vista del modelo, mientras que Angular 4 se basa en la estructura de componentes. Angular 6 funciona en la misma estructura que Angular4 pero es más rápido en comparación con Angular4.

Angular6 usa la versión TypeScript 2.9, mientras que Angular 4 usa la versión 2.2 de TypeScript. Esto trae mucha diferencia en el rendimiento.

Para instalar Angular 6, el equipo de Angular creó Angular CLI que facilita la instalación. Necesita ejecutar algunos comandos para instalar Angular 6.

Ir a este sitio https://cli.angular.io para instalar Angular CLI.

Para comenzar con la instalación, primero debemos asegurarnos de tener nodejs y npm instalados con la última versión. El paquete npm se instala junto con nodejs.

Ir al sitio de nodejs https://nodejs.org/en/.

Se recomienda a los usuarios la última versión de Nodejs v8.11.3. Los usuarios que ya tienen nodejs superior a 8.11 pueden omitir el proceso anterior. Una vez que nodejs está instalado, puede verificar la versión de node en la línea de comando usando el comando, node-v, como se muestra a continuación -

node -v
v8.11.3

El símbolo del sistema muestra v8.11.3. Una vez que nodejs esté instalado, npm también se instalará junto con él.

Para verificar la versión de npm, escriba comando npm -ven la terminal. Mostrará la versión de npm como se muestra a continuación.

npm -v
v5.6.0

La versión de npm es 5.6.0. Ahora que tenemos nodejs y npm instalados, ejecutemos los comandos de angular cli para instalar Angular 6. Verá los siguientes comandos en la página web:

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

Comencemos con el primer comando en la línea de comandos y veamos cómo funciona.

Para empezar, crearemos un directorio vacío en el que ejecutaremos el comando Angular CLI.

npm install -g @angular/cli //command to install angular 6

Hemos creado una carpeta vacía ProjectA4e instaló el comando Angular CLI. También hemos utilizado-gpara instalar Angular CLI a nivel mundial. Ahora, puede crear su proyecto Angular 4 en cualquier directorio o carpeta y no tiene que instalar el proyecto CLI de Angular, ya que está instalado en su sistema a nivel mundial y puede usarlo desde cualquier directorio.

Vamos a comprobar ahora si Angular CLI está instalado o no. Para verificar la instalación, ejecute el siguiente comando en la terminal:

ng -v
     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / ? \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 6.1.3
Node: 8.11.3
OS: win32 x64
Angular:
...

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.7.3
@angular-devkit/core         0.7.3
@angular-devkit/schematics   0.7.3
@schematics/angular          0.7.3
@schematics/update           0.7.3
rxjs                         6.2.2
typescript                   2.9.2

Obtenemos la versión @ angular / cli, que actualmente es 6.1.3. La versión del nodo en ejecución es 8.11.3 y también los detalles del sistema operativo. Los detalles anteriores nos dicen que hemos instalado angular cli con éxito y ahora estamos listos para comenzar con nuestro proyecto.

Ahora hemos instalado Angular 6. Creemos ahora nuestro primer proyecto en Angular 6. Para crear un proyecto en Angular 6, usaremos el siguiente comando:

ng new projectname

Nombraremos el proyecto ng new Angular6App.

Ejecutemos ahora el comando anterior en la línea de comandos.

ng new Angular6App
CREATE Angular6App/angular.json (3593 bytes)
CREATE Angular6App/package.json (1317 bytes)
CREATE Angular6App/README.md (1028 bytes)
CREATE Angular6App/tsconfig.json (408 bytes)
CREATE Angular6App/tslint.json (2805 bytes)
CREATE Angular6App/.editorconfig (245 bytes)
CREATE Angular6App/.gitignore (503 bytes)
CREATE Angular6App/src/favicon.ico (5430 bytes)
CREATE Angular6App/src/index.html (298 bytes)
CREATE Angular6App/src/main.ts (370 bytes)
CREATE Angular6App/src/polyfills.ts (3194 bytes)
CREATE Angular6App/src/test.ts (642 bytes)
CREATE Angular6App/src/styles.css (80 bytes)
CREATE Angular6App/src/browserslist (375 bytes)
CREATE Angular6App/src/karma.conf.js (964 bytes)
CREATE Angular6App/src/tsconfig.app.json (170 bytes)
CREATE Angular6App/src/tsconfig.spec.json (256 bytes)
CREATE Angular6App/src/tslint.json (314 bytes)
CREATE Angular6App/src/assets/.gitkeep (0 bytes)
CREATE Angular6App/src/environments/environment.prod.ts (51 bytes)
CREATE Angular6App/src/environments/environment.ts (642 bytes)
CREATE Angular6App/src/app/app.module.ts (314 bytes)
CREATE Angular6App/src/app/app.component.html (1141 bytes)
CREATE Angular6App/src/app/app.component.spec.ts (1010 bytes)
CREATE Angular6App/src/app/app.component.ts (215 bytes)
CREATE Angular6App/src/app/app.component.css (0 bytes)
CREATE Angular6App/e2e/protractor.conf.js (752 bytes)
CREATE Angular6App/e2e/tsconfig.e2e.json (213 bytes)
CREATE Angular6App/e2e/src/app.e2e-spec.ts (307 bytes)
CREATE Angular6App/e2e/src/app.po.ts (208 bytes)

El proyecto Angular6Appse crea correctamente. Instala todos los paquetes necesarios para que nuestro proyecto se ejecute en Angular 6. Pasemos ahora al proyecto creado, que se encuentra en el directorioAngular6App. Cambie el directorio en la línea de comando -cd Angular 6-app.

Usaremos Visual Studio Code IDE para trabajar con Angular 6; puede utilizar cualquier IDE, es decir, Atom, WebStorm, etc.

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

Hacer clic Download for Windows para instalar el IDE y ejecutar la configuración para comenzar a usar IDE.

El editor tiene el siguiente aspecto:

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

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

ng serve

los ng serve comando construye la aplicación e inicia el servidor web.

** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
...
Date: 2018-08-18T11:17:54.745Z
Hash: 0ace6c8a055c58d1734c
Time: 20490ms
chunk {main} main.js, main.js.map (main) 10.7 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 227 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 5.22 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 15.6 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 3.27 MB [initial] [rendered]
i ?wdm?: Compiled successfully.

El servidor web se inicia en el puerto 4200. Escriba la URL http://localhost:4200/en el navegador y ver la salida. Se le dirigirá a la siguiente pantalla:

Hagamos ahora algunos cambios para mostrar el siguiente contenido:

"Welcome to Angular 6 project"

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 usado el puerto 4200, que es el puerto predeterminado que usa 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 de la aplicación Angular 6 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 4.

La carpeta de la aplicación Angular 6 tiene lo siguiente file structure -

.angular-cli.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.
karma.conf.js- Se utiliza para pruebas unitarias a través del transportador. Toda la información necesaria para el proyecto se proporciona en el archivo karma.conf.js.
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 en el editor, obtendrá los siguientes módulos agregados en él.

"@angular/animations": "^6.1.0",
"@angular/common": "^6.1.0",
"@angular/compiler": "^6.1.0",
"@angular/core": "^6.1.0",
"@angular/forms": "^6.1.0",
"@angular/http": "^6.1.0",
"@angular/platform-browser": "^6.1.0",
"@angular/platform-browser-dynamic": "^6.1.0",
"@angular/router": "^6.1.0",
"core-js": "^2.5.4",
"rxjs": "^6.0.0",
"zone.js": "~0.8.26"

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

protractor.conf.js - Ésta es la configuración de prueba requerida para la aplicación.
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 folder es la carpeta principal, que internally has a different file structure.

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 tiene 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 declarations, imports, providersy bootstrap.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
@NgModule({
   declarations: [
      AppComponent
   ],
   imports: [
      BrowserModule
   ],
   providers: [],
   bootstrap: [AppComponent]
})
export class AppModule { }

declarations- En declaraciones, se almacena la referencia a los componentes. Appcomponent 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.

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- Puedes escribir tu estructura css aquí. En este momento, hemos agregado el color de fondo al div como se muestra a continuación.

.divdetails{
   background-color: #ccc;
}

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

<!--The content below is only a placeholder and can be replaced.-->
<div class = "divdetails">
   <div style = "text-align:center">
      <h1>
         Welcome to {{title}}!
      </h1>
      <img width = "300" src =    "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNv
         ZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3Ry
         YXRvciAxOS4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9
         uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0i
         TGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4b
         Wxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB
         4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCAyNTAgMjUwIiBzdHlsZT0iZW5hY
         mxlLWJhY2tncm91bmQ6bmV3IDAgMCAyNTAgMjUwOyIgeG1sOnNwYWNlPSJwcmV
         zZXJ2ZSI+DQo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPg0KCS5zdDB7ZmlsbDojR
         EQwMDMxO30NCgkuc3Qxe2ZpbGw6I0MzMDAyRjt9DQoJLnN0MntmaWxsOiNGRkZ
         GRkY7fQ0KPC9zdHlsZT4NCjxnPg0KCTxwb2x5Z29uIGNsYXNzPSJzdDAiIHBva
         W50cz0iMTI1LDMwIDEyNSwzMCAxMjUsMzAgMzEuOSw2My4yIDQ2LjEsMTg2LjM
         gMTI1LDIzMCAxMjUsMjMwIDEyNSwyMzAgMjAzLjksMTg2LjMgMjE4LjEsNjMuMi
         AJIi8+DQoJPHBvbHlnb24gY2xhc3M9InN0MSIgcG9pbnRzPSIxMjUsMzAgMTI1L
         DUyLjIgMTI1LDUyLjEgMTI1LDE1My40IDEyNSwxNTMuNCAxMjUsMjMwIDEyNSwy
         MzAgMjAzLjksMTg2LjMgMjE4LjEsNjMuMiAxMjUsMzAgCSIvPg0KCTxwYXRoIGN
         sYXNzPSJzdDIiIGQ9Ik0xMjUsNTIuMUw2Ni44LDE4Mi42aDBoMjEuN2gwbDExLj
         ctMjkuMmg0OS40bDExLjcsMjkuMmgwaDIxLjdoMEwxMjUsNTIuMUwxMjUsNTIuM
         UwxMjUsNTIuMUwxMjUsNTIuMQ0KCQlMMTI1LDUyLjF6IE0xNDIsMTM1LjRIMTA4b
         DE3LTQwLjlMMTQyLDEzNS40eiIvPg0KPC9nPg0KPC9zdmc+DQo=">
   </div>
   <h2>Here are some links to help you start: </h2>
   <ul>
      <li>
         <h2>
            <a target = "_blank" href="https://angular.io/tutorial">Tour of Heroes</a>
         </h2>
      </li>
      <li>
         <h2>
            <a target = "_blank" href = "https://github.com/angular/angular-cli/wiki">
               CLI Documentation
            </a>
         </h2>
      </li>
      <li>
         <h2>
            <a target = "_blank" href="http://angularjs.blogspot.ca/">Angular blog</a>
         </h2>
      </li>
   </ul>
</div>

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 = 'app';
}

Bienes

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

Medio ambiente

Esta carpeta contiene los detalles de 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 archivos adicional de la carpeta de la aplicación Angular 4 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.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>HTTP Search Param</title>
      <base href = "/">
      <link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
      <link href = "https://fonts.googleapis.com/css?family=Roboto|Roboto+Mono" rel = "stylesheet">
      <link href = "styles.c7c7b8bf22964ff954d3.bundle.css" rel = "stylesheet">
      <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 del archivo app.component.html.

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);

los platformBrowserDynamic().bootstrapModule(AppModule) tiene la referencia del módulo principal AppModule. Por lo tanto, cuando se ejecuta en el navegador, el archivo que se llama es 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);

Cuando se llama a AppModule, llama a app.module.ts que además llama al AppComponent basado en el boostrap 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 en app.component.html.

Lo siguiente se mostrará en el navegador:

polyfill.ts

Esto se usa principalmente para compatibilidad con versiones anteriores.

styles.css

Este es el archivo de estilo necesario para el proyecto.

test.ts

Aquí, se manejarán los casos de prueba unitaria para probar el proyecto.

tsconfig.app.json

Esto se usa durante la compilación, tiene los detalles de configuración que deben usarse para ejecutar la aplicación.

tsconfig.spec.json

Esto ayuda a mantener los detalles para las pruebas.

tipings.d.ts

Se utiliza para administrar la definición de TypeScript.

↰ Previous page Next page ↱