Ember.js Crear aplicación

EmberJS es un framework javascript de código abierto. Es un marco muy productivo utilizado para construir aplicaciones web muy eficientes sin mucha dificultad. Sigue la arquitectura MVC. Las aplicaciones EmberJS están listas para aplicaciones de nivel profesional y vienen con muchas herramientas integradas para facilitar las tareas. Algunas de las herramientas son:

• Construir canalización
• Enrutamiento
• capa de datos
• Unidades de prueba

Características:

• Patrón MVC
• Representación del lado del cliente
• Alto rendimiento
• mecanismo de plantilla
• Soporte de URL

Instalación de Ember CLI: Primero, necesitamos instalar Ember usando el administrador de paquetes npm, Node.js. Así que ejecuta el siguiente comando en la Terminal.

npm install -g ember-cli

Esto instalará la CLI de Ember.js globalmente en nuestro sistema. Por lo tanto, desde ahora, en cualquier parte de nuestro sistema, podemos crear las aplicaciones Ember. Tenga en cuenta que el administrador de paquetes npm viene con Node.js. Tendrá que instalar Node.js en su sistema para las aplicaciones de Ember.

Creando una nueva aplicación: Ember.js usa el siguiente comando para crear nuevas aplicaciones. Algunos navegan a su directorio deseado, donde Ember creará una carpeta automáticamente con todos los archivos instalados.

ember new ember-tutorial-gfg

Esto creará una nueva carpeta con el nombre ember-tutorial-gfg . Abra su editor de código en la carpeta para comenzar a editar el proyecto creado. 

Nota: La instalación puede tardar unos minutos en instalarse dependiendo de su máquina.

Estructura del proyecto: La estructura del proyecto debe ser similar a la siguiente.

Comprender la estructura del proyecto:

• app: contiene la interfaz de usuario de la aplicación y los archivos relacionados con los modelos.
• config: contiene los archivos de configuración de la aplicación Ember.
• node_modules: contiene los módulos de Node necesarios para el proyecto.
• público: esta carpeta contiene los archivos necesarios para el propósito de alojamiento.
• tests: Esta carpeta contiene archivos para pruebas unitarias.
• proveedor: los complementos o dependencias de terceros deben colocarse en esta carpeta.
• carpeta de aplicaciones: en esta carpeta, nos ocupamos principalmente del desarrollo de nuestra primera aplicación. La carpeta de su aplicación debería tener el siguiente aspecto:

Puede verificar que los componentes, controladores, ayudantes, modelos, rutas contienen solo el archivo .gitkeep . La carpeta de estilos tiene un archivo app.css y la carpeta de plantillas tiene un archivo application.hbs . Esta es la estructura clásica de las aplicaciones de Ember y continuaremos solo con esta estructura.

Ejecute la aplicación: en la Terminal / Símbolo del sistema, ingrese el siguiente comando para ejecutar la aplicación:

ember serve

Esto creará la aplicación y servirá el sitio web de forma predeterminada en http://localhost:4200 . También puede encontrar detalles adicionales en la Documentación de Ember.js o en el archivo README.MD en la carpeta del proyecto.

Una vez construido el proyecto, encontrará un resultado similar al siguiente. Cualquier cambio se actualizará automáticamente de manera muy similar a los proyectos de React.js.

Ahora abra cualquier navegador y navegue hasta http://localhost:4200/ y vea el resultado. Encontrará la siguiente página web.

Ejemplo: Creación de una aplicación EmberJS básica.

Nombre de archivo: aplicación.hbs 

{{page-title 'EmberTutorialGfg'}}
<h1 id='body-title'>Welcome to GeeksforGeeks Ember Tutorial</h1>
<h4 id='body-subtitle'>Creating first website using Ember.js</h4>
{{outlet}}

Nombre de archivo: app.css 

Salida: El sitio web se verá de la siguiente manera.

Explicación: el archivo app.css se explica por sí mismo, pero debemos comprender el archivo application.hbs .

{{page-title 'EmberTutorialGfg'}}

Esto establece el título de nuestra página web. Luego tenemos el contenido de nuestra página web. Por último, tenemos {{outlet}}, que se utiliza con fines de enrutamiento.

Crear una ruta: ahora crearemos otra ruta para nuestro sitio web y esa será la página Acerca de. Aquí puede proporcionar algunos detalles de nuestro sitio web. En la Terminal/Símbolo del sistema, ingrese el siguiente comando.

ember generate route about

Creará tres archivos y actualizará el archivo router.js. Edítelos de la siguiente manera. 

{{page-title 'About'}}
<h2>Tutorial</h2>
<h3>Data Structures and Algorithms</h3>
<h4 class='contents'>
  <a href='https://www.geeksforgeeks.org/data-structures/?ref=shm'>Data
    Structures</a>
</h4>
<h4 class='contents'>
  <a
    href='https://www.geeksforgeeks.org/fundamentals-of-algorithms/?ref=shm'
  >Algorithms</a>
</h4>

Nombre de archivo: aplicación/estilos/aplicación.css

Ahora navegue a http://localhost:4200/about, el resultado será el siguiente.

Nuestra página Acerca de aparece debajo del contenido de application.hbs porque hemos proporcionado el {{outlet}} en la parte inferior del archivo application.hbs que coloca el contenido de diferentes rutas.

Agregar ruta a application.hbs: podemos vincular cualquier ruta a cualquier página de plantilla usando la etiqueta LinkTo. 

Nombre de archivo: aplicación/plantillas/aplicación.hbs

{{page-title 'EmberTutorialGfg'}}
<h1 id='body-title'>
  Welcome to GeeksforGeeks Ember Tutorial
</h1>
<h4 id='body-subtitle'>
  Creating first website using Ember.js
</h4>
<div class='navigation'>
  <LinkTo @route='home' class='navigation-item'>
    Home
  </LinkTo>
  <LinkTo @route='about' class='navigation-item'>
    About
  </LinkTo>
</div>
{{outlet}}

Nombre de archivo: aplicación/router.js 

import EmberRouter from '@ember/routing/router';
import config from 'ember-tutorial-gfg/config/environment';
  
export default class Router extends EmberRouter {
  location = config.locationType;
  rootURL = config.rootURL;
}
  
Router.map(function () {
  this.route('home', { path: '/' });
  this.route('about');
});

Nombre de archivo: aplicación/estilos/aplicación.css 

Producción:

Conclusión: en este tutorial, creamos una aplicación Ember. Luego modificamos nuestro código y también agregamos rutas. Por último, hemos agregado una barra de navegación para navegar a diferentes rutas. Así que vimos lo fácil que era construir un sitio web de nivel productivo desde el primer momento con la ayuda de Ember.js. Espero que les haya gustado el tutorial.