Proyecto de demostración de AngularJS: cómo crear una aplicación con AngularJS

Publicado: 2020-09-10

Si está aprendiendo desarrollo de pila completa, debe haberse enfrentado a la pregunta: "¿Cómo ejecutar el proyecto AngularJS?" No se preocupe porque, en este artículo, compartiremos un tutorial detallado sobre cómo crear una aplicación con AngularJS.

Después de completar este proyecto, estará familiarizado con los conceptos básicos de AngularJS, sus implementaciones y tendrá una aplicación funcional que puede mostrar a sus amigos. Puede marcar este tutorial como favorito, ya que hemos enumerado los pasos para las diferentes etapas de desarrollo junto con el código.

Tenga en cuenta que debe comprender el código antes de implementarlo. Es por eso que no recomendamos copiar y pegar el código. Sin embargo, si sabe cómo funciona cada línea de código, puede copiarlo y pegarlo libremente. Comprender cómo funciona el código garantizaría que aprenda de la manera más eficiente.

Tabla de contenido

¿Qué es AngularJS? Una breve introduccion

Antes de discutir los proyectos de AngularJS, primero hablemos un poco sobre la tecnología. AngularJS permite a los usuarios extender HTML para aplicaciones. Es un framework web front-end basado en JavaScript. HTML se retrasa en vistas dinámicas para aplicaciones web, y Angular resuelve ese problema.

AngularJS tiene una próspera comunidad de usuarios y desarrolladores donde puede hacer preguntas y eliminar su confusión. Angular proporciona a los usuarios vinculación de datos, controladores y muchas otras herramientas poderosas para mejorar el front-end de una página web. Descubrirá muchos conceptos en nuestro proyecto, ya que los implementaremos en nuestro tutorial.

Requisitos previos para proyectos AngularJS para principiantes

Antes de comenzar a trabajar en proyectos de AngularJS, debe estar familiarizado con los siguientes conceptos:

HTML

HTML significa lenguaje de marcado de hipertexto. Es responsable de la estructura de cualquier página web y es el primer bloque de construcción para el desarrollo web. Debe estar familiarizado con la sintaxis de HTML, sus elementos y sus implementaciones antes de comenzar a trabajar en este proyecto.

CSS

CSS significa hojas de estilo en cascada y es el lenguaje principal para agregar elementos visuales a una página web. Es tan importante como HTML porque hace que la página web se vea mejor y sea más accesible. Si bien HTML es necesario para la primera etapa de nuestro proyecto AngularJS, tendrá que agregarle CSS más adelante. Es por eso que debe familiarizarse con él antes de comenzar a trabajar en proyectos de AngularJS para principiantes.

JavaScript

AngularJS está basado en JavaScript. Estar familiarizado con la sintaxis, el código y sus implementaciones de JS también simplificará muchos aspectos técnicos de AngularJS. Asegúrese de comprender bien los conceptos básicos de JS antes de comenzar a trabajar en esta tarea.

Además de estos requisitos previos, también debe estar familiarizado con los conceptos básicos de AngularJS. Este proyecto asume que tiene un conocimiento práctico de HTML, CSS, JS y AngularJS. Ahora que hemos sacado eso del camino, comencemos.

Cómo ejecutar el proyecto AngularJS – Tutorial

En este tutorial, crearemos una aplicación de noticias deportivas con AngularJS. Una aplicación de noticias deportivas te muestra las estadísticas de un partido o evento. Por ejemplo, puede crear una aplicación que muestre la tarjeta de puntuación de los partidos o una tabla de puntuación del equipo IPL. Elegimos trabajar en una aplicación de transmisión de deportes porque no requiere mucho desarrollo de back-end.

el html

Primero comenzaremos creando el HTML para nuestra aplicación. Aquí está la plantilla para nuestro código HTML.

<tabla>

<tr><th colspan=”4″>Clasificación del campeonato de pilotos</th></tr>

</thead>

<tbody>

<td>{{$índice + 1}}</td>

<td>

{{driver.Driver.givenName}} {{driver.Driver.familyName}}

</td>

<td>{{controlador.Constructores[0].nombre}}</td>

<td>{{conductor.puntos}}</td>

</tr>

</tbody>

</tabla>

</cuerpo>

