SlideShare une entreprise Scribd logo
1  sur  8
Mejorando el HTML para crear
     Aplicaciones Web
QUÉ ES ANGULARJS



• Framework en Javascript puro
• Paradigma MVC (MVVM) en el lado
  cliente
• Open source
• Creado y mantenido por Google
FEATURES



•   Templates
•   Inyección de dependencias
•   Data binding (bidireccional)
•   RESTful
•   Routing
HELLO WORLD!



<!doctype html>
<html lang="en" ng-app>
<head>
   <meta charset="UTF-8">
   <title>Document</title>
   <script src=“angular.js"></script
</head>
<body>
   <h1>Hello World!!</h1>
</body>
</html>
FUNCIONAMIENTO
UN PASO MÁS


<!doctype html>
<html lang="en" ng-app>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src=“angular.js"></script
</head>
<body>
    Hello {{name}}!!
    <button ng-click=“action()”>
    <script>
    function MyCtrl($scope){
       $scope.action = function(){
        // bla bla bla
       };
       $scope.name = “World!!”;
    }
    </script>
</body>
</html>
$SCOPE
ANGULAR RUNTIME

Contenu connexe

En vedette

Rajab insteadoffast
Rajab insteadoffastRajab insteadoffast
Rajab insteadoffastDuas Org
 
Mi primer encarta
Mi primer encartaMi primer encarta
Mi primer encartaperrita14
 
Fuentes de energía juanma
Fuentes de energía juanmaFuentes de energía juanma
Fuentes de energía juanmamaestrasexto
 
Horario secundaria 2013 ok
Horario secundaria 2013 okHorario secundaria 2013 ok
Horario secundaria 2013 okjulio alvarez
 
ตรีโกณมิตินำเสนอOn demand
ตรีโกณมิตินำเสนอOn demandตรีโกณมิตินำเสนอOn demand
ตรีโกณมิตินำเสนอOn demandNittaya Noinan
 
Parte 1: Comentarios Yor Health
Parte 1: Comentarios Yor HealthParte 1: Comentarios Yor Health
Parte 1: Comentarios Yor HealthBertha Trigos
 
Catalogo actualizado
Catalogo actualizadoCatalogo actualizado
Catalogo actualizadopuma1791
 
Correcion del examen de sgbd
Correcion del examen de sgbdCorrecion del examen de sgbd
Correcion del examen de sgbdhugofabi
 
Modelos de planos_de_casas
Modelos de planos_de_casasModelos de planos_de_casas
Modelos de planos_de_casasmoniarq
 
Reyler
ReylerReyler
Reylerreyler
 
Tutorial youtube
Tutorial youtubeTutorial youtube
Tutorial youtubeoctantis
 

En vedette (18)

PresentacióN1
PresentacióN1PresentacióN1
PresentacióN1
 
Presentació espai botiga
Presentació espai botigaPresentació espai botiga
Presentació espai botiga
 
Rajab insteadoffast
Rajab insteadoffastRajab insteadoffast
Rajab insteadoffast
 
Mi primer encarta
Mi primer encartaMi primer encarta
Mi primer encarta
 
Fuentes de energía juanma
Fuentes de energía juanmaFuentes de energía juanma
Fuentes de energía juanma
 
Horario secundaria 2013 ok
Horario secundaria 2013 okHorario secundaria 2013 ok
Horario secundaria 2013 ok
 
Clock
ClockClock
Clock
 
Petxa Kutxa
Petxa KutxaPetxa Kutxa
Petxa Kutxa
 
Cynthiaaaaaaaaaa
CynthiaaaaaaaaaaCynthiaaaaaaaaaa
Cynthiaaaaaaaaaa
 
Practica de power point
Practica de power pointPractica de power point
Practica de power point
 
ตรีโกณมิตินำเสนอOn demand
ตรีโกณมิตินำเสนอOn demandตรีโกณมิตินำเสนอOn demand
ตรีโกณมิตินำเสนอOn demand
 
Parte 1: Comentarios Yor Health
Parte 1: Comentarios Yor HealthParte 1: Comentarios Yor Health
Parte 1: Comentarios Yor Health
 
3D
3D3D
3D
 
Catalogo actualizado
Catalogo actualizadoCatalogo actualizado
Catalogo actualizado
 
Correcion del examen de sgbd
Correcion del examen de sgbdCorrecion del examen de sgbd
Correcion del examen de sgbd
 
Modelos de planos_de_casas
Modelos de planos_de_casasModelos de planos_de_casas
Modelos de planos_de_casas
 
Reyler
ReylerReyler
Reyler
 
Tutorial youtube
Tutorial youtubeTutorial youtube
Tutorial youtube
 

Seminario Angular JS

  • 1. Mejorando el HTML para crear Aplicaciones Web
  • 2. QUÉ ES ANGULARJS • Framework en Javascript puro • Paradigma MVC (MVVM) en el lado cliente • Open source • Creado y mantenido por Google
  • 3. FEATURES • Templates • Inyección de dependencias • Data binding (bidireccional) • RESTful • Routing
  • 4. HELLO WORLD! <!doctype html> <html lang="en" ng-app> <head> <meta charset="UTF-8"> <title>Document</title> <script src=“angular.js"></script </head> <body> <h1>Hello World!!</h1> </body> </html>
  • 6. UN PASO MÁS <!doctype html> <html lang="en" ng-app> <head> <meta charset="UTF-8"> <title>Document</title> <script src=“angular.js"></script </head> <body> Hello {{name}}!! <button ng-click=“action()”> <script> function MyCtrl($scope){ $scope.action = function(){ // bla bla bla }; $scope.name = “World!!”; } </script> </body> </html>