Angular 4 - Configuración del proyecto

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

Angular4 usa la versión TypeScript 2.2, mientras que Angular 2 usa la versión 1.8 de TypeScript. Esto trae mucha diferencia en el rendimiento.

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

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 v6.11.0. Los usuarios que ya tienen nodejs mayor que 4 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 -

El símbolo del sistema muestra v6.11.0. 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.

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

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

ng new Angular 4-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.

Ingresa el comando anterior para instalar Angular 4. El proceso de instalación comenzará y tardará unos minutos en completarse.

Una vez que se completa el comando anterior para instalar, aparece el siguiente símbolo del sistema:

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

Obtenemos la versión @ angular / cli, que actualmente es 1.2.0. La versión del nodo que se ejecuta es 6.11.0 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 4. Creemos ahora nuestro primer proyecto en Angular 4. Para crear un proyecto en Angular 4, usaremos el siguiente comando:

ng new projectname

Nombraremos el proyecto ng new Angular 4-app.

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

El proyecto Angular 4-appse crea correctamente. Instala todos los paquetes necesarios para que nuestro proyecto se ejecute en Angular 4. Cambiemos ahora al proyecto creado, que está en el directorioAngular 4-app. Cambie el directorio en la línea de comando -cd Angular 4-app.

Usaremos Visual Studio Code IDE para trabajar con Angular 4; 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.

Consideraremos el Angular 4-appproyecto. Abramos la aplicación Angular 4 y veamos 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

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

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 corres 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 4 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 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 de la aplicación Angular 4 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 4 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": "^4.0.0",
"@angular/common": "^4.0.0",
"@angular/compiler": "^4.0.0",
"@angular/core": "^4.0.0",
"@angular/forms": "^4.0.0",
"@angular/http": "^4.0.0",
"@angular/platform-browser": "^4.0.0",
"@angular/platform-browser-dynamic": "^4.0.0",
"@angular/router": "^4.0.0",

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
      ZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOS4xLjAsIFNWRyBFe
      HBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4
      xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaH
      R0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCAyNTAg
      MjUwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAyNTAgMjUwOyIgeG1sOnNwYWNlPSJwcmVzZXJ2
      ZSI+DQo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPg0KCS5zdDB7ZmlsbDojREQwMDMxO30NCgkuc3Qxe2ZpbGw6I0M
      zMDAyRjt9DQoJLnN0MntmaWxsOiNGRkZGRkY7fQ0KPC9zdHlsZT4NCjxnPg0KCTxwb2x5Z29uIGNsYXNzPSJzdD
      AiIHBvaW50cz0iMTI1LDMwIDEyNSwzMCAxMjUsMzAgMzEuOSw2My4yIDQ2LjEsMTg2LjMgMTI1LDIzMCAxMjUsMj
      MwIDEyNSwyMzAgMjAzLjksMTg2LjMgMjE4LjEsNjMuMiAJIi8+DQoJPHBvbHlnb24gY2xhc3M9InN0MSIgcG9pbn
      RzPSIxMjUsMzAgMTI1LDUyLjIgMTI1LDUyLjEgMTI1LDE1My40IDEyNSwxNTMuNCAxMjUsMjMwIDEyNSwyMzAgMj
      AzLjksMTg2LjMgMjE4LjEsNjMuMiAxMjUsMzAgCSIvPg0KCTxwYXRoIGNsYXNzPSJzdDIiIGQ9Ik0xMjUsNTIuMU
      w2Ni44LDE4Mi42aDBoMjEuN2gwbDExLjctMjkuMmg0OS40bDExLjcsMjkuMmgwaDIxLjdoMEwxMjUsNTIuMUwxMj
      UsNTIuMUwxMjUsNTIuMUwxMjUsNTIuMQ0KCQlMMTI1LDUyLjF6IE0xNDIsMTM1LjRIMTA4bDE3LTQwLjlMMTQyLD
      EzNS40eiIvPg0KPC9nPg0KPC9zdmc+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 tiene 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.

La estructura final del archivo se ve de la siguiente manera:

↰ Previous page Next page ↱