Debes haber notado {{ y }}. Se llaman expresiones y le permiten realizar tareas computacionales para devolver el valor requerido. Por ejemplo, aquí hay algunas expresiones válidas:

{{ 2 + 2 }}
{{ mi nombre }}

Se puede decir que son fragmentos de JavaScript. Sin embargo, sería mejor si no usara expresiones para implementar lógica de alto nivel. Para hacer eso, debe usar directivas. Las expresiones solo son adecuadas para la implementación de lógica de bajo nivel. La tarea principal de las expresiones es vincular los datos de aplicación requeridos al HTML.

Aprenda: Salario de desarrollador HTML en India: para principiantes y experimentados

Las Directrices en Nuestro Código

Uno de los conceptos más importantes que descubrirá mientras trabaja en proyectos de AngularJS son las directivas. Una directiva es un marcador en un elemento DOM para informar a AngularJS que debe adjuntar un comportamiento específico al elemento individual. La directiva puede decirle a Angular que realice varias tareas, como transformar el elemento DOM y sus hijos, reemplazándolo con un elemento DOM diferente. La mayoría de las directivas poderosas comienzan con "ng-", donde "ng" significa Angular.

Aquí están las diferentes directivas que hemos usado en nuestro código anterior, junto con sus aplicaciones:

aplicación ng

Esta directiva arranca la aplicación y define su alcance. Es una directiva esencial porque puede tener varias aplicaciones en AngularJS y le dice al programa los puntos de inicio y fin de cada aplicación.

controlador ng

Esta directiva define qué controlador tendría el poder de la vista del usuario. Hemos indicado driversController a este respecto, que proporcionará la lista de controladores (driversList) en nuestra aplicación.

ng-repetir

Esta directiva es una de las más utilizadas entre los desarrolladores de Angular. Define el alcance de la plantilla durante el bucle a través de las colecciones.

Angular tiene muchas directivas y, a medida que trabaje en más proyectos de AngularJS para principiantes, descubrirá más aplicaciones para ellos. Es por eso que recomendamos trabajar en diferentes proyectos mientras aprendes una habilidad en particular.

Los Controladores

Tener la vista sería inútil a menos que agreguemos un controlador. Entonces, agregaremos el controlador de controladores aquí:

angular.module('F1FeederApp.controllers', []).

