+HeberLopez

GDG Mendoza lead organizer

La magia de AngularJS

Historia

Iniciando AngularJS

<!doctype html>
<html>
<body>

<script src="angular.js"></script>
<script>
  angular.module('nombreDeMiAplicacion', []);
  angular.bootstrap(document, ['nombreDeMiAplicacion']);
</script>
</body>
</html>
<!doctype html>
<html ng-app="nombreDeMiAplicacion">
<body>

<script src="angular.js"></script>
<script>
  angular.module('nombreDeMiAplicacion', []);
</script>
</body>
</html>

Rutas

var app = angular.module("manejoDeRutas", ["ngRoute"]);
app.config(function($routeProvider){
    $routeProvider.when("/", {
        template: '<h1>Página principal</h1>' +
        '<br><a ng-href="#/vista2">Ir a página secundaria</a>'
    });
    $routeProvider.when("/vista2", {
        templateUrl: 'vista2.html'
//vista2.html: '<h1>Página secundaria</h1>' + 
//    '<br><a ng-href="#/">Ir a página principal</a>'
    });
    $routeProvider.otherwise({ redirectTo: "/" });
});
<body ng-app="manejoDeRutas">
  <div ng-view></div>

  <script src="angular.js"></script>
  <script src="angular-route.js"></script>
  <script src="app.js"></script>
</body>

index.html

app.js

http://goo.gl/LE4nGe

Controladores y Scopes

var app = angular.module("comportamientoDinamico", []);
app.controller("Tareas", function($scope, $http){

    $scope.listadoTareas = [];
    $scope.nuevaTarea = {};

    $scope.agregarNuevaTarea = function(){
        $scope.listadoTareas.push($scope.nuevaTarea);
        $scope.nuevaTarea = {};
    };

    $scope.eliminarTareasFinalizadas = function(){
        _.remove($scope.listadoTareas, function(tarea){
            return tarea.realizada;
        });
    };

    $scope.actualizarListadoDesdeServidor = function(){
        $http.get("datosFalsos.json").then(function(response){
            $scope.listadoTareas = response.data;
        });
    };

});

app.js

Consumiendo Scopes

<div ng-controller="Tareas">
    <div ng-if="listadoTareas.length">
        <h1>Listado de tareas!</h1>
        <ul>
            <li ng-repeat="tarea in listadoTareas"><label>
                <input type="checkbox" ng-model="tarea.realizada">{{tarea.descripcion}}
            </label></li>
        </ul>
        <button ng-click="eliminarTareasFinalizadas()">
            Eliminar finalizadas
        </button>
        <br/>
    </div>
    <div>
        <h1>Nueva tarea:</h1>
        <label>Descripcion: <input type="text" ng-model="nuevaTarea.descripcion"></label>
        <button ng-click="agregarNuevaTarea()">Agregar Tarea</button>
    </div>
    <button ng-click="actualizarListadoDesdeServidor()">Recargar tareas desde servidor</button>
</div>

http://goo.gl/54UktJ

Controladores y Rutas

var app = angular.module("rutasControladas", ["ngRoute"]);
app.config(function($routeProvider){
    $routeProvider.when("/", { 
        templateUrl: "listado-tareas.html",
        controller: "Tareas"
    });
    $routeProvider.when("/tarea/", { 
        templateUrl: "tarea.html",
        controller: "NuevaTarea"
    });
    $routeProvider.when("/tarea/:id", { 
        templateUrl: "tarea.html",
        controller: "EditarTarea"
    });
});

app.js

Servicios

app.factory("TareasService", function ($http) {

    var tareas = [];

    var TareasService = {};
    TareasService.getTareas = getTareas;
    TareasService.nuevaTarea = nuevaTarea;
    TareasService.eliminarFinalizadas = eliminarFinalizadas;

    return TareasService;

    function getTareas() {
        return tareas;
    }

    function nuevaTarea(tarea) {
        tareas.push(tarea);
    }

    function eliminarFinalizadas() {
        _.remove(tareas, function (tarea) {
            return tarea.realizada;
        });
    }

});

http://goo.gl/t4QR8e

¿Preguntas?

Ejemplos de la presentación: https://goo.gl/nbAvgc

google-developer-summit-chile-2015

By Heber López

Made with Slides.com

google-developer-summit-chile-2015

Presentación desarrollada para el Google Developer Summit realizado en Chile para Startups

  • 599

More from Heber López