Loading presentation...

Present Remotely

Send the link below via email or IM

Copy

Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in our knowledge base article

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.

DeleteCancel

Make your likes visible on Facebook?

Connect your Facebook account to Prezi and let your likes appear on your timeline.
You can change this under Settings & Account at any time.

No, thanks

Introducción a Angular

No description
by

Xisco Lladó

on 29 February 2016

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of Introducción a Angular

Introducción a Angular
Xisco Lladó
CTO at Hotelinking
hola@xiscollado.com
@xiscoll
Conceptos clave
Single page applications (SPA)
¿Qué es Angular?
Un
framework
MVC, MVVM del lado del cliente desarrollado en 2009 por Google , 100% desarrollado en
javascript
y
Open Source
.

Super HTML
( a través de las directivas)

Two way data binding

Inyección de dependencias

Incentiva el testeo
(TDD)


Angular basics
Expresiones
Representan valores en el HTML
{{ expresión }}
Angular basics
Filtros
Helpers para expresiones

{{ expresión | filtro }}
Conceptos clave
Two way data binding
currency
date
filter
json
limitTo
lowercase
number
orderBy
uppercase
Se pueden crear filtros propios
Conceptos clave
Módulos


angular.module('myCoolApp',[]);
Conceptos clave
Inyección de dependencias
angular.module('myCoolApp',['ngRoute']);
Conceptos clave
Directivas


<html
ng-app
="myCoolApp">
ng-app
ng-controller
ng-show
ng-bind
Se pueden crear directivas propias
data-
ng-app
my cool app
$scope
Vincula los controladores con la vista
Crea el ámbito (scope) donde trabajar

Controladores
Implementan la lógica de presentación y mueven información entre la vista y los servicios, factorias, ...

Servicios
SINGLETONS
(Solo se crea UNA instancia que se comparte)
angular.module('myCoolApp',['ngRoute'])
.controller('Controller1',['$scope',function ($scope){..}]);
angular.module('myCoolApp',['ngRoute'])
.factory('Factory1',['$http',function ($http){..}]);
Directivas personalizadas
ng-repeat
ng-model
Routes
Nos ayudan a dividir nuestra aplicación en plantillas y a asignarle controladores a éstas
angular.module('myCoolApp',['ngRoute'])
.config(['$routeProvider',function($routeProvider){
$routeProvider.when('/',{
templateUrl : '...',
controller : '...'
})
.otherwise(redirectTo : '...');
}]);
<div ng-view></div>
Glasses for the masses
Roadmap
¿Qué es Angular?
Single page applications
Two way data binding
Módulos
Inyección de dependencias
DIRECTIVAS
EXPRESIONES
FILTROS
CONTROLADORES
$SCOPE
SERVICIOS
DIRECTIVAS CUSTOMIZADAS
RUTAS
Gracias
https://github.com/Xiscollado/angular_landing
Full transcript