Scribd Logo
Cargar

¡Te damos la bienvenida a Scribd!

  • Tutorial Sencillo de AngularJS

    Cargado por

    C.S. Jorge Chavez
    10 vistas17 páginas
    AngularJS es una tecnología para el desarrollo de aplicaciones web que permite actualizar la vista automáticamente cuando cambia el modelo de datos, o viceversa, a través del enlace de datos de doble vía. Utiliza directivas como ng-controller, ng-model y ng-repeat para separar la lógica, los datos y la presentación y facilitar la creación de componentes reutilizables mediante inyección de dependencias y pruebas unitarias.

    Descripción original:

    Título original

    Tutorial sencillo de AngularJS

    Derechos de autor

    © © All Rights Reserved

    Formatos disponibles

    PDF, TXT o lea en línea desde Scribd

    ¿Le pareció útil este documento?

    ¿Este contenido es inapropiado?

    Denunciar este documento
    AngularJS es una tecnología para el desarrollo de aplicaciones web que permite actualizar la vista automáticamente cuando cambia el modelo de datos, o viceversa, a través del enlace de datos de doble vía. Utiliza directivas como ng-controller, ng-model y ng-repeat para separar la lógica, los datos y la presentación y facilitar la creación de componentes reutilizables mediante inyección de dependencias y pruebas unitarias.

    Copyright:

    © All Rights Reserved
    Descargue como PDF, TXT o lea en línea desde Scribd
    Marcar por contenido inapropiado
    10 vistas17 páginas

    Tutorial Sencillo de AngularJS

    Cargado por

    C.S. Jorge Chavez
    AngularJS es una tecnología para el desarrollo de aplicaciones web que permite actualizar la vista automáticamente cuando cambia el modelo de datos, o viceversa, a través del enlace de datos de doble vía. Utiliza directivas como ng-controller, ng-model y ng-repeat para separar la lógica, los datos y la presentación y facilitar la creación de componentes reutilizables mediante inyección de dependencias y pruebas unitarias.

    Copyright:

    © All Rights Reserved
    Descargue como PDF, TXT o lea en línea desde Scribd
    Marcar por contenido inapropiado
    de 17

    ANGULARJS

    INTRODUCCIÓN Y PRIMEROS PASOS


    + David Rubert / @tombatossals

    GUARDAR COMO PDF


    QUÉ ES ANGULARJS
    Una tecnología nueva en la capa de cliente que nos permite
    realizar cosas chachis en nuestras páginas sin necesidad de
    montar jaleos de código. Separa muy bien la
    responsabilidad de cada tecnología en su ámbito: CSS,
    HTML y Javascript, y las comunica cuando lo considera
    necesario.
    POR QUÉ ANGULARJS
    Característica principal. No manosees el árbol DOM para
    acceder al valor de un elemento.

    // Esto noooooo por favoooor!


    var titulo = $("#elem").up("li").first("p").down("span.olala").val();

    // Esto se ve mejor :)
    var titulo = $scope.titulo;
    POR QUÉ ANGULARJS
    Esto se consigue actualizando la vista automáticamente
    cuando cambia el modelo, o viceversa. Two-way data
    binding.
    POR QUÉ ANGULARJS
    Disponemos de plantillas que extienden el vocabulario del
    código HTML para proporcionarnos la introducción de
    lógica en la representación de nuestra información.

    <div ng-controller="AlbumCtrl">
    <ul>
    <li ng-repeat="image in images">
    <img ng-src="{{image.thumbnail}}" alt="{{image.description}}">
    </li>
    </ul>
    </div>
    POR QUÉ ANGULARJS
    3. Reausability. Permite crear componentes (directivas)
    fácilmente reutilizables (que permiten aislar totalmente
    su función, no chocan con otros).

    4. Testing. Al tener componentes aislados, podemos testear


    su comportamiento de manera independiente.

    5. Inyección de dependencias. Si necesitamos hacer uso


    de un servicio, lo inyectamos en nuestro controlador
    directamente y funciona.
    VOCABULARIO
    Scope. Es el responsable de detectar los cambios en el
    modelo y proporciona el contexto a las plantillas.

    <!doctype html>
    <html ng-app>
    <head> ... </head>
    <body>
    <div ng-controller="GreetCtrl">
    Hello {{name}}!
    </div>
    <div ng-controller="ListCtrl">
    <ol>
    <li ng-repeat="name in names">{{name}}</li>
    </ol>
    </div>
    </body>
    </html>
    VOCABULARIO
    Controlador. Es el código con la lógica que comunica el
    modelo con la vista.
    VOCABULARIO
    Modelo. Son los datos, que junto con la plantilla producen
    las vistas.
    VOCABULARIO
    Vistas. Lo que el usuario visualiza. Parte de una plantilla, se
    funde con el modelo y se renderiza en el árbol DOM.
    VOCABULARIO
    Vistas. Lo que el usuario visualiza. Parte de una plantilla, se
    funde con el modelo y se renderiza en el árbol DOM.
    PASO 1
    MONTANDO LA
    INFRAESTRUCTURA
    $ git clone https://github.com/tombatossals/angularjs-tutorial
    $ git checkout phase1

    ng-app

    ng-controller

    ng-model

    ng-show

    {{ template_vars }}
    PASO 2
    MÁS DIRECTIVAS Y SERVICIOS
    $ git clone https://github.com/tombatossals/angularjs-tutorial
    $ git checkout phase2

    Filtro number. Números decimales.

    ng-cloak. Esperar antes de renderizar la plantilla.

    Watches. Inspeccionando variables del modelo.

    Servicio routeProvider. Enrutador.

    Vistas parciales. Cargar mini-plantillas.

    Tests E2E. Tests End-to-End.

    También podría gustarte