+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
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>
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;
});
}
});
¿Preguntas?
Ejemplos de la presentación: https://goo.gl/nbAvgc
google-developer-summit-chile-2015
By Heber López
google-developer-summit-chile-2015
Presentación desarrollada para el Google Developer Summit realizado en Chile para Startups
- 600