controlador('driversController', función($alcance) {

$scope.driversList = [

{

Conductor: {

nombre dado: 'Sebastián',

nombre de familia: 'Vettel'

puntos: 322,

nacionalidad: “alemana”,

Constructores: [

{nombre: "Red Bull"}

]

{

Conductor: {

nombre dado: 'Fernando',

nombre de familia: 'Alonso'

puntos: 207,

nacionalidad: “española”,

Constructores: [

{nombre: "Ferrari"}

]

}

];

});

Una variable única que quizás hayas notado es $scope. Estamos pasando esta variable como parámetro al controlador, ya que vincularía el controlador con las vistas. $scope contiene todos los datos para usar en la plantilla, y todos los datos que agregue serán accesibles en las vistas.

Agregaremos una matriz de datos estáticos por ahora y la reemplazaremos más adelante a medida que avancemos en nuestro proyecto.

Primero agreguemos el controlador a app.js, que debería verse así:

angular.module('F1FeederApp', [

'F1FeederApp.controladores'

]);

Esta pequeña línea de código inicializó nuestra aplicación y registró los módulos de los que depende nuestra aplicación. Ahora tenemos que agregar toda esta información a nuestro archivo index.html:

<!DOCTYPEhtml>

<html>

<title>Alimentador F-1</title>

</cabeza>

<tabla>

<tr><th colspan=”4″>Clasificación del campeonato de pilotos</th></tr>

</thead>

<tbody>

<td>{{$índice + 1}}</td>

<td>

{{driver.Driver.givenName}} {{driver.Driver.familyName}}

</td>

<td>{{controlador.Constructores[0].nombre}}</td>

<td>{{conductor.puntos}}</td>

</tr>

</tbody>

</tabla>

<guión src=”js/controladores.js”></guión>

</cuerpo>

</html>

En esta etapa, puede iniciar su aplicación. Sin embargo, tenga en cuenta que tendrá que depurar la aplicación. Un paso crucial para aprender a ejecutar el proyecto AngularJS es depurar una aplicación.

Cargar datos desde el servidor

Ahora agregaremos la funcionalidad de obtener datos en vivo de un servidor RESTful en nuestra aplicación. Para comunicarse con los servidores HTTP, AngularjS tiene dos servicios, $http y $resource. En nuestro código, usaremos $http ya que ofrece abstracción de alto nivel. Crearemos un servicio personalizado para abstraer las llamadas a la API de nuestro servidor. Obtendrá los datos y será un contenedor alrededor de $http. Entonces, agregaremos el siguiente código a nuestro archivo services.js:

angular.module('F1FeederApp.services', []).

fábrica ('ergastAPIservice', función ($ http) {

var ergastAPI = {};

ergastAPI.getDrivers = función() {

devolver $http({

método: 'JSONP',

URL: 'http://ergast.com/api/f1/2013/driverStandings.json?callback=JSON_CALLBACK'

});

}

volver ergastAPI;

});

Primero creamos un nuevo módulo llamado F1FeederApp.services y agregamos un servicio ergastAPIservice. Tenga en cuenta que hemos pasado $http como parámetro al servicio. También le diremos a Angular que agregue nuestro módulo a la aplicación. Para hacer todo eso, tenemos que reemplazar el código en app.js con lo siguiente:

angular.module('F1FeederApp', [

'F1FeederApp.controladores',

'F1FeederApp.servicios'

]);

Tendremos que modificar un poco controller.js y agregar ergastAPIservice en forma de dependencia, y luego terminará este paso:

angular.module('F1FeederApp.controllers', []).

controlador('driversController', function($alcance, ergastAPIservice) {

$scope.nameFilter = nulo;

$scope.driversList = [];

ergastAPIservice.getDrivers().success(función (respuesta) {

// Profundice en la respuesta para obtener los datos relevantes

$scope.driversList = respuesta.MRData.StandingsTable.StandingsLists[0].DriverStandings;

});

Para verificar si el código funciona o no, vuelva a cargar su aplicación. Notará que no modificamos la plantilla sino que solo incluimos la variable nameFilter. En la siguiente sección, usaremos esa variable:

Aplicar filtros

Hasta ahora, hemos agregado un controlador funcional a nuestra aplicación. Ahora le agregaremos más funciones agregando una barra de entrada de búsqueda de texto. Puede incluir el siguiente código en su index.html debajo de la etiqueta <body>:

Estamos usando la directiva "ng-model" aquí. Vinculará el campo de texto a la variable “$scope.nameFilter”. La directiva asegura que nuestro valor variable permanezca actualizado de acuerdo con el valor de entrada. Digamos a "ng-repeat" que debe filtrar la matriz "driversList" por el valor presente en "nameFilter" antes de generar los datos:

Estamos realizando dos enlaces de datos diferentes aquí. Primero, siempre que ingrese un valor en el campo de búsqueda, Angular se asegurará de que la variable $scope.nameFilter se actualice en consecuencia. En segundo lugar, tan pronto como nameFilter actualiza ng-repeat, la segunda directiva adjunta obtiene un nuevo valor y una actualización.

Supongamos que solo queremos filtrar usando Driver.familyName y Driver.givenName. Tendremos que agregar driversController debajo de $scope.driversList = [] así:

$scope.searchFilter = función (controlador) {

var palabra clave = new RegExp($scope.nameFilter, 'i');

return !$scope.nameFilter || palabra clave.prueba(controlador.Controlador.nombre dado) || palabra clave.prueba(conductor.Conductor.nombre de familia);

};

Para finalizar este proceso, solo tenemos que actualizar la línea con la directiva ng-repeat:

Puede volver a cargar la aplicación para ver si el código funciona o no. Nuestra aplicación ahora tiene una función de búsqueda. A continuación, agregaremos rutas.

Adición de rutas

Tenemos que crear una página que muestre los detalles de nuestros conductores. La página debe permitir que un usuario haga clic en un conductor y vea la información de su carrera. Comenzaremos agregando el servicio $routeProvider en el archivo app.js. Le ayudará a manejar las diferentes rutas de aplicación correctamente.

Ahora añadiremos una ruta para la información del piloto y otra para el marcador del campeonato. Ahora, nuestro archivo app.js se ve así:

angular.module('F1FeederApp', [

'F1FeederApp.servicios',

'F1FeederApp.controladores',

'ngRoute'

]).

config(['$proveedorderuta', function($proveedorderuta) {

$rutaProveedor.

when(“/drivers”, {templateUrl: “parciales/drivers.html”, controlador: “driversController”}).

when(“/drivers/:id”, {templateUrl: “parciales/driver.html”, controlador: “driverController”}).

de lo contrario ({redirectTo: '/ conductores'});

}]);

Después de agregar este código, cuando un usuario navegue a https://domain/#drivers, cargará el controlador de controladores y ubicará la vista parcial. Si ha estado siguiendo este tutorial hasta ahora, debe haber notado una cosa. ¡No hemos añadido las vistas parciales! Entonces nuestro próximo paso sería agregar lo mismo a nuestra aplicación:

Adición de vistas parciales

Una gran característica de AngularJS es que le permite vincular diferentes rutas a varias vistas y controladores. Sin embargo, para que AngularJS realice esta acción, debe saber dónde puede representar esas vistas parciales.

Así que estamos usando la directiva ng-view y la agregamos a nuestro archivo index.html:

<!DOCTYPEhtml>

<html>

<title>Alimentador F-1</title>

</cabeza>

<ng-vista></ng-vista>

<guión src=”js/controladores.js”></guión>

</cuerpo>

</html>

Debido a esta implementación, cuando navegamos a través de una ruta de aplicación, Angular cargará la vista relevante y la representará. Determinaría la ubicación para renderizar a través de la etiqueta <ng-view>. Ahora, solo tenemos que hacer un archivo llamado parciales/drivers.html y poner ahí el código HTML de la tabla de campeonato. Mientras estamos en eso, también vincularemos nuestra ruta de información del conductor con los nombres de los conductores:

<tabla>

<tr><th colspan=”4″>Clasificación del campeonato de pilotos</th></tr>

</thead>

<tbody>

<td>{{$índice + 1}}</td>

<td>

{{driver.Driver.givenName}} {{driver.Driver.familyName}}

</a>

</td>

<td>{{controlador.Constructores[0].nombre}}</td>

<td>{{conductor.puntos}}</td>

</tr>

</tbody>

</tabla>

Estamos llegando a las etapas finales de desarrollo. Nuestra página de información del conductor necesita datos, así que eso es lo que le agregaremos. Para hacer eso, tendríamos que escribir el siguiente código en services.js:

angular.module('F1FeederApp.servicios', [])

.factory('ergastAPIservice', function($http) {

var ergastAPI = {};

ergastAPI.getDrivers = función() {

devolver $http({

método: 'JSONP',

URL: 'http://ergast.com/api/f1/2013/driverStandings.json?callback=JSON_CALLBACK'

});

}

ergastAPI.getDriverDetails = función (id) {

devolver $http({

método: 'JSONP',

URL: 'http://ergast.com/api/f1/2013/drivers/'+ id +'/driverStandings.json?callback=JSON_CALLBACK'

});

}

ergastAPI.getDriverRaces = función (id) {

devolver $http({

método: 'JSONP',

URL: 'http://ergast.com/api/f1/2013/drivers/'+ id +'/results.json?callback=JSON_CALLBACK'

});

}

volver ergastAPI;

});

Ahora editaremos controllers.js. Nuestro objetivo es conectar la identificación de cada conductor al servicio, por lo que nuestra recuperación de información sigue siendo específica para el conductor solicitado.

angular.module('F1FeederApp.controllers', []).

/* Controlador de controladores */

controlador('driversController', function($alcance, ergastAPIservice) {

$scope.nameFilter = null;

$scope.driversList = [];

$scope.searchFilter = función (controlador) {

var re = new RegExp($scope.nameFilter, 'i');

return !$scope.nameFilter || re.prueba(controlador.Controlador.nombreDigital) || re.test(conductor.Conductor.nombre de familia);

};

ergastAPIservice.getDrivers().success(función (respuesta) {

//Profundizando en la respuesta para obtener los datos relevantes

$scope.driversList = respuesta.MRData.StandingsTable.StandingsLists[0].DriverStandings;

});

}).

/* controlador de controlador */

controlador('driverController', function($scope, $routeParams, ergastAPIservice) {

$scope.id = $routeParams.id;

$alcance.carreras = [];

$scope.driver = null;

ergastAPIservice.getDriverDetails($scope.id).success(función (respuesta) {

$scope.driver = respuesta.MRData.StandingsTable.StandingsLists[0].DriverStandings[0];

});

ergastAPIservice.getDriverRaces($scope.id).success(función (respuesta) {

$scope.races = respuesta.MRData.RaceTable.Races;

});

Tenga en cuenta que agregamos el servicio $routePrams en el controlador del controlador. Le permitiría acceder a los parámetros de URL y es un paso crucial.

Ahora crearemos un archivo llamado parciales/driver.html ya que hemos agregado todos los datos necesarios y solo tenemos que abordar el resto de la vista parcial. Hemos usado la directiva ng-show en el siguiente código. La directiva garantizará que nuestra aplicación solo muestre el elemento HTML necesario cuando la expresión sea verdadera. Esto significa que incluso si la condición es nula, la aplicación no mostrará el elemento HTML. Aquí está el código:

<sección id=”principal”>

</div>

País: {{conductor.Conductor.nacionalidad}} <br/>

Equipo: {{conductor.Constructores[0].nombre}}<br/>

Nacimiento: {{driver.Driver.dateOfBirth}}<br/>

<a href=”{{driver.Driver.url}}” target=”_blank”>Biografía</a>

</div>

</nav>

<tr><th colspan=”5″>Resultados Fórmula 1 2013</th></tr>

</thead>

<tbody>

<tr>

<td>Ronda</td> <td>Gran Premio</td> <td>Equipo</td> <td>Parrilla</td> <td>Carrera</td>

</tr>

<td>{{carrera.ronda}}</td>

<td><img src=”img/flags/{{carrera.Circuito.Ubicación.país}}.png” />{{carrera.nombre de la carrera}}</td>

<td>{{carrera.Resultados[0].Constructor.nombre}}</td>

<td>{{carrera.Resultados[0].grid}}</td>

<td>{{carrera.Resultados[0].posición}}</td>

</tr>

</tbody>

</tabla>

</div>

</sección>

Pasos finales (CSS)

A estas alturas, tiene una aplicación de alimentación deportiva que funciona correctamente. Como hemos discutido antes, CSS se enfoca en hacer que la página web se vea atractiva. Entonces, en este paso, tiene la independencia de agregar CSS a su aplicación y mejorar su apariencia. Puede cambiar las fuentes, cambiar el fondo, agregar diferentes imágenes o animar algunas transiciones para mejorar la interfaz de usuario de la aplicación. Los apartados técnicos de nuestro proyecto están completos.

Pago: salario de desarrollador de pila completa en la India

Más información sobre el desarrollo

¡Ahora ha creado una aplicación AngularJS! Esperamos que hayas disfrutado este tutorial. Recuérdalo

Angular es un marco bastante robusto con muchas funcionalidades. Los de este artículo eran muy pocos en comparación con las cosas que Angular es capaz de hacer. A medida que trabaje en proyectos AngularJS más avanzados, descubrirá más de sus poderosas capacidades.

Si desea obtener más información sobre el desarrollo de pila completa, le recomendamos que visite nuestro blog. Encontrará numerosos recursos sobre los diversos aspectos de este campo. Aquí hay algunos para leer más:

Las 10 habilidades principales para convertirse en un desarrollador de pila completa
¿Por qué convertirse en un desarrollador de pila completa?
Serie Cómo convertirse en un desarrollador de pila completa

Por otro lado, también puede tomar un curso completo de desarrollo y aprender de expertos de la industria a través de proyectos, videos y tareas.

Si está interesado en obtener más información sobre el desarrollo de pila completa, consulte el Diploma PG en desarrollo de software de pila completa de upGrad & IIIT-B, que está diseñado para profesionales que trabajan y ofrece más de 500 horas de capacitación rigurosa, más de 9 proyectos y asignaciones. , estado de exalumno de IIIT-B, proyectos finales prácticos y asistencia laboral con las mejores empresas.

Aterrice en el trabajo de sus sueños

UPGRAD Y DIPLOMA PG DE IIIT-BANGALORE EN DESARROLLO DE SOFTWARE

Inscríbase hoy