Sugerencia rápida:convierta la aplicación Selector de servicios de Backbone.js a AngularJS

Esta es una publicación de invitado de Kevin P. un desarrollador web y lector de Tutorialzine, quien sugirió un mejor enfoque para nuestro formulario Backbone.js de la semana pasada, usando AngularJS. El código resultante fue mucho más simple y corto, por lo que invité a Kevin a compartirlo con ustedes.

El tutorial de la aplicación Backbone.js de la semana pasada muestra cómo crear un formulario dinámico con JavaScript, jQuery y la biblioteca Backbone. Funciona perfectamente bien, pero hay más de una forma de hacer ese formulario, y aquí te mostraré cómo construirlo con AngularJS. ¡El código JS tiene solo 15 líneas, en comparación con las 123 originales! Y lo que es más, ¡no se necesitan bibliotecas adicionales además de AngularJS!

Algunas palabras sobre AngularJS

AngularJS es una biblioteca de Google que tiene como objetivo separar claramente la representación HTML de sus datos. Con él, puede declarar enlaces en su HTML que describen cómo debe representarse y a qué modelo de datos corresponde su marcado. Si necesitas modificar algún aspecto de tu página, hazlo cambiando tu HTML y CSS; el JS contiene sus datos y la lógica detrás de ellos; en nuestro ejemplo, el modelo son los diferentes servicios y la lógica es el cálculo del precio total.

Con AngularJS, su código se vuelve corto y fácil de entender. Esto es importante ya que cuando el código es conciso, puede detectar dónde realizar cambios rápidamente y es más fácil de mantener.

El HTML

index.html

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8"/>
        <title>Your First AngularJS App</title>

        <!-- Google web fonts -->
        <link href="http://fonts.googleapis.com/css?family=PT+Sans:400,700" rel='stylesheet' />

        <!-- The main CSS file -->
        <link href="assets/css/style.css" rel="stylesheet" />
    </head>

    <body>

        <form id="main" ng-app ng-controller="myservices">
            <h1>My Services</h1>

            <ul id="services">
                <!-- The services will be inserted here -->
                <li ng-repeat="service in services">
                    <label>
                        <input type="checkbox" ng-model="service.selected" value="1" name="{{service.title}}" />
                        {{service.title}}<span>${{service.price}}</span>
                    </label>
                </li>
            </ul>

            <p id="total">total: <span>${{total()}}</span></p>

            <input type="submit" id="order" value="Order"/>

        </form>

        <!-- The single AngularJS include -->
        <script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.0.5/angular.min.js"></script>
        <script src="assets/js/script.js"></script>

    </body>
</html>

Se parece al original con importantes diferencias:

  • Todo el código HTML está aquí. No '
  • Los nuevos atributos describen qué hacer con los datos. 'ng-repetir ' declara la plantilla a usar para cada servicio (un
  • con una );
  • ng-model="servicio.seleccionado" asocia el estado de la casilla de verificación a una variable 'seleccionada' de cada servicio (inicialmente sin definir, lo que significa falso);
  • Los marcadores de posición indican dónde insertar un valor de nuestro modelo. {{servicio.precio}} pone el precio;
  • Las llamadas a funciones son necesarias cuando se aplica la lógica a los datos. Con total() resumimos el precio de los servicios seleccionados;
  • ¡No se necesita la biblioteca jQuery!

JavaScript

El JavaScript es tan corto como podría ser:

activos/js/script.js

function myservices($scope){
    $scope.services=[
        { title: 'web development', price: 200},
        { title: 'web design', price: 250},
        { title: 'photography', price: 100},
        { title: 'coffee drinking', price: 10}];
    $scope.total=function(){
        var t = 0;
        angular.forEach($scope.services, function(s){
            if(s.selected)
                t+=s.price;
        });
        return t;
    };
}
  • La función "misservicios " coincide con el ng-controller atributo en nuestro formulario. AngularJS actuará solo dentro de nuestro formulario;
  • Nuestro modelo de datos debe almacenarse en el $scope variable para que sea accesible desde el HTML. Primero declaramos nuestra lista de servicios;
  • El total() La función recorre los servicios, añadiendo los precios de los seleccionados. 'angular.forEach ' es una función conveniente, se podría haber usado un 'for' estándar.

No tiene que preocuparse cuando se leen sus datos o el total() función llamada. AngularJS lo hace por ti. Simplemente actualice los datos del modelo en JavaScript y la biblioteca actualizará el HTML.

Ir más allá

AngularJS y Backbone.js son similares en su propósito pero resuelven los problemas de manera diferente. Ambos le brindan herramientas para crear aplicaciones web altamente dinámicas. Pero se aplican las deficiencias habituales:debido a que la aplicación depende de JavaScript, estas bibliotecas no son buenas desde el punto de vista de SEO.

Un buen siguiente paso es leer el tutorial oficial de AngularJS que explica todos los conceptos básicos o ver algunos videos. Para obtener una excelente descripción general de todos los principales marcos JS del lado del cliente, puede visitar http://todomvc.com/ que implementa el mismo To Do aplicación en cada uno de ellos.