Creación de una aplicación Angular

    Obtenga información sobre cómo empezar a crear una aplicación Angular al migrar de WPF a Angular.

    Prerequisites

    Para comenzar a escribir Angular aplicaciones, debe instalar Node.js y el administrador de paquetes npm. Node.js es un entorno de tiempo de ejecución de JavaScript que ejecuta código JavaScript fuera de un navegador. Para obtener Node.js, vaya a nodejs.org. NPM es un administrador de paquetes similar al administrador de paquetes NuGet para .NET. Se instala con Node.js de forma predeterminada. También necesitará un IDE. Uno de los mejores entornos para desarrollar aplicaciones Angular es Visual Studio Code. Es gratuito, de código abierto y se ejecuta en todas las plataformas. Puedes obtenerlo de code.visualstudio.com.

    Create new project

    Si es un desarrollador de WPF, la creación de nuevos proyectos dentro de Visual Studio es bastante sencilla. Sólo tienes que hacer clic en Archivo -> Nuevo Proyecto, seleccionar el tipo de proyecto, darle un nombre y pulsar OK. Dado que va a entrar en el mundo Angular, desea crear un nuevo proyecto dentro de Visual Studio Code. Sin embargo, aquí no hay ninguna opción de proyecto nuevo y eso se debe a que Visual Studio Code está basado en archivos y no en proyectos. Para crear una nueva aplicación Angular, vamos a utilizar el símbolo del sistema.

    En primer lugar, deberá instalar la Angular CLI.​

    npm install -g @angular/cli

    Luego navegue en el símbolo del sistema hasta la carpeta donde desea que se cree su aplicación y ejecute el siguiente comando:

    ng new demo-app

    Se nos preguntará "¿Nos gustaría agregar Angular enrutamiento?". Para esta demo elegiremos NO. A continuación, se nos pregunta qué formato de hoja de estilo nos gustaría utilizar. Vamos a quedarnos con el CSS básico por ahora. Tarda unos minutos, pero finalmente el proceso se completará y se creará la nueva aplicación en el disco.

    Ahora tenemos que cambiar los directorios a la carpeta de la aplicación de demostración que acabamos de crear y ejecutar un comando para abrir Visual Studio Code.

    cd demo-app
code .

    Esto va a iniciar una nueva instancia de Visual Studio Code que contiene la aplicación Angular. Ahora bien, esta es la parte que probablemente sea más abrumadora para los desarrolladores de escritorio que intentan aprender Angular: la estructura de carpetas.

    Project structure

    Sigamos adelante y echemos un vistazo a cada uno de estos archivos y veamos cómo se relacionan con una aplicación WPF. La mejor manera de hacerlo es comparar cada proyecto uno al lado del otro. A la izquierda tenemos nuestra aplicación WPF. A la derecha tenemos nuestra aplicación Angular.

    Estructura del proyecto WPF Angular Estructura del proyecto

    Es importante tener en cuenta que una aplicación Angular es una aplicación de una sola página (SPA), lo que significa que solo hay una página en toda la aplicación, y esa es tuyaindex.html. Elindex.html archivo podía compararse con elApp.xaml de la aplicación WPF. Ambos son globales y todo lo que pongas ahí aparecerá en cada página de tu solicitud. Elindex.html archivo contiene una sección<app-root></app-root> similar a laStartupUri​App.xaml del archivo y especifica la primera página que queremos mostrar cuando se inicie la aplicación.

    Lo que ocurre técnicamente es que cuando navegas a elindex.html, elmain.ts archivo JavaScript se invoca y carga elAppModule. Una Angular aplicación está compuesta por módulos y componentes. Por defecto, obtienes un módulo raíz y un componente raíz, que estarán ubicados bajo laapp carpeta. Cuando elmain.ts archivo se invoque, vamos a arrancar elAppModule que está en elapp.module.ts archivo dentro de laapp carpeta.

    El módulo de la app entonces arranca el suyo propioAppComponent. ElAppComponent está definido en elapp.component.ts archivo y su selector está configurado comoapp-root. TieneAppComponent su plantilla html definida en elapp.component.html archivo. Básicamente, la<app-root></app-root> sección de laindex.html página visualizará el contenido delapp.component.html archivo.

    Elmain.ts archivo es similar alApp.xaml.cs archivo porque es algo así como un código detrás. Elapp.component.html, que es el componente predeterminado que se muestra cuando la aplicación se ejecuta, es muy similar alMainWindow.xaml de WPF.

    En WPF tenemos unpackages.config archivo que define todas nuestras dependencias a paquetes nuget mientras Angular tiene unpackage.json archivo que contiene las dependencias que tu aplicación necesita para ejecutarse. Elpackage.json archivo también contiene una sección para scripts que puedes ejecutar en la consola cuando estás probando, iniciando o construyendo tu aplicación.

    Vamos a echar un vistazo a laReferences carpeta. En WPF tenemos unReferences nodo en nuestra solución que muestra todas las referencias que se añaden a este proyecto. En una Angular aplicación que en realidad será lanodes_module carpeta. Viniendo de WPF, puede que te sorprenda la cantidad de dependencias que tiene un proyecto Angular. Estos se poblan usandonpm​

    Desafortunadamente, aquí terminan las similitudes. Veamos algunos de los otros archivos y carpetas generados:

    • e2e- significa pruebas de extremo a extremo y contiene pruebas de integración o pruebas con escenarios reales como un proceso de inicio de sesión.
    • src- La mayor parte del código de la aplicación se encuentra aquí.
    • assets- contiene tus imágenes u otros recursos.
    • environment- contiene información sobre tus entornos de construcción.
    • favicon.ico- el icono que aparece en el navegador cuando estás en tu sitio.
    • karma.conf.js- contiene la configuración para las pruebas unitarias.
    • style.css- hoja de estilos con estilos globales para tu aplicación, es similar a un diccionario de recursos definido enApp.xaml WPF.

    Run the application

    Ahora estamos listos para ejecutar la aplicación, pero en Visual Studio Code no puedes simplemente presionar F5. Vamos a abrir la Terminal de Visual Studio Code haciendo clic en el menú Terminal -> Nueva Terminal o presionando Ctrl + Shift + `. Para ejecutar la aplicación, debe ejecutar el siguiente comando:

    ng serve

    Una vez iniciada la aplicación, puede abrirla en el navegador en la siguiente URL http://localhost:4200/. Si desea que su aplicación se abra automáticamente en el navegador, debe usar el siguiente comando:

    ng serve -o

    En este caso-o significa abierto. Otra forma de iniciar la aplicación es usando los comandos npm:

    npm start

    Podrías encontrar esos scripts definidos en elpackage.json archivo y modificar elstart comando añadiendo la-o opción:

      "scripts": {
    "ng": "ng",
    "start": "ng serve -o",

    La primera aplicación Angular debería tener el siguiente aspecto:

    Primera Angular Aplicación

    Additional Resources

    Nuestra comunidad es activa y siempre da la bienvenida a nuevas ideas.