Cómo construir un proyecto AngularJS simple para principiantes I DevTeam.Space

¿Se pregunta cómo construir un proyecto AngularJS simple para principiantes?

Si es así, ha venido al lugar correcto.

AngularJS actualmente domina 350.000 sitios web alrededor del mundo. Esto lo convierte en un marco web muy común y confiable.

Con Angular JS, puede crear aplicaciones potentes y emocionantes que pueden ayudarlo a causar un gran impacto en su industria.

Entonces, desea comenzar a crear su primera aplicación AngularJS, pero no sabe por dónde comenzar. AngularJS es conocido por ser difícil de aprender. La mayoría de los manuales de «Proyectos de AngularJS para principiantes» se vuelven increíblemente complicados muy rápidamente.

Agregue a esto las molestas palabras de la jerga que se agregan como si fueran de conocimiento común, y tiene lo que podría parecer un desafío insuperable.

En esta guía, haré que empezar sea lo más simple posible. Primero, analizaré algunas de las dificultades de crear aplicaciones web y cómo AngularJS nos ayuda a resolver algunos de esos problemas.

Luego, veremos algunos ejemplos de proyectos AngularJS y cómo crear un proyecto AngularJS desde cero.

Si solo está interesado en crear el proyecto Angularjs, puede pasar directamente a la sección de codificación.

Desafíos de la aplicación web

Cada sitio web utiliza una arquitectura cliente-servidor. Esto significa que hay dos partes principales: su navegador web y el servidor que aloja el sitio web. Vas a una URL (la ubicación del servidor), y el servidor le da a tu navegador la información que necesita (HTML, CSS y Javascript) para mostrar la página web.

Bastante simple hasta ahora. Puede interactuar con la página haciendo clic en los botones y enlaces de la página. Cuando lo hace, básicamente está solicitando una página completamente nueva del servidor.

Esto solía estar bien cuando las páginas web eran principalmente documentos estáticos. Hoy en día, las páginas web pueden ser aplicaciones completas, con interfaces de usuario interactivas.

Aquí es donde nuestro modelo tradicional se encuentra con problemas. Cada vez que hace clic en un botón, se vuelve a cargar toda la página. Incluso las partes que no necesitan cambiar. Esto hace que una página parezca lenta y que no responda al usuario.

Por lo tanto, necesitamos una forma diferente de construir aplicaciones web. Uno en el que cada vez que un usuario interactúa con una página, solo se solicita nueva información de nuestro servidor. El resto de la página se deja intacto.

Aplicaciones web de una sola página

La solución es crear una aplicación de página única (SPA). Cuando visita un sitio web de SPA, su navegador recibe solo una página. Luego, solo partes de la página se actualizan dinámicamente y se manipulan en tiempo real. Esto da como resultado una aplicación web mucho más rápida y agradable.

Muchas empresas utilizan este enfoque para sus proyectos de aplicaciones web, incluidas las grandes empresas y las nuevas empresas. Un ejemplo de una Solicitud de una sola página es la Sitio web de USA Today. Vaya allí e intente adivinar qué partes se están recargando cuando hace clic.

¿Dónde encaja AngularJS?

AngularJS es un marco de front-end para crear estas aplicaciones de una sola página. Ayuda a extender nuestro HTML para que sea más dinámico y adecuado para crear este tipo de aplicaciones. Es de código abierto y fue creado por desarrolladores independientes, con el apoyo de Google.

Al usar Angular, obtenemos un marco completo de herramientas para ayudarnos a construir mejores aplicaciones web.

Por ejemplo, AngularJS, al separar las vistas de la lógica de su aplicación, nos ayuda a crear un código más mantenible y comprobable.

¿Qué debe saber para este tutorial?

Antes de comenzar a crear el proyecto Angularjs desde cero, asumo que conoce un poco acerca de cada uno de los siguientes

• HTML
• CSS
• Marcos Javascript como jQuery

Conceptos importantes de AngularJS

Hay algunos conceptos importantes que debe comprender antes de crear su propia aplicación AngularJS. Voy a dar una breve descripción y algunos enlaces a información más detallada.

Modelo-Vista-Controlador (MVC)

MVC es un patrón de diseño para implementar interfaces de usuario. Nos ayuda a separar la lógica en nuestro código de cómo se muestra. Al hacer esto, terminamos con una aplicación mucho más ordenada y comprobable. Si no está familiarizado con MVC, consulte este interesante explicación usando lego.

Enlace de datos bidireccional

Con jQuery, hacer que partes de nuestra página se actualicen automáticamente cuando se cambia otra información puede ser una molestia. AngularJS tiene una característica increíble llamada enlace de datos bidireccional. Le permite vincular cosas, de modo que cuando una cosa se actualiza, la otra también lo hace, al instante.

Usaremos este concepto en nuestra aplicación.

Directivas

Dije antes que AngularJS extiende HTML. Lo hace a través de directivas.

Las directivas de AngularJS son atributos HTML que comienzan con ng-. Estos le dicen a Angular que adjunte un comportamiento específico a ese elemento HTML. Por ejemplo, nuestra aplicación va a tener

<html ng-app>

Esta es una directiva que le dice a Angular que trate nuestra página HTML como una aplicación.

Creación de un proyecto AngularJS de muestra

Ahora, estamos listos para aprender cómo construir la primera aplicación AngularJS. Vamos a construir probablemente el proyecto AngularJS más simple posible.

Todo lo que va a hacer es pedir su nombre. Luego, a medida que escribe su nombre, mostrará lo que escribe en una línea diferente.

Suena súper simple, ¿verdad? Sí. Pero sí nos presenta algunos de los conceptos básicos importantes de AngularJS, como el enlace de datos bidireccional y las directivas.

Configuración

Nuestro proyecto será lo más simple posible en AngularJS. Solo vamos a tener un archivo llamado index.html.

Debido a que no vamos a usar un servidor ni ningún otro archivo Javascript o CSS, puede crear este archivo en cualquier lugar de su computadora y luego abrirlo en un navegador web para probarlo.

índice.html

En primer lugar, para orientarnos, configuremos una estructura HTML muy básica para nuestra página. Voy a llamar al mío index.html. Aquí está el código.

<!doctype html>
<html>
  <head>
  </head>
  <body>
    <div>
      <label>Name:</label>
      <input type="text" placeholder="Enter a name here">
      <hr>
      <h1>Hello! Your Name</h1>
    </div>
  </body>
</html>

Esto no hace nada interesante (todavía), pero nos da una idea de la estructura de nuestra página. A continuación, debemos agregar alguna funcionalidad usando AngularJS.

Agregar en AngularJS

Ahora, podemos comenzar a agregar algo de AngularJS en nuestro HTML. En primer lugar, necesitaremos obtener el marco AngularJS en nuestro proyecto.

La forma más fácil de hacer esto es usar la versión alojada. Todo lo que necesita hacer es incluir estas etiquetas de secuencia de comandos entre sus etiquetas de encabezado, así:

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.min.js"></script>
</head>

Ahora que tenemos AngularJS instalado en nuestra aplicación, debemos comenzar a agregar algunas Directivas para que Angular sepa qué hacer. Recuerde que esas son etiquetas ng de las que estaba hablando antes.

Adición de directivas

En el <html> etiqueta, simplemente agrega ng-app.

<html ng-app>

Esta es una directiva (como expliqué antes) que le dice a AngularJS que esté activo en esta sección de nuestro HTML. En nuestro caso, es todo el documento HTML.

Enlace de datos juntos

Aquí es donde podemos echar un vistazo al poder del marco AngularJS.

Queremos nuestro “¡Hola! Su nombre” para mostrar el nombre que escribimos, a medida que lo escribimos. Con jQuery, tendríamos que configurar algunos tipos de funciones y oyentes. Afortunadamente, aquí es exactamente donde AngularJS simplifica mucho las cosas.

Lo que tenemos que hacer es vincular los datos de nuestro campo de entrada de texto al texto en el mensaje «¡Hola! Su nombre” campo. Esto significará que uno se actualiza automáticamente cuando se cambia el otro.

Para ello, primero añadimos el ng-model="yourName" para nuestro <input> etiqueta. Esto le dice a AngularJS que los datos que escribimos se llaman «tuNombre» y queremos vincularlos a otra cosa.

<input type="text" ng-model="yourName" placeholder="Enter a name here">

A continuación, debemos decirle a Angular a qué vincularlo. Reemplace el texto «Su nombre» en el <h1> etiquetas con {{yourName}} al igual que.

<h1>Hello! {{yourName}}!</h1>

Él {{ }} son cómo declara dónde vincular algo en AngularJS. Ahora, en lugar de solo mostrar texto codificado, Angular actualizará automáticamente este texto cada vez que cambie su nombre. Impresionante.

Pruébalo

¡Eso es! Acaba de crear su primer proyecto AngularJS, incluido el enlace de datos bidireccional, las directivas e incluso el uso de una arquitectura MVP simple. Felicidades.

Lo que escriba en el campo de nombre debería mostrarse automáticamente a continuación.

Cuando lo pones todo junto, debería verse algo como esto.

Y el código completo:

<!doctype html>
<html ng-app>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.min.js"></script>
  </head>
  <body>
    <div>
      <label>Name:</label>
      <input type="text" ng-model="yourName" placeholder="Enter a name here">
      <hr>
      <h1>Hello! {{yourName}}!</h1>
    </div>
  </body>
</html>

Qué sigue

Sabes cómo desarrollar una aplicación AngularJS simple. Todo lo que necesita hacer ahora es aumentar un poco la complejidad. Verificar AngularJS.org para un par de aplicaciones más simples como esta. También tienen algunos videos tutoriales sobre cómo construirlos.

Aparte de eso, ¡simplemente comience a experimentar con la creación de sus propias aplicaciones web personalizadas!

Desarrollar una aplicación AngularJS

Si ha seguido el tutorial y aprender AngularJS parece demasiado para usted, no se preocupe. Hay muchos desarrolladores que pueden desarrollar su aplicación para usted.

AngularJS es muy popular, por lo que normalmente puedes encontrar grandes desarrolladores a un buen precio. Si necesita una aplicación web que funcione, el costo de contratar desarrolladores puede ser más fácil que aprender el proceso de creación de una usted mismo.

Encontrando desarrolladores con gran experiencia en el desarrollo de Proyectos Angular

Busque una empresa de desarrollo de software confiable que tenga una experiencia considerable en el desarrollo de aplicaciones Angular. Allí encontrará desarrolladores experimentados. En DevTeam.Space, tenemos la experiencia angular necesaria.

Juzgue nuestras capacidades revisando los siguientes proyectos que ejecutamos:

1. Un proyecto de torneo de eSports donde usamos Angular y Node.js

En este proyecto de desarrollo de aplicaciones web, el equipo de DevTeam.Space trabajó tanto en la programación del lado del cliente como en el desarrollo de back-end. La aplicación de torneos de eSports permitiría a los jugadores configurar torneos para juegos populares de eSports. Nuestro equipo usó Angular y Node.js, además, usamos varias API, por ejemplo, PayPal, Stripe, etc.

2. Adventure Aide: Un proyecto de turismo y recreación de Angularjs

El equipo de desarrollo de DevTeam.Space se hizo cargo de un proyecto que los desarrolladores anteriores, incluidos los autónomos, dejaron incompleto. Además de refactorizar el código fuente por completo, reconstruimos la arquitectura de la aplicación.

En lugar de dos aplicaciones planificadas anteriormente, desarrollamos una aplicación unificada llamada Adventure Aide. La aplicación permite a los usuarios reservar aventuras al aire libre. Utilizamos Angular, Java y MariaDB, además, utilizamos la plataforma en la nube de AWS. Además, integramos APIs de Google Maps, Stripe, etc.

3. Starshell: Mantener a los estudiantes seguros en las redes sociales

Starshell es una aplicación para monitorear el contenido sensible de las redes sociales para mantener a los estudiantes seguros en las redes sociales. Los observadores monitorearán el contenido de la cuenta de las redes sociales de los estudiantes dependiendo de su consentimiento.

El equipo de desarrollo de DevTeam.Space utilizó Angular, Python, MongoDB, PyMongo, Flask, TensorFlow, etc. en este proyecto. También utilizamos las API de las principales plataformas de redes sociales como Facebook, Twitter, Instagram, etc.

4. MyTime: una aplicación de programación, pago y participación del cliente

Nuestro equipo de desarrollo DevTeam.Space ha desarrollado MyTime, una aplicación Angular. Esta aplicación permite que las cadenas y franquicias de ubicaciones múltiples logren una mayor eficiencia operativa y satisfacción del cliente.

Este fue un proyecto de alto riesgo, donde nuestras habilidades y compromisos ayudaron al cliente a cumplir con plazos estrictos. Nuestra experiencia en el desarrollo de páginas web fue importante. Nuestra experiencia en TypeScript, JavaScript, PHP, complementos, etc. marcó una diferencia positiva en este proyecto.

5. Una solución de aprendizaje para el mercado chino

Nosotros, en DevTeam.Space, hemos desarrollado una solución de aprendizaje para el mercado chino. Es una plataforma de aprendizaje electrónico con características como programar clases, realizar clases en línea, colaboración, etc. Nuestro profundo conocimiento de lo siguiente fue útil en este proyecto:

• AngularJS y Angular 2;
• Inyección de dependencia;
• JSON, marcado, etc.;
• Desarrollo de arranque;
• Herramientas como GitHub;
• modelo de objeto de documento (DOM);
• Directivas como ng-controller, ng-repeat, etc.;
• Tipos de entrada angular.

6. La plataforma educativa “Sidekick”

El equipo de desarrollo de DevTeam.Space ha creado “Sidekick”, una plataforma de aprendizaje basada en proyectos que utiliza Angular. Esta plataforma permite a los estudiantes trabajar con socios de la comunidad para resolver problemas de la vida real utilizando sus habilidades. Permite a los profesores cubrir habilidades modernas, además, los profesores pueden evaluar a los estudiantes usando esta plataforma.

Utilizamos nuestras habilidades en herramientas como Karma. Nuestro conocimiento de “script src”, enrutamiento, etc. nos ayudó en este proyecto. El proyecto utilizó nuestro conocimiento para inicializar una directiva Angular. Nuestro conocimiento de la sintaxis angular nos ayudó, además, nuestra experiencia en hacer que una aplicación web se cargue más rápido en un navegador web fue útil.

Preguntas frecuentes sobre el proyecto AngularJS