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.

    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 la suya index.html. El index.html archivo se podría comparar con el App.xaml de la aplicación WPF. Ambos son globales y todo lo que pongas allí aparecerá en cada página de tu aplicación. El index.html archivo contiene una sección <app-root></app-root> que es similar a StartupUri la App.xaml del archivo y especifica la primera página que queremos mostrar cuando se inicia la aplicación.

    Lo que sucede técnicamente es que cuando navega a la index.html, el main.ts archivo JavaScript invoca que carga el AppModule. Una aplicación Angular se compone de módulos y componentes. De forma predeterminada, obtiene un módulo raíz y un componente raíz y estos se ubicarán debajo de la app carpeta. Cuando se invoca el main.ts archivo, vamos a arrancar el AppModule, que está en el app.module.ts archivo de la app carpeta.

    Luego, el módulo de la aplicación inicia su propio AppComponent. El AppComponent se define en el archivo app.component.ts y su selector está configurado en app-root. El AppComponent tiene su plantilla html definida en el archivo app.component.html. Básicamente, la sección <app-root></app-root> en la página index.html visualizará el contenido del archivo app.component.html.

    El archivo main.ts es similar al archivo App.xaml.cs ya que es algo así como un código subyacente. app.component.html, que es el componente predeterminado que se muestra cuando se ejecuta la aplicación, es muy similar a MainWindow.xaml en WPF.

    En WPF tenemos un packages.config fichero que define todas nuestras dependencias a los paquetes nuget Angular tiene un package.json fichero que contiene las dependencias que la aplicación requiere para ejecutarse. El package.json archivo contiene también una sección para scripts que puede ejecutar en la consola cuando está probando, iniciando o compilando su aplicación.

    Echemos un vistazo a la References carpeta. En WPF tenemos un References nodo en nuestra solución que muestra todas las referencias que se agregan a este proyecto. En una aplicación Angular, esa va a ser realmente la nodes_module carpeta. Viniendo de WPF, es posible que se sorprenda de cuántas dependencias tiene un proyecto Angular. Estos se rellenan mediante using npm.

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

    • e2e: significa prueba de extremo a extremo y contiene pruebas de integración o pruebas con escenarios del mundo real, como un proceso de inicio de sesión.
    • src: la mayor parte del código de la aplicación se encuentra aquí.
    • assets: contiene sus imágenes o cualquier otro activo.
    • environment: contiene información sobre sus entornos de compilació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 su aplicación, es similar a un diccionario de recursos definido en App.xaml en 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 mediante los comandos npm:

    npm start

    Puede encontrar esos scripts definidos en el archivo package.json y modificar el comando start agregando la opción-o:

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

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

    Additional Resources

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