Crear una aplicación Angular

    Aprenda cómo comenzar a crear una aplicación Angular cuando migra de WPF a Angular.

    Prerequisites

    Para comenzar a escribir aplicaciones Angular, necesita instalar Node.js y el administrador de paquetes npm. Node.js es un entorno 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ás 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. Puede obtenerlo en code.visualstudio.com.

    Create new project

    Si es desarrollador de WPF, crear nuevos proyectos dentro de Visual Studio es bastante sencillo. Simplemente haría clic en Archivo -> Nuevo proyecto, seleccionaría el tipo de proyecto, le daría un nombre y presionaría Aceptar. Ya que vas al mundo Angular, deseas 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 se basa en archivos y no en proyectos. Para crear una nueva aplicación Angular, usaremos el símbolo del sistema.

    Primero deberá instalar 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 enrutamiento Angular?". Para esta demostración elegiremos NO. A continuación, se nos pregunta qué formato de hoja de estilo nos gustaría utilizar. Por ahora nos quedaremos con el CSS básico. Tarda unos minutos, pero finalmente el proceso se completará y su nueva aplicación se creará 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 lanzará una nueva instancia de Visual Studio Code que contiene su aplicación Angular. Esta es la parte que probablemente resulte 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 su index.html. El archivo index.html podría compararse con el App.xaml de la aplicación WPF. Ambos son globales y todo lo que coloque allí aparecerá en cada página de su solicitud. El archivo index.html contiene una sección <app-root></app-root> que es similar al StartupUri del archivo App.xaml y especifica la primera página que queremos mostrar cuando se inicia la aplicación.

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

    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 archivo packages.config que define todas nuestras dependencias para paquetes nuget, mientras que Angular tiene un archivo package.json que contiene las dependencias que su aplicación requiere para ejecutarse. El archivo package.json también contiene una sección para scripts que puede ejecutar en la consola cuando prueba, inicia o crea su aplicación.

    Echemos un vistazo a la carpeta References. En WPF tenemos un nodo References en nuestra solución que muestra todas las referencias que se agregan a este proyecto. En una aplicación Angular, en realidad será la carpeta nodes_module. Viniendo de WPF, te sorprenderá cuántas dependencias tiene un proyecto Angular. Estos se completan mediante 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",

    Su primera aplicación Angular debería verse así:

    Additional Resources